67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { cn } from '$shared/lib'
|
||
|
|
import type { NavItem } from '../model/types'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* Navigation items to render
|
||
|
|
*/
|
||
|
|
items: NavItem[]
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Mobile navigation overlay, hidden on lg+ screens.
|
||
|
|
*/
|
||
|
|
export function MobileNav({ items }: Props) {
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Scrolls to the section by id with a 100px offset, then closes the menu.
|
||
|
|
*/
|
||
|
|
function scrollToSection(id: string) {
|
||
|
|
const el = document.getElementById(id)
|
||
|
|
if (el) {
|
||
|
|
const top = el.getBoundingClientRect().top + window.scrollY - 100
|
||
|
|
window.scrollTo({ top, behavior: 'smooth' })
|
||
|
|
}
|
||
|
|
setIsOpen(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="lg:hidden fixed top-0 left-0 right-0 bg-ochre-clay brutal-border-bottom z-50">
|
||
|
|
<div className="px-6 py-4 flex items-center justify-between">
|
||
|
|
<h4>allmy.work</h4>
|
||
|
|
<button
|
||
|
|
onClick={() => setIsOpen(prev => !prev)}
|
||
|
|
className="brutal-border px-4 py-2 bg-carbon-black text-ochre-clay"
|
||
|
|
>
|
||
|
|
{isOpen ? 'Close' : 'Menu'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{isOpen && (
|
||
|
|
<div className="px-6 py-6 brutal-border-top space-y-2 max-h-[80vh] overflow-y-auto">
|
||
|
|
{items.map(item => (
|
||
|
|
<button
|
||
|
|
key={item.id}
|
||
|
|
onClick={() => scrollToSection(item.id)}
|
||
|
|
className="w-full text-left brutal-border bg-ochre-clay px-4 py-3"
|
||
|
|
>
|
||
|
|
<div className={cn('flex items-baseline gap-3')}>
|
||
|
|
<span className="text-sm opacity-60 font-body">{item.number}</span>
|
||
|
|
<span
|
||
|
|
className="font-heading text-lg font-black"
|
||
|
|
style={{ fontVariationSettings: '"WONK" 1, "SOFT" 0' }}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|