Magzine 微调导航栏

Author: tangly1024

themes/magzine/components/Header.js

@@ -147,10 +147,10 @@ export default function Header(props) {
         {!showSearchInput && (
           <>
             {/* 左侧图标Logo */}
-            <div className='flex gap-x-8 h-full'>
-              <LogoBar {...props} />
+            <div className='flex gap-x-2 lg:gap-x-4 h-full'>
+              <LogoBar className={'text-sm md:text-md lg:text-lg'} />
               {/* 桌面端顶部菜单 */}
-              <ul className='hidden md:flex items-center gap-x-4 py-1'>
+              <ul className='hidden md:flex items-center gap-x-4 py-1 text-sm md:text-md'>
                 {links &&
                   links?.map((link, index) => (
                     <MenuItemDrop key={index} link={link} />

themes/magzine/components/LogoBar.js

@@ -1,12 +1,14 @@
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
-export default function LogoBar(props) {
+export default function LogoBar({ className }) {
   return (
-    <div id='top-wrapper' className='w-full flex items-center '>
+    <div
+      id='top-wrapper'
+      className={`w-full flex items-center ${className || ''}`}>
       <Link
         href='/'
-        className='logo flex text-md font-semibold md:text-xl hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
+        className='logo flex font-semibold hover:bg-black hover:text-white p-2 rounded-xl duration-200 dark:text-gray-200'>
         {/* <LazyImage
           src={siteInfo?.icon}
           width={24}

themes/magzine/components/MenuItemDrop.js

@@ -22,13 +22,13 @@ export const MenuItemDrop = ({ link }) => {
       {hasSubMenu && (
         <div
           className={
-            'px-2 h-full whitespace-nowrap duration-300 text-md justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
+            'px-2 h-full whitespace-nowrap duration-300 justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
             (selected
               ? 'bg-gray-600 text-white hover:text-white'
               : 'hover:text-gray-600')
           }>
-          <div className='items-center flex gap-x-1'>
-            {link?.icon && <i className={link?.icon} />} {link?.name}
+          <div className='items-center flex'>
+            {link?.icon && <i className={`${link?.icon} pr-2`} />} {link?.name}
             <i
               className={`px-1 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
           </div>
@@ -52,15 +52,15 @@ export const MenuItemDrop = ({ link }) => {
       {/* 子菜单 */}
       {hasSubMenu && (
         <ul
-          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg p-4 `}>
+          className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} p-1 absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg`}>
           {link?.subMenus?.map(sLink => {
             return (
               <li
                 key={sLink.id}
-                className='dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                className='py-3 pr-6 hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-gray-200 tracking-widest transition-color duration-200 dark:border-gray-800 '>
                 <Link href={sLink.href} target={link?.target}>
-                  <span className='text-sm'>
-                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                  <span className='text-sm ml-2'>
+                    {link?.icon && <i className={`${sLink?.icon} pr-2`}> </i>}
                     {sLink.title}
                   </span>
                 </Link>