buyfakett/kazoottt-blog
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog.git synced 2025-06-22 18:21:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 修改 header

Browse Source
This commit is contained in:
KazooTTT
2024-11-25 22:27:02 +08:00
parent 2fcf679b05
commit f0037acb91
1 changed files with 46 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/layout/Header.astro
View File

@ -5,7 +5,7 @@ import { Image } from 'astro:assets'
<header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'> <header class='fixed left-0 right-0 top-0 z-50 bg-white shadow-sm dark:bg-gray-800'>
<nav <nav
class='mx-auto flex w-full items-center justify-between px-4 py-3 sm:flex sm:w-3/5 sm:items-center' class='mx-auto flex w-full items-center justify-between px-4 py-3 sm:flex sm:w-3/5 sm:items-center lg:w-4/5'
aria-label='global' aria-label='global'
> >
<a class='flex items-center' href='/'> <a class='flex items-center' href='/'>
@ -37,47 +37,50 @@ import { Image } from 'astro:assets'
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<div class='hidden flex-row items-center justify-center gap-x-7 sm:flex'> <div class='hidden flex-row items-center justify-center gap-x-7 sm:flex'>
<a <div class='relative'>
href='/blog' <a
class={` href='/blog'
flex-none text-[1.05rem] font-medium hover:text-foreground/75 class={`peer flex items-center text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''} aria-label='Blog Menu'
`} >
aria-label='Nav Menu Item' Blog
>Blog <svg
</a> xmlns='http://www.w3.org/2000/svg'
<a width='20'
href='/categories' height='20'
class={` viewBox='0 0 24 24'
flex-none text-[1.05rem] font-medium hover:text-foreground/75 class='ml-1 transform transition-transform duration-200 peer-hover:rotate-180'
${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''} >
`} <path fill='currentColor' d='m12 15l-5-5h10z'></path>
aria-label='Nav Menu Item' </svg>
>Cats. </a>
</a> <div
<a class='invisible absolute left-0 mt-2 w-48 rounded-md bg-white py-2 opacity-0 shadow-lg transition-all duration-200 hover:visible hover:opacity-100 peer-hover:visible peer-hover:opacity-100 dark:bg-gray-800'
href='/tags' >
class={` <a
flex-none text-[1.05rem] font-medium hover:text-foreground/75 href='/categories'
${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''} class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
`} aria-label='Categories Page'
aria-label='Nav Menu Item' >
>Tags Categories
</a> </a>
<a
href='/tags'
class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
aria-label='Tags Page'
>
Tags
</a>
</div>
</div>
<a <a
href='/tools' href='/tools'
class={` class={`flex-none text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
flex-none text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}
`}
aria-label='Nav Menu Item' aria-label='Nav Menu Item'
>Tools >Tools
</a> </a>
<div class='relative'> <div class='relative'>
<button <button class='peer flex items-center text-[1.05rem] font-medium' aria-label='More Menu'>
class='peer flex items-center text-[1.05rem] font-medium hover:text-foreground/75'
aria-label='More Menu'
>
More More
<svg <svg
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
@ -94,7 +97,7 @@ import { Image } from 'astro:assets'
> >
<a <a
href='/friends' href='/friends'
class='block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 hover:text-foreground/75 dark:hover:bg-gray-700' class={`block px-6 py-3 text-[1.05rem] font-medium transition-colors hover:bg-gray-100 ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''} dark:hover:bg-gray-700`}
aria-label='Friends Page' aria-label='Friends Page'
> >
Friends Friends
@ -135,51 +138,36 @@ import { Image } from 'astro:assets'
<!-- Mobile Navigation --> <!-- Mobile Navigation -->
<div <div
id='mobileMenu' id='mobileMenu'
class='fixed inset-x-0 top-[72px] hidden rounded-b-lg bg-white shadow-lg dark:bg-gray-800 sm:hidden z-50 max-h-[calc(100vh-72px)] overflow-y-auto' class='fixed inset-x-0 top-[72px] z-50 hidden max-h-[calc(100vh-72px)] overflow-y-auto rounded-b-lg bg-white shadow-lg dark:bg-gray-800 sm:hidden'
> >
<div class='space-y-2 px-4 py-2'> <div class='space-y-2 px-4 py-2'>
<a <a
href='/blog' href='/blog'
class={` class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}`}
block py-2 text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/blog') ? 'text-green-400' : ''}
`}
> >
Blog Blog
</a> </a>
<a <a
href='/categories' href='/categories'
class={` class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}`}
block py-2 text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/categories') ? 'text-green-400' : ''}
`}
> >
Cats. Cats.
</a> </a>
<a <a
href='/tags' href='/tags'
class={` class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''}`}
block py-2 text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/tags') ? 'text-green-400' : ''}
`}
> >
Tags Tags
</a> </a>
<a <a
href='/tools' href='/tools'
class={` class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}`}
block py-2 text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/tools') ? 'text-green-400' : ''}
`}
> >
Tools Tools
</a> </a>
<a <a
href='/friends' href='/friends'
class={` class={`block py-2 text-[1.05rem] font-medium ${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''}`}
block py-2 text-[1.05rem] font-medium hover:text-foreground/75
${Astro.url.pathname.startsWith('/friends') ? 'text-green-400' : ''}
`}
> >
Friends Friends
</a> </a>