Skip to content

Commit 620252b

Browse files
atchoxatchox
committed
ref fix + overflow for nav
1 parent d789f80 commit 620252b

File tree

3 files changed

+79
-79
lines changed

3 files changed

+79
-79
lines changed

‎components/Header.tsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,41 @@ import ThemeSwitch from './ThemeSwitch'
77
import SearchButton from './SearchButton'
88

99
const Header = () => {
10-
let headerClass = 'flex items-center bg-white dark:bg-gray-950 justify-between py-10'
10+
let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
1111
if (siteMetadata.stickyNav) {
1212
headerClass += ' sticky top-0'
1313
}
1414

1515
return (
1616
<header className={headerClass}>
17-
<div>
18-
<Link href="/" aria-label={siteMetadata.headerTitle}>
19-
<div className="flex items-center justify-between">
20-
<div className="mr-3">
21-
<Logo />
22-
</div>
23-
{typeof siteMetadata.headerTitle === 'string' ? (
24-
<div className="hidden h-6 text-2xl font-semibold sm:block">
25-
{siteMetadata.headerTitle}
26-
</div>
27-
) : (
28-
siteMetadata.headerTitle
29-
)}
17+
<Link href="/" aria-label={siteMetadata.headerTitle}>
18+
<div className="flex items-center justify-between">
19+
<div className="mr-3">
20+
<Logo />
3021
</div>
31-
</Link>
32-
</div>
22+
{typeof siteMetadata.headerTitle === 'string' ? (
23+
<div className="hidden h-6 text-2xl font-semibold sm:block">
24+
{siteMetadata.headerTitle}
25+
</div>
26+
) : (
27+
siteMetadata.headerTitle
28+
)}
29+
</div>
30+
</Link>
3331
<div className="flex items-center space-x-4 leading-5 sm:space-x-6">
34-
{headerNavLinks
35-
.filter((link) => link.href !== '/')
36-
.map((link) => (
37-
<Link
38-
key={link.title}
39-
href={link.href}
40-
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
41-
sm:block"
42-
>
43-
{link.title}
44-
</Link>
45-
))}
32+
<div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
33+
{headerNavLinks
34+
.filter((link) => link.href !== '/')
35+
.map((link) => (
36+
<Link
37+
key={link.title}
38+
href={link.href}
39+
className="block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
40+
>
41+
{link.title}
42+
</Link>
43+
))}
44+
</div>
4645
<SearchButton />
4746
<ThemeSwitch />
4847
<MobileNav />

‎components/MobileNav.tsx‎

Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ const MobileNav = () => {
4242
/>
4343
</svg>
4444
</button>
45-
<Transition appear show={navShow} as={Fragment}>
46-
<Dialog as="div" ref={navRef} className="relative z-10" onClose={onToggleNav}>
45+
<Transition appear show={navShow} as={Fragment} unmount={false}>
46+
<Dialog as="div" onClose={onToggleNav} unmount={false}>
4747
<Transition.Child
4848
as={Fragment}
4949
enter="ease-out duration-300"
@@ -53,59 +53,51 @@ const MobileNav = () => {
5353
leaveFrom="opacity-100"
5454
leaveTo="opacity-0"
5555
>
56-
<div className="fixed inset-0 bg-black/25" />
56+
<div className="z-5 fixed inset-0 bg-black/25" />
5757
</Transition.Child>
5858

59-
<div className="fixed inset-0 overflow-y-auto">
60-
<div className="flex min-h-full items-center justify-center p-4 text-center">
61-
<Transition.Child
62-
as={Fragment}
63-
enter="transition ease-in-out duration-300 transform"
64-
enterFrom="translate-x-full opacity-0"
65-
enterTo="translate-x-0 opacity-95"
66-
leave="transition ease-in duration-200 transform"
67-
leaveFrom="translate-x-0 opacity-95"
68-
leaveTo="translate-x-full opacity-0"
59+
<Transition.Child
60+
as={Fragment}
61+
enter="transition ease-in-out duration-300 transform"
62+
enterFrom="translate-x-full opacity-0"
63+
enterTo="translate-x-0 opacity-95"
64+
leave="transition ease-in duration-200 transform"
65+
leaveFrom="translate-x-0 opacity-95"
66+
leaveTo="translate-x-full opacity-0"
67+
unmount={false}
68+
>
69+
<Dialog.Panel className="fixed left-0 top-0 z-10 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
70+
<nav
71+
ref={navRef}
72+
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
6973
>
70-
<Dialog.Panel className="fixed left-0 top-0 z-10 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
71-
<nav className="fixed mt-8 h-full text-left">
72-
{headerNavLinks.map((link) => (
73-
<div key={link.title} className="px-12 py-4">
74-
<Link
75-
href={link.href}
76-
className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
77-
onClick={onToggleNav}
78-
>
79-
{link.title}
80-
</Link>
81-
</div>
82-
))}
83-
</nav>
74+
{headerNavLinks.map((link) => (
75+
<Link
76+
key={link.title}
77+
href={link.href}
78+
className="mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
79+
onClick={onToggleNav}
80+
>
81+
{link.title}
82+
</Link>
83+
))}
84+
</nav>
8485

85-
<div className="flex justify-end">
86-
<button
87-
className="mr-8 mt-11 h-8 w-8"
88-
aria-label="Toggle Menu"
89-
onClick={onToggleNav}
90-
>
91-
<svg
92-
xmlns="http://www.w3.org/2000/svg"
93-
viewBox="0 0 20 20"
94-
fill="currentColor"
95-
className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
96-
>
97-
<path
98-
fillRule="evenodd"
99-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
100-
clipRule="evenodd"
101-
/>
102-
</svg>
103-
</button>
104-
</div>
105-
</Dialog.Panel>
106-
</Transition.Child>
107-
</div>
108-
</div>
86+
<button
87+
className="fixed right-4 top-7 z-20 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
88+
aria-label="Toggle Menu"
89+
onClick={onToggleNav}
90+
>
91+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
92+
<path
93+
fillRule="evenodd"
94+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
95+
clipRule="evenodd"
96+
/>
97+
</svg>
98+
</button>
99+
</Dialog.Panel>
100+
</Transition.Child>
109101
</Dialog>
110102
</Transition>
111103
</>

‎css/tailwind.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@
2222
@apply my-5;
2323
}
2424

25+
.no-scrollbar::-webkit-scrollbar {
26+
display: none;
27+
}
28+
29+
.no-scrollbar {
30+
-ms-overflow-style: none; /* IE and Edge */
31+
scrollbar-width: none; /* Firefox */
32+
}
33+
2534
/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
2635
input:-webkit-autofill,
2736
input:-webkit-autofill:focus {

0 commit comments

Comments
 (0)