d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Magzine 微调导航栏

Browse Source
This commit is contained in:
tangly1024
2024-11-23 14:44:59 +08:00
parent cfde73fbdd
commit b24befbafd
3 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
themes/magzine/components/Header.js
View File

@@ -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} />

8
themes/magzine/components/LogoBar.js
View File

@@ -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}

14
themes/magzine/components/MenuItemDrop.js
View File

@@ -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>