mirror of
https://github.com/LiuYuYang01/ThriveX-Blog.git
synced 2026-06-08 16:22:49 +08:00
feat(Header): 优化导航栏分类和导航项的渲染逻辑
重构导航栏渲染逻辑,将分类和导航项分开处理,并优化子菜单的显示条件 修改Cate接口的type字段为联合类型,明确区分分类和导航类型 调整logo图片样式,防止图片被压缩
This commit is contained in:
@@ -98,7 +98,7 @@ const Header = () => {
|
||||
|
||||
{/* logo */}
|
||||
<Link href="/" className="flex items-center p-5 text-[15px] ">
|
||||
{isDark ? <img src={theme?.dark_logo} alt="Logo" className="w-32 h-10 pr-5 hover:scale-90 transition-transform" /> : <img src={isPathSty || isScrolled ? theme?.light_logo : theme?.dark_logo} alt="Logo" className="w-32 h-10 pr-5 hover:scale-90 transition-transform" />}
|
||||
{isDark ? <img src={theme?.dark_logo} alt="Logo" className="min-w-32 h-10 pr-5 hover:scale-90 transition-transform" /> : <img src={isPathSty || isScrolled ? theme?.light_logo : theme?.dark_logo} alt="Logo" className="min-w-32 h-10 pr-5 hover:scale-90 transition-transform" />}
|
||||
</Link>
|
||||
|
||||
<ul className="hidden lg:flex items-center h-16">
|
||||
@@ -109,9 +109,10 @@ const Header = () => {
|
||||
</li>
|
||||
|
||||
{/* 文章分类 */}
|
||||
{cateList?.map(
|
||||
(one) =>
|
||||
one.type === 'cate' && (
|
||||
{cateList?.map((one) => (
|
||||
<>
|
||||
{/* 渲染分类 */}
|
||||
{one.type === 'cate' && (
|
||||
<li key={one.id} className="group/one relative">
|
||||
<Link href={`/cate/${one.id}?name=${one.name}`} className={`flex items-center p-5 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
|
||||
{one.icon} {one.name}
|
||||
@@ -132,32 +133,35 @@ const Header = () => {
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
)}
|
||||
|
||||
<li className="group/one relative">
|
||||
<Link href="" className={`flex items-center p-5 px-10 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
|
||||
🧩 探索
|
||||
<Show is={true}>
|
||||
<IoIosArrowDown className="ml-2" />
|
||||
</Show>
|
||||
</Link>
|
||||
{/* 渲染导航 */}
|
||||
{one.type === 'nav' && (
|
||||
<li className="group/one relative">
|
||||
<Link href="" className={`flex items-center p-5 px-10 text-[15px] group-hover/one:!text-primary ${isPathSty || isScrolled ? 'text-[#333] dark:text-white' : 'text-white'}`}>
|
||||
{one.icon} {one.name}
|
||||
|
||||
<Show is={true}>
|
||||
<ul className="hidden group-hover/one:block overflow-hidden absolute top-[50px] w-full rounded-md backdrop-blur-sm bg-[rgba(255,255,255,0.95)] dark:bg-[rgba(44,51,62,0.95)]" style={{ boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08)' }}>
|
||||
{cateList?.map(
|
||||
(item) =>
|
||||
item.type === 'nav' && (
|
||||
<li key={item.id} className="group/two relative">
|
||||
<Link href={`${item.url}`} className={`relative inline-block w-full p-2.5 pl-5 text-[15px] box-border text-[#666] dark:text-white hover:!text-primary transition-all after:content-[''] after:absolute after:left-2.5 after:top-1/2 after:-translate-y-1/2 after:w-0 after:h-[3px] after:bg-primary after:transition-width group-hover/two:pl-8 hover:after:w-2.5`}>
|
||||
{item.icon} {item.name}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
{/* 如果有子分类就显示下拉三角 */}
|
||||
<Show is={!!one.children?.length}>
|
||||
<IoIosArrowDown className="ml-2" />
|
||||
</Show>
|
||||
</Link>
|
||||
|
||||
<Show is={!!one.children?.length}>
|
||||
<ul className="hidden group-hover/one:block overflow-hidden absolute top-[50px] w-full rounded-md backdrop-blur-sm bg-[rgba(255,255,255,0.95)] dark:bg-[rgba(44,51,62,0.95)]" style={{ boxShadow: '0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08)' }}>
|
||||
{one.children?.map((item) => (
|
||||
<li key={item.id} className="group/two relative">
|
||||
<Link href={`${item.url}`} className={`relative inline-block w-full p-2.5 pl-5 text-[15px] box-border text-[#666] dark:text-white hover:!text-primary transition-all after:content-[''] after:absolute after:left-2.5 after:top-1/2 after:-translate-y-1/2 after:w-0 after:h-[3px] after:bg-primary after:transition-width group-hover/two:pl-8 hover:after:w-2.5`}>
|
||||
{item.icon} {item.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Show>
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* 主题切换开关 */}
|
||||
|
||||
2
src/types/app/cate.d.ts
vendored
2
src/types/app/cate.d.ts
vendored
@@ -5,7 +5,7 @@ export interface Cate {
|
||||
url: string,
|
||||
icon: string,
|
||||
level: number,
|
||||
type: string,
|
||||
type: 'cate' | 'nav',
|
||||
order: number,
|
||||
children: Cate[]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user