Merge pull request #661 from ykxkykx/fix-matery-side-ui

fix: 修复matery主题下,notion的description内容过长,导致侧边side隐藏时溢出的问题

README.md

@@ -65,6 +65,8 @@
 
   <td align="center"><a href="https://github.com/Ylarod"><img src="https://avatars.githubusercontent.com/u/30978685" width="64px;"  alt="Ylarod"/><br/><sub><b>Ylarod</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=Ylarod" title="Ylarod" >🔧 🐛</a></td>
 
+  <td align="center"><a href="https://github.com/ykxkykx"><img src="https://avatars.githubusercontent.com/u/17985993" width="64px;"  alt="Joshua Astray"/><br/><sub><b>Joshua Astray</b></sub></a><br/><a href="https://github.com/tangly1024/NotionNext/commits?author=ykxkykx" title="ykxkykx" >🔧 🐛</a></td>
+
 </tr>
 </table>
 

components/SideBarDrawer.js

@@ -29,22 +29,22 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-56', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-60', 'ml-0')
       sideBarDrawerBackground.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-56')
+      sideBarDrawer.classList.replace('ml-0', '-ml-60')
       sideBarDrawerBackground.classList.replace('block', 'hidden')
     }
   }
 
-  return <div id='sidebar-wrapper' className={' ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-56'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 
     {/* 背景蒙版 */}
     <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
-         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
   </div>
 }
 export default SideBarDrawer

tailwind.config.js

@@ -19,8 +19,11 @@ module.exports = {
           'black-gray': '#101414',
           'light-gray': '#e5e5e5'
         }
+      },
+      maxWidth: {
+        side: '14rem'
       }
-    }
+    },
   },
   variants: {
     extend: {}

themes/matery/components/SideBar.js

@@ -27,8 +27,8 @@ const SideBar = (props) => {
 
   return (
         <div id='side-bar' className=''>
-            <div className="h-48 w-full bg-indigo-700">
-                <div className='mx-5 pt-6'>
+            <div className="mh-48 w-full bg-indigo-700">
+                <div className='mx-5 pt-6 pb-2'>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
                     <div className='text-white text-xl my-1'>{siteInfo?.title}</div>
@@ -41,7 +41,7 @@ const SideBar = (props) => {
                     const selected = (router.pathname === link.to) || (router.asPath === link.to)
                     return <Link key={link.to} title={link.to} href={link.to} >
                             <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'}
-                               className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+                              className={'py-2 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
                                 (selected ? 'bg-indigo-500 text-white ' : ' text-black dark:text-white ')} >
                                 <div className='my-auto items-center justify-between flex '>
                                     <i className={`${link.icon} w-4 ml-3 mr-6 text-center`} />