Skip to content

Commit 0320555

Browse files
timlrxtimlrx
authored
Merge pull request #980 from atchox/main
add functionality for fixed navbar
2 parents 1b6f385 + 3c948cc commit 0320555

File tree

8 files changed

+116
-90
lines changed

8 files changed

+116
-90
lines changed

‎app/layout.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,13 +98,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
9898
<ThemeProviders>
9999
<Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
100100
<SectionContainer>
101-
<div className="flex h-screen flex-col justify-between font-sans">
102-
<SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
103-
<Header />
104-
<main className="mb-auto">{children}</main>
105-
</SearchProvider>
106-
<Footer />
107-
</div>
101+
<SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
102+
<Header />
103+
<main className="mb-auto">{children}</main>
104+
</SearchProvider>
105+
<Footer />
108106
</SectionContainer>
109107
</ThemeProviders>
110108
</body>

‎components/Header.tsx‎

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

99
const Header = () => {
10+
let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
11+
if (siteMetadata.stickyNav) {
12+
headerClass += ' sticky top-0 z-50'
13+
}
14+
1015
return (
11-
<header className="flex items-center justify-between py-10">
12-
<div>
13-
<Link href="/" aria-label={siteMetadata.headerTitle}>
14-
<div className="flex items-center justify-between">
15-
<div className="mr-3">
16-
<Logo />
17-
</div>
18-
{typeof siteMetadata.headerTitle === 'string' ? (
19-
<div className="hidden h-6 text-2xl font-semibold sm:block">
20-
{siteMetadata.headerTitle}
21-
</div>
22-
) : (
23-
siteMetadata.headerTitle
24-
)}
16+
<header className={headerClass}>
17+
<Link href="/" aria-label={siteMetadata.headerTitle}>
18+
<div className="flex items-center justify-between">
19+
<div className="mr-3">
20+
<Logo />
2521
</div>
26-
</Link>
27-
</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>
2831
<div className="flex items-center space-x-4 leading-5 sm:space-x-6">
29-
{headerNavLinks
30-
.filter((link) => link.href !== '/')
31-
.map((link) => (
32-
<Link
33-
key={link.title}
34-
href={link.href}
35-
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
36-
sm:block"
37-
>
38-
{link.title}
39-
</Link>
40-
))}
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>
4145
<SearchButton />
4246
<ThemeSwitch />
4347
<MobileNav />

‎components/MobileNav.tsx‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
'use client'
22

33
import { Dialog, Transition } from '@headlessui/react'
4-
import { Fragment, useState } from 'react'
4+
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
5+
import { Fragment, useState, useEffect, useRef } from 'react'
56
import Link from './Link'
67
import headerNavLinks from '@/data/headerNavLinks'
78

89
const MobileNav = () => {
910
const [navShow, setNavShow] = useState(false)
11+
const navRef = useRef(null)
1012

1113
const onToggleNav = () => {
1214
setNavShow((status) => {
1315
if (status) {
14-
document.body.style.overflow = 'auto'
16+
enableBodyScroll(navRef.current)
1517
} else {
1618
// Prevent scrolling
17-
document.body.style.overflow = 'hidden'
19+
disableBodyScroll(navRef.current)
1820
}
1921
return !status
2022
})
2123
}
2224

25+
useEffect(() => {
26+
return clearAllBodyScrollLocks
27+
})
28+
2329
return (
2430
<>
2531
<button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
@@ -36,8 +42,8 @@ const MobileNav = () => {
3642
/>
3743
</svg>
3844
</button>
39-
<Transition appear show={navShow} as={Fragment}>
40-
<Dialog as="div" className="relative z-10" onClose={onToggleNav}>
45+
<Transition appear show={navShow} as={Fragment} unmount={false}>
46+
<Dialog as="div" onClose={onToggleNav} unmount={false}>
4147
<Transition.Child
4248
as={Fragment}
4349
enter="ease-out duration-300"
@@ -46,60 +52,53 @@ const MobileNav = () => {
4652
leave="ease-in duration-200"
4753
leaveFrom="opacity-100"
4854
leaveTo="opacity-0"
55+
unmount={false}
4956
>
50-
<div className="fixed inset-0 bg-black/25" />
57+
<div className="fixed inset-0 z-60 bg-black/25" />
5158
</Transition.Child>
5259

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

79-
<div className="flex justify-end">
80-
<button
81-
className="mr-8 mt-11 h-8 w-8"
82-
aria-label="Toggle Menu"
83-
onClick={onToggleNav}
84-
>
85-
<svg
86-
xmlns="http://www.w3.org/2000/svg"
87-
viewBox="0 0 20 20"
88-
fill="currentColor"
89-
className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
90-
>
91-
<path
92-
fillRule="evenodd"
93-
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"
94-
clipRule="evenodd"
95-
/>
96-
</svg>
97-
</button>
98-
</div>
99-
</Dialog.Panel>
100-
</Transition.Child>
101-
</div>
102-
</div>
87+
<button
88+
className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
89+
aria-label="Toggle Menu"
90+
onClick={onToggleNav}
91+
>
92+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
93+
<path
94+
fillRule="evenodd"
95+
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"
96+
clipRule="evenodd"
97+
/>
98+
</svg>
99+
</button>
100+
</Dialog.Panel>
101+
</Transition.Child>
103102
</Dialog>
104103
</Transition>
105104
</>

‎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 {

‎data/siteMetadata.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ const siteMetadata = {
2121
threads: 'https://www.threads.net',
2222
instagram: 'https://www.instagram.com',
2323
locale: 'en-US',
24+
// set to true if you want a navbar fixed to the top
25+
stickyNav: false,
2426
analytics: {
2527
// If you want to use an analytics provider you have to add it to the
2628
// content security policy in the `next.config.js` file.
@@ -34,7 +36,7 @@ const siteMetadata = {
3436
},
3537
// plausibleAnalytics: {
3638
// plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
37-
// If you are hosting your own Plausible.
39+
// If you are hosting your own Plausible.
3840
// src: '', // e.g. https://plausible.my-domain.com/js/script.js
3941
// },
4042
// simpleAnalytics: {},

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@tailwindcss/forms": "^0.5.7",
1818
"@tailwindcss/typography": "^0.5.12",
1919
"autoprefixer": "^10.4.13",
20+
"body-scroll-lock": "^4.0.0-beta.0",
2021
"contentlayer2": "0.4.6",
2122
"esbuild": "0.20.2",
2223
"github-slugger": "^2.0.0",

‎tailwind.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ module.exports = {
2828
primary: colors.pink,
2929
gray: colors.gray,
3030
},
31+
zIndex: {
32+
60: '60',
33+
70: '70',
34+
80: '80',
35+
},
3136
typography: ({ theme }) => ({
3237
DEFAULT: {
3338
css: {

‎yarn.lock‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4002,6 +4002,13 @@ __metadata:
40024002
languageName: node
40034003
linkType: hard
40044004

4005+
"body-scroll-lock@npm:^4.0.0-beta.0":
4006+
version: 4.0.0-beta.0
4007+
resolution: "body-scroll-lock@npm:4.0.0-beta.0"
4008+
checksum: 61d40007fddf64ecc69e9e02ed9d96bb895f88d7da65cea7651081110225de48efa44ffc4acd376ed004788e242a9af12059fec728c096774b49365524ea6f46
4009+
languageName: node
4010+
linkType: hard
4011+
40054012
"boolbase@npm:^1.0.0":
40064013
version: 1.0.0
40074014
resolution: "boolbase@npm:1.0.0"
@@ -10908,6 +10915,7 @@ __metadata:
1090810915
"@typescript-eslint/eslint-plugin": ^6.1.0
1090910916
"@typescript-eslint/parser": ^6.1.0
1091010917
autoprefixer: ^10.4.13
10918+
body-scroll-lock: ^4.0.0-beta.0
1091110919
contentlayer2: 0.4.6
1091210920
cross-env: ^7.0.3
1091310921
esbuild: 0.20.2

0 commit comments

Comments
 (0)