Skip to content

Commit bf30e1a

Browse files
mk965mk965
committed
refactor(header): remove LiquidGlass component and optimize the structure of the header component
1 parent e06196f commit bf30e1a

File tree

1 file changed

+78
-77
lines changed

1 file changed

+78
-77
lines changed

‎components/header/index.tsx‎

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { MoreLinks } from './more-links'
1414
import { ThemeSwitcher } from './theme-switcher'
1515
import { AUTHOR_INFO } from '~/data/author-info'
1616
import { KbarSearchTrigger } from '../search/kbar-trigger'
17-
import { LiquidGlass } from './liquid-glass'
17+
// import { LiquidGlass } from './liquid-glass'
1818

1919
let logged = false
2020
function logASCIItext() {
@@ -39,89 +39,90 @@ export function Header() {
3939
const pathname = usePathname()
4040
useEffect(logASCIItext, [])
4141

42-
return (
43-
<Container
44-
as="header"
45-
className={clsx(SITE_METADATA.stickyNav && 'sticky top-2 z-50 lg:top-3')}
46-
>
47-
<LiquidGlass>
48-
<div className="flex items-center justify-between gap-3">
49-
<Logo />
50-
<div className="flex items-center gap-4">
51-
<div className="hidden gap-1.5 sm:flex">
52-
{HEADER_NAV_LINKS.map(({ title, href }) => {
53-
const isActive = pathname.startsWith(href)
54-
return (
55-
<Link key={title} href={href} className="px-3 py-1 font-medium">
56-
<GrowingUnderline
57-
className={clsx(isActive && 'bg-[length:100%_50%]')}
58-
data-umami-event={`nav-${href.replace('/', '')}`}
59-
>
60-
{title}
61-
</GrowingUnderline>
62-
</Link>
63-
)
64-
})}
65-
<MoreLinks />
66-
</div>
67-
<div
68-
data-orientation="vertical"
69-
role="separator"
70-
className="hidden h-4 w-px shrink-0 bg-gray-200 dark:bg-gray-600 md:block"
71-
/>
72-
<div className="flex items-center gap-2">
73-
<ThemeSwitcher />
74-
<KbarSearchTrigger />
75-
<MobileNav />
76-
</div>
77-
</div>
78-
</div>
79-
</LiquidGlass>
80-
</Container>
81-
)
82-
8342
/** backup */
84-
43+
// Liquid Glass
44+
//
8545
// return (
8646
// <Container
8747
// as="header"
88-
// className={clsx(
89-
// 'bg-white/75 py-2 backdrop-blur dark:bg-dark/75',
90-
// 'shadow-sm saturate-100 md:rounded-2xl',
91-
// SITE_METADATA.stickyNav && 'sticky top-2 z-50 lg:top-3'
92-
// )}
48+
// className={clsx(SITE_METADATA.stickyNav && 'sticky top-2 z-50 lg:top-3')}
9349
// >
94-
// <div className="flex items-center justify-between gap-3">
95-
// <Logo />
96-
// <div className="flex items-center gap-4">
97-
// <div className="hidden gap-1.5 sm:flex">
98-
// {HEADER_NAV_LINKS.map(({ title, href }) => {
99-
// const isActive = pathname.startsWith(href)
100-
// return (
101-
// <Link key={title} href={href} className="px-3 py-1 font-medium">
102-
// <GrowingUnderline
103-
// className={clsx(isActive && 'bg-[length:100%_50%]')}
104-
// data-umami-event={`nav-${href.replace('/', '')}`}
105-
// >
106-
// {title}
107-
// </GrowingUnderline>
108-
// </Link>
109-
// )
110-
// })}
111-
// <MoreLinks />
112-
// </div>
113-
// <div
114-
// data-orientation="vertical"
115-
// role="separator"
116-
// className="hidden h-4 w-px shrink-0 bg-gray-200 dark:bg-gray-600 md:block"
117-
// />
118-
// <div className="flex items-center gap-2">
119-
// <ThemeSwitcher />
120-
// <KbarSearchTrigger />
121-
// <MobileNav />
50+
// <LiquidGlass>
51+
// <div className="flex items-center justify-between gap-3">
52+
// <Logo />
53+
// <div className="flex items-center gap-4">
54+
// <div className="hidden gap-1.5 sm:flex">
55+
// {HEADER_NAV_LINKS.map(({ title, href }) => {
56+
// const isActive = pathname.startsWith(href)
57+
// return (
58+
// <Link key={title} href={href} className="px-3 py-1 font-medium">
59+
// <GrowingUnderline
60+
// className={clsx(isActive && 'bg-[length:100%_50%]')}
61+
// data-umami-event={`nav-${href.replace('/', '')}`}
62+
// >
63+
// {title}
64+
// </GrowingUnderline>
65+
// </Link>
66+
// )
67+
// })}
68+
// <MoreLinks />
69+
// </div>
70+
// <div
71+
// data-orientation="vertical"
72+
// role="separator"
73+
// className="hidden h-4 w-px shrink-0 bg-gray-200 dark:bg-gray-600 md:block"
74+
// />
75+
// <div className="flex items-center gap-2">
76+
// <ThemeSwitcher />
77+
// <KbarSearchTrigger />
78+
// <MobileNav />
79+
// </div>
12280
// </div>
12381
// </div>
124-
// </div>
82+
// </LiquidGlass>
12583
// </Container>
12684
// )
85+
86+
return (
87+
<Container
88+
as="header"
89+
className={clsx(
90+
'bg-white/75 py-2 backdrop-blur dark:bg-dark/75',
91+
'shadow-sm saturate-100 md:rounded-2xl',
92+
SITE_METADATA.stickyNav && 'sticky top-2 z-50 lg:top-3'
93+
)}
94+
>
95+
<div className="flex items-center justify-between gap-3">
96+
<Logo />
97+
<div className="flex items-center gap-4">
98+
<div className="hidden gap-1.5 sm:flex">
99+
{HEADER_NAV_LINKS.map(({ title, href }) => {
100+
const isActive = pathname.startsWith(href)
101+
return (
102+
<Link key={title} href={href} className="px-3 py-1 font-medium">
103+
<GrowingUnderline
104+
className={clsx(isActive && 'bg-[length:100%_50%]')}
105+
data-umami-event={`nav-${href.replace('/', '')}`}
106+
>
107+
{title}
108+
</GrowingUnderline>
109+
</Link>
110+
)
111+
})}
112+
<MoreLinks />
113+
</div>
114+
<div
115+
data-orientation="vertical"
116+
role="separator"
117+
className="hidden h-4 w-px shrink-0 bg-gray-200 dark:bg-gray-600 md:block"
118+
/>
119+
<div className="flex items-center gap-2">
120+
<ThemeSwitcher />
121+
<KbarSearchTrigger />
122+
<MobileNav />
123+
</div>
124+
</div>
125+
</div>
126+
</Container>
127+
)
127128
}

0 commit comments

Comments
 (0)
⚡