gitbook

themes/gitbook/LayoutBase.js

@@ -38,6 +38,8 @@ const LayoutBase = props => {
             <CommonHead meta={meta} />
 
             <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
+                {/* 顶部导航栏 */}
+                <TopNavBar {...props} />
 
                 <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-between w-full h-full mx-auto'}>
 
@@ -56,11 +58,9 @@ const LayoutBase = props => {
                         </div>
                     </div>
 
-                    <div id='container-inner' className='w-full relative z-10'>
-                        {/* 顶部导航栏 */}
-                        <TopNavBar {...props} />
+                    <div id='center-wrapper' className='w-full relative z-10 pt-12'>
 
-                        <div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
+                        <div id='container-inner' className='w-full px-7 max-w-5xl justify-center mx-auto min-h-screen'>
                             {slotTop}
 
                             {onLoading ? LoadingCover : children}
@@ -80,6 +80,21 @@ const LayoutBase = props => {
                         <Footer title={siteInfo?.title} />
                     </div>
 
+                    {/* 左侧推拉抽屉 */}
+                    <div className={`hidden xl:block border-l dark:border-transparent w-96 relative z-10 ${CONFIG_MEDIUM.RIGHT_PANEL_DARK ? 'bg-hexo-black-gray dark' : ''}`}>
+                        <div className='py-14 px-6 sticky top-0'>
+                            <Tabs>
+                                {slotLeft}
+                                <div key={locale.NAV.ABOUT}>
+                                    {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
+                                    {showInfoCard && <InfoCard {...props} />}
+                                    {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
+                                </div>
+                            </Tabs>
+                            <Live2D />
+                        </div>
+                    </div>
+
                 </main>
 
                 {/* 移动端底部导航栏 */}

themes/gitbook/components/LogoBar.js

@@ -1,12 +1,14 @@
+import BLOG from '@/blog.config'
 import Link from 'next/link'
 
-export default function LogoBar (props) {
+export default function LogoBar(props) {
   const { siteInfo } = props
   return (
-    <div id='top-wrapper' className='w-full flex items-center '>
-          <Link href='/' className='text-md md:text-xl dark:text-gray-200'>
-            {siteInfo?.title}
-          </Link>
-    </div>
-  );
+        <div id='top-wrapper' className='w-full flex items-center'>
+            <Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
+                {/*  eslint-disable-next-line @next/next/no-img-element */}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2' /> {siteInfo?.title}
+            </Link>
+        </div>
+  )
 }

themes/gitbook/components/MenuItemDrop.js

@@ -17,7 +17,7 @@ export const MenuItemDrop = ({ link }) => {
   return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
 
         {hasSubMenu &&
-            <div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            <div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
                 <div>
                     {link?.icon && <i className={link?.icon} />} {link?.name}
@@ -27,7 +27,7 @@ export const MenuItemDrop = ({ link }) => {
         }
 
         {!hasSubMenu &&
-            <div className={'px-1 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            <div className={'px-3 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
                 <Link href={link?.to}>
                     {link?.icon && <i className={link?.icon} />} {link?.name}

themes/gitbook/components/TopNavBar.js

@@ -42,7 +42,7 @@ export default function TopNavBar(props) {
   }
 
   return (
-      <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+      <div id='top-nav' className={'fixed top-0 w-full z-40 ' + className}>
 
             {/* 移动端折叠菜单 */}
             <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden'>