forked from phc/website
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.6 KiB
Plaintext
56 lines
1.6 KiB
Plaintext
---
|
|
const links = [
|
|
{ href: '/utenti', text: 'Utenti' },
|
|
// { href: '/macchinisti', text: 'Macchinisti' },
|
|
// { href: '/appunti', text: 'Appunti' },
|
|
{ href: '/notizie', text: 'Notizie' },
|
|
{ href: '/guide', text: 'Guide' },
|
|
{ href: '/storia', text: 'Storia' },
|
|
// { href: '/login', text: 'Login' },
|
|
]
|
|
---
|
|
|
|
<header>
|
|
<!-- main logo on the left -->
|
|
<a href="/" class="logo">
|
|
<img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
|
|
</a>
|
|
|
|
<!-- hidden checkbox for mobile js-less sidebar interaction -->
|
|
<input type="checkbox" id="header-menu-toggle" />
|
|
|
|
<!-- desktop navbar links -->
|
|
<div class="links desktop-only">
|
|
{
|
|
links.map(link => (
|
|
<a role="button" href={link.href}>
|
|
{link.text}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<!-- sidebar menu for mobile -->
|
|
<div class="mobile-only">
|
|
<label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</label>
|
|
<label id="header-menu-toggle-close" role="button" class="flat icon" for="header-menu-toggle">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
|
|
<div class="side-menu">
|
|
<div class="links">
|
|
{
|
|
links.map(link => (
|
|
<a role="button" href={link.href}>
|
|
{link.text}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</header>
|