From 883e2cd7a14d201434dd5987a7d941e782ea804e Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 9 Mar 2023 14:00:57 +0800
Subject: [PATCH] input outline

---
 tailwind.config.js                            |  5 +-
 themes/example/components/ArticleLock.js      |  2 +-
 themes/example/components/SearchInput.js      |  2 +-
 themes/fukasawa/components/ArticleLock.js     |  2 +-
 themes/fukasawa/components/SearchInput.js     |  2 +-
 themes/hexo/components/ArticleLock.js         |  2 +-
 themes/hexo/components/SearchInput.js         |  2 +-
 themes/matery/components/ArticleLock.js       |  2 +-
 themes/matery/components/SearchInput.js       |  2 +-
 themes/medium/components/ArticleLock.js       |  2 +-
 themes/medium/components/SearchInput.js       |  2 +-
 themes/next/components/ArticleLock.js         |  2 +-
 themes/next/components/SearchInput.js         |  2 +-
 themes/nobelium/LayoutTag.js                  |  2 +-
 themes/nobelium/components/ArticleLock.js     |  2 +-
 themes/nobelium/components/SearchInput.js     |  2 +-
 themes/simple/LayoutBase.js                   | 14 ++---
 themes/simple/components/ArticleLock.js       |  2 +-
 themes/simple/components/DropMenu.js          | 37 +++++++-------
 themes/simple/components/Header.js            |  7 +--
 .../simple/components/{Nav.js => NavBar.js}   | 27 ++++------
 themes/simple/components/NavBarMenu.js        | 51 +++++++++++++++++++
 themes/simple/components/SideBar.js           |  2 +-
 themes/simple/components/TopBar.js            |  6 ++-
 themes/simple/config_simple.js                |  1 +
 25 files changed, 118 insertions(+), 64 deletions(-)
 rename themes/simple/components/{Nav.js => NavBar.js} (57%)
 create mode 100644 themes/simple/components/NavBarMenu.js

diff --git a/tailwind.config.js b/tailwind.config.js
index 6da86610..76f8e710 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,9 +21,10 @@ module.exports = {
         }
       },
       maxWidth: {
-        side: '14rem'
+        side: '14rem',
+        '9/10': '90%'
       }
-    },
+    }
   },
   variants: {
     extend: {}
diff --git a/themes/example/components/ArticleLock.js b/themes/example/components/ArticleLock.js
index 6e90f7b2..f21ce74a 100644
--- a/themes/example/components/ArticleLock.js
+++ b/themes/example/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/example/components/SearchInput.js b/themes/example/components/SearchInput.js
index 6a95ba01..fdb129b9 100644
--- a/themes/example/components/SearchInput.js
+++ b/themes/example/components/SearchInput.js
@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/fukasawa/components/ArticleLock.js b/themes/fukasawa/components/ArticleLock.js
index 1dedba16..9a8e6081 100644
--- a/themes/fukasawa/components/ArticleLock.js
+++ b/themes/fukasawa/components/ArticleLock.js
@@ -30,7 +30,7 @@ export const ArticleLock = props => {
           <div className="flex mx-4">
             <input
               id="password" type='password'
-              className="w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
+              className="outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
               onClick={submitPassword}
diff --git a/themes/fukasawa/components/SearchInput.js b/themes/fukasawa/components/SearchInput.js
index 2d54b6bc..6290415c 100644
--- a/themes/fukasawa/components/SearchInput.js
+++ b/themes/fukasawa/components/SearchInput.js
@@ -53,7 +53,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+      className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
diff --git a/themes/hexo/components/ArticleLock.js b/themes/hexo/components/ArticleLock.js
index 24f4b55f..0a56f39e 100644
--- a/themes/hexo/components/ArticleLock.js
+++ b/themes/hexo/components/ArticleLock.js
@@ -25,7 +25,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/hexo/components/SearchInput.js b/themes/hexo/components/SearchInput.js
index fefca73a..462c58b3 100644
--- a/themes/hexo/components/SearchInput.js
+++ b/themes/hexo/components/SearchInput.js
@@ -69,7 +69,7 @@ const SearchInput = props => {
         ref={searchInputRef}
         type="text"
         className={
-          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
         }
         onKeyUp={handleKeyUp}
         onCompositionStart={lockSearchInput}
diff --git a/themes/matery/components/ArticleLock.js b/themes/matery/components/ArticleLock.js
index 24f4b55f..0a56f39e 100644
--- a/themes/matery/components/ArticleLock.js
+++ b/themes/matery/components/ArticleLock.js
@@ -25,7 +25,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-indigo-500 hover:bg-indigo-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/matery/components/SearchInput.js b/themes/matery/components/SearchInput.js
index fefca73a..462c58b3 100644
--- a/themes/matery/components/SearchInput.js
+++ b/themes/matery/components/SearchInput.js
@@ -69,7 +69,7 @@ const SearchInput = props => {
         ref={searchInputRef}
         type="text"
         className={
-          'w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
+          'outline-none w-full text-sm pl-5 rounded-lg transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'
         }
         onKeyUp={handleKeyUp}
         onCompositionStart={lockSearchInput}
diff --git a/themes/medium/components/ArticleLock.js b/themes/medium/components/ArticleLock.js
index af7b4ec1..8ffe4044 100644
--- a/themes/medium/components/ArticleLock.js
+++ b/themes/medium/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
           <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/medium/components/SearchInput.js b/themes/medium/components/SearchInput.js
index 5b037540..f6c84d9c 100644
--- a/themes/medium/components/SearchInput.js
+++ b/themes/medium/components/SearchInput.js
@@ -61,7 +61,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef, className }) => {
     <input
       ref={searchInputRef}
       type='text'
-      className={'w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+      className={'outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
       onKeyUp={handleKeyUp}
       onCompositionStart={lockSearchInput}
       onCompositionUpdate={lockSearchInput}
diff --git a/themes/next/components/ArticleLock.js b/themes/next/components/ArticleLock.js
index 1f1c6b6b..6d2ec730 100644
--- a/themes/next/components/ArticleLock.js
+++ b/themes/next/components/ArticleLock.js
@@ -30,7 +30,7 @@ export const ArticleLock = props => {
           <div className="flex mx-4">
             <input
               id="password" type='password'
-              className="w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
+              className="outline-none w-full text-sm pl-5 transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500"
             ></input>
             <div
               onClick={submitPassword}
diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js
index 9ba7d04b..0f1e667a 100644
--- a/themes/next/components/SearchInput.js
+++ b/themes/next/components/SearchInput.js
@@ -66,7 +66,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/nobelium/LayoutTag.js b/themes/nobelium/LayoutTag.js
index 2f0ef119..2d85004b 100644
--- a/themes/nobelium/LayoutTag.js
+++ b/themes/nobelium/LayoutTag.js
@@ -25,7 +25,7 @@ export const LayoutTag = props => {
           placeholder={
             currentTag ? `Search in #${currentTag}` : 'Search Articles'
           }
-          className="block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
+          className="outline-none block w-full border px-4 py-2 border-black bg-white text-black dark:bg-night dark:border-white dark:text-white"
           onChange={e => setSearchValue(e.target.value)}
         />
         <svg
diff --git a/themes/nobelium/components/ArticleLock.js b/themes/nobelium/components/ArticleLock.js
index 43b6647e..cd636c47 100644
--- a/themes/nobelium/components/ArticleLock.js
+++ b/themes/nobelium/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/nobelium/components/SearchInput.js b/themes/nobelium/components/SearchInput.js
index 6a95ba01..fdb129b9 100644
--- a/themes/nobelium/components/SearchInput.js
+++ b/themes/nobelium/components/SearchInput.js
@@ -62,7 +62,7 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     ref={searchInputRef}
     type='text'
     placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
+    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-900 dark:text-white'}
     onKeyUp={handleKeyUp}
     onCompositionStart={lockSearchInput}
     onCompositionUpdate={lockSearchInput}
diff --git a/themes/simple/LayoutBase.js b/themes/simple/LayoutBase.js
index 44b9c152..88e17d84 100644
--- a/themes/simple/LayoutBase.js
+++ b/themes/simple/LayoutBase.js
@@ -1,7 +1,7 @@
 import CommonHead from '@/components/CommonHead'
 import React from 'react'
 import { Header } from './components/Header'
-import { Nav } from './components/Nav'
+import { NavBar } from './components/NavBar'
 import { Footer } from './components/Footer'
 // import { Title } from './components/Title'
 import { SideBar } from './components/SideBar'
@@ -30,17 +30,17 @@ const LayoutBase = props => {
             {/* 顶部LOGO */}
             <Header {...props} />
 
-            {/* 菜单 */}
-            <Nav {...props} />
+            {/* 导航栏 */}
+            <NavBar {...props} />
 
             {/* 主体 */}
-            <div id='container-inner' className="w-full relative z-10">
+            <div id='container-wrap' className="w-full relative">
 
                 {/* <Title {...props} /> */}
 
-                <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full relative container mx-auto justify-start md:flex items-start pt-12 px-2'}>
+                <div id='container-inner' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + '  max-w-9/10 w-full relative container mx-auto flex justify-center items-start pt-12'}>
 
-                    <div className='w-full max-w-6xl'>{children}</div>
+                    <div className='w-full flex-grow'>{children}</div>
 
                     <SideBar {...props} />
 
@@ -48,7 +48,7 @@ const LayoutBase = props => {
 
             </div>
 
-            <div className='fixed right-4 bottom-4 z-10'>
+            <div className='fixed right-4 bottom-4'>
                 <JumpToTopButton />
             </div>
 
diff --git a/themes/simple/components/ArticleLock.js b/themes/simple/components/ArticleLock.js
index 6e90f7b2..f21ce74a 100644
--- a/themes/simple/components/ArticleLock.js
+++ b/themes/simple/components/ArticleLock.js
@@ -26,7 +26,7 @@ export const ArticleLock = props => {
     <div className='text-center space-y-3'>
       <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
       <div className='flex mx-4'>
-        <input id="password" type='password' className='w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
+        <input id="password" type='password' className='outline-none w-full text-sm pl-5 rounded-l transition font-light leading-10 text-black dark:bg-gray-500 bg-gray-50'></input>
         <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 rounded-r duration-300 bg-gray-300" >
           <i className={'duration-200 cursor-pointer fas fa-key dark:text-black'} >&nbsp;{locale.COMMON.SUBMIT}</i>
         </div>
diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/DropMenu.js
index 0b3ac890..d45dea40 100644
--- a/themes/simple/components/DropMenu.js
+++ b/themes/simple/components/DropMenu.js
@@ -5,23 +5,26 @@ export const DropMenu = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
-  return <div className='pt-3' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
-        <Link
-            href={link?.to}
-            className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
-            {link?.name}
-            {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
-        </Link>
+  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
+
+        {/* 大屏菜单 */}
+            <Link
+                href={link?.to}
+                className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
+                {link?.name}
+                {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
+            </Link>
+
+            {/* 子菜单 */}
+            {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
+                {link.subMenus.map(sLink => {
+                  return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800  py-3 pr-6 pl-2'>
+                        <Link href={sLink.to}>
+                            <span className='text-xs'>{sLink.title}</span>
+                        </Link>
+                    </li>
+                })}
+            </ul>}
 
-        {/* 子菜单 */}
-        {hasSubMenu && <ul className={`${show ? 'visible opacity-100' : 'invisible opacity-0'} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 top-12 absolute block border drop-shadow-lg `}>
-            {link.subMenus.map(sLink => {
-              return <li key={sLink.id} className=' text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 border-b dark:border-gray-800  py-3 pr-6 pl-2'>
-                    <Link href={sLink.to}>
-                        <span className='text-xs'>{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
     </div>
 }
diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js
index c64d44b9..16104a56 100644
--- a/themes/simple/components/Header.js
+++ b/themes/simple/components/Header.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import CONFIG_SIMPLE from '../config_simple'
 // import CONFIG_SIMPLE from '../config_simple'
 
 /**
@@ -19,12 +20,12 @@ export const Header = (props) => {
                     <div className='flex space-x-12'>
                         <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
                             {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+                            <img src={siteInfo?.icon} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
                         </div>
 
                         <div>
-                            <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
-                            <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
+                            <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
+                            <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }}/>
                         </div>
                    </div>
                 </Link>
diff --git a/themes/simple/components/Nav.js b/themes/simple/components/NavBar.js
similarity index 57%
rename from themes/simple/components/Nav.js
rename to themes/simple/components/NavBar.js
index 1e5339c7..823831d4 100644
--- a/themes/simple/components/Nav.js
+++ b/themes/simple/components/NavBar.js
@@ -3,14 +3,15 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { DropMenu } from './DropMenu'
+import { NavBarMenu } from './NavBarMenu'
 
 /**
  * 菜单导航
  * @param {*} props
  * @returns
  */
-export const Nav = ({ customNav, customMenu }) => {
+export const NavBar = (props) => {
+  const { customNav, customMenu } = props
   const { locale } = useGlobal()
   const [showSearchInput, changeShowSearchInput] = useState(false)
   const router = useRouter()
@@ -47,23 +48,17 @@ export const Nav = ({ customNav, customMenu }) => {
   }
 
   return (
-        <nav className="w-full bg-white md:pt-0 px-6 relative z-20 shadow-md border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
-            <div className="container mx-auto max-w-8xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full h-12 text-center md:text-left flex flex-wrap justify-center items-stretch md:justify-start md:items-start space-x-4">
-                    {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='h-full px-4 w-full' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..."/>}
-
-                    {!showSearchInput && links?.map(link => {
-                      if (link?.show) {
-                        return <DropMenu key={link.id} link={link}/>
-                      } else {
-                        return null
-                      }
-                    })}
+        <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
+            <div id="nav-bar-inner" className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start">
+                {/* 左侧菜单 */}
+                <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
+                    {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
+                    {!showSearchInput && (<NavBarMenu {...props}/>)}
                 </div>
 
-                <div className="w-full md:w-1/3 text-center md:text-right hidden md:block">
+                <div className="absolute right-12 h-full text-center px-2 flex items-center">
                     {/* <!-- extra links --> */}
-                    <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass ' + ' cursor-pointer'} onClick={toggleShowSearchInput}></i>
+                    <i className={showSearchInput ? 'fa-regular fa-circle-xmark' : 'fa-solid fa-magnifying-glass' + ' align-middle cursor-pointer'} onClick={toggleShowSearchInput}></i>
                 </div>
             </div>
         </nav>
diff --git a/themes/simple/components/NavBarMenu.js b/themes/simple/components/NavBarMenu.js
new file mode 100644
index 00000000..17658696
--- /dev/null
+++ b/themes/simple/components/NavBarMenu.js
@@ -0,0 +1,51 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import CONFIG_SIMPLE from '../config_simple'
+import { DropMenu } from './DropMenu'
+
+/**
+ * 菜单导航
+ * @param {*} props
+ * @returns
+ */
+export const NavBarMenu = ({ customNav, customMenu }) => {
+  const { locale } = useGlobal()
+
+  let links = [
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_SIMPLE.MENU_SEARCH },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_SIMPLE.MENU_ARCHIVE },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_SIMPLE.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_SIMPLE.MENU_TAG }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  if (BLOG.CUSTOM_MENU) {
+    links = customMenu
+  }
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  return (<>
+        <div id='nav-menu-pc' className='hidden md:flex my-auto'>
+            {links?.map(link => {
+              if (link?.show) {
+                return <DropMenu key={link.id} link={link} />
+              } else {
+                return null
+              }
+            })}
+        </div>
+        <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
+            <div className='cursor-pointer hover:text-red-400 transition-all duration-200'>
+                <i className='fa fa-bars mr-3'/>
+                <span>MENU</span>
+            </div>
+        </div>
+        </>
+
+  )
+}
diff --git a/themes/simple/components/SideBar.js b/themes/simple/components/SideBar.js
index 946f0f01..04c496ca 100644
--- a/themes/simple/components/SideBar.js
+++ b/themes/simple/components/SideBar.js
@@ -4,7 +4,7 @@ import Announcement from './Announcement'
 export const SideBar = (props) => {
   const { notice } = props
   return (
-      <div className="w-full max-w-lg sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
+      <div className="hidden lg:block flex-none max-w-md sticky top-8 border-l dark:border-gray-800 pl-12 border-gray-100">
 
             <aside>
                 <Announcement post={notice}/>
diff --git a/themes/simple/components/TopBar.js b/themes/simple/components/TopBar.js
index 1f19edf1..210c41ef 100644
--- a/themes/simple/components/TopBar.js
+++ b/themes/simple/components/TopBar.js
@@ -6,8 +6,10 @@ import CONFIG_SIMPLE from '../config_simple'
  */
 export const TopBar = (props) => {
   if (CONFIG_SIMPLE.TOP_BAR_CONTENT) {
-    return <header className="w-full flex justify-between items-center px-20 h-10 bg-black dark:bg-hexo-black-gray z-10">
-        <div className='text-xs text-white z-50' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
+    return <header className="flex justify-center items-center bg-black dark:bg-hexo-black-gray">
+       <div id='top-bar-inner' className='max-w-9/10 w-full'>
+       <div className='text-xs text-center float-left text-white z-50 leading-5 py-2.5' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.TOP_BAR_CONTENT }}/>
+       </div>
     </header>
   }
   return <></>
diff --git a/themes/simple/config_simple.js b/themes/simple/config_simple.js
index ac45e9f1..a79f88b0 100644
--- a/themes/simple/config_simple.js
+++ b/themes/simple/config_simple.js
@@ -3,6 +3,7 @@ const CONFIG_SIMPLE = {
   LOGO_IMG: '/Logo.webp',
   TOP_BAR: true, // 显示顶栏
   TOP_BAR_CONTENT: process.env.NEXT_PUBLIC_THEME_SIMPLE_TOP_TIPS || '',
+  LOGO_DESCRIPTION: process.env.NEXT_PUBLIC_THEME_SIMPLE_LOGO_DESCRIPTION || '<div>程序员<br/>互联网爱好者/人文历史<br/>创业财富</div>',
 
   AUTHOR_LINK: process.env.NEXT_PUBLIC_AUTHOR_LINK || '#',