marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: responsive nav toggle

Browse source
This commit is contained in:
Marco Allegretti 2026-02-04 00:41:17 +01:00
parent a11543a5f9
commit 0ee3fe6d21
2 changed files with 284 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
frontend/src/layouts/Layout.astro
View file

@ -84,8 +84,19 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
<VotingIcons />
<div class="app">
<header class="header">
<nav class="nav">
<nav class="nav" id="site-nav">
<a href="/" class="logo">Likwid</a>
<button
class="nav-toggle"
id="nav-toggle"
type="button"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="nav-menu"
>
<span class="nav-toggle-icon" aria-hidden="true"></span>
</button>
<div class="nav-menu" id="nav-menu">
<div class="nav-links">
<a href="/communities">Organizations</a>
<a href="/proposals">Proposals</a>
@ -95,6 +106,7 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
<a href="/login">Login</a>
{!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
</div>
</div>
</nav>
</header>
<main class="main">
@ -106,6 +118,35 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
</div>
<script define:vars={{ apiBase }}>
const nav = document.getElementById('site-nav');
const navToggle = document.getElementById('nav-toggle');
function setNavOpen(open) {
if (!nav || !navToggle) return;
nav.classList.toggle('is-open', open);
navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
}
if (nav && navToggle) {
navToggle.addEventListener('click', () => {
setNavOpen(!nav.classList.contains('is-open'));
});
nav.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
if (window.matchMedia('(max-width: 640px)').matches) {
setNavOpen(false);
}
});
});
window.addEventListener('resize', () => {
if (window.innerWidth > 640) {
setNavOpen(false);
}
});
}
// Dynamic auth state in navigation
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
@ -212,16 +253,86 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
}
@media (max-width: 640px) {
.nav {
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
gap: 0.75rem;
}
}
.nav-menu {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.06);
color: var(--color-text);
cursor: pointer;
transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-border-hover);
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 999px;
transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle-icon {
position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
content: '';
position: absolute;
left: 0;
}
.nav-toggle-icon::before {
top: -6px;
}
.nav-toggle-icon::after {
top: 6px;
}
.nav.is-open .nav-toggle-icon {
background: transparent;
}
.nav.is-open .nav-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.nav.is-open .nav-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
.logo {
font-size: 1.375rem;
font-weight: 700;
@ -239,6 +350,24 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
}
@media (max-width: 640px) {
.nav-toggle {
display: inline-flex;
}
.nav-menu {
display: none;
width: 100%;
flex-direction: column;
gap: 0.75rem;
padding-top: 0.75rem;
margin-top: 0.5rem;
border-top: 1px solid var(--color-border);
}
.nav.is-open .nav-menu {
display: flex;
}
.nav-links {
width: 100%;
justify-content: center;

139
frontend/src/layouts/PublicLayout.astro
View file

@ -82,8 +82,19 @@ const defaultTheme = DEFAULT_THEME;
<body>
<div class="public-app">
<header class="public-header">
<nav class="public-nav">
<nav class="public-nav" id="public-nav">
<a href="/" class="logo">Likwid</a>
<button
class="nav-toggle"
id="public-nav-toggle"
type="button"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="public-nav-menu"
>
<span class="nav-toggle-icon" aria-hidden="true"></span>
</button>
<div class="nav-menu" id="public-nav-menu">
<div class="nav-links">
<a href="/about">About</a>
<a href="/features">Features</a>
@ -94,6 +105,7 @@ const defaultTheme = DEFAULT_THEME;
<a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
{!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
</div>
</div>
</nav>
</header>
<main class="public-main">
@ -136,6 +148,36 @@ const defaultTheme = DEFAULT_THEME;
</div>
</footer>
</div>
<script>
const nav = document.getElementById('public-nav');
const toggle = document.getElementById('public-nav-toggle');
function setOpen(open) {
if (!nav || !toggle) return;
nav.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
}
if (nav && toggle) {
toggle.addEventListener('click', () => {
setOpen(!nav.classList.contains('is-open'));
});
nav.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
if (window.matchMedia('(max-width: 768px)').matches) {
setOpen(false);
}
});
});
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
setOpen(false);
}
});
}
</script>
</body>
</html>
@ -168,6 +210,75 @@ const defaultTheme = DEFAULT_THEME;
gap: 2rem;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.06);
color: var(--color-text);
cursor: pointer;
transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-border-hover);
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 999px;
transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle-icon {
position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
content: '';
position: absolute;
left: 0;
}
.nav-toggle-icon::before {
top: -6px;
}
.nav-toggle-icon::after {
top: 6px;
}
.public-nav.is-open .nav-toggle-icon {
background: transparent;
}
.public-nav.is-open .nav-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.public-nav.is-open .nav-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
.logo {
font-size: 1.375rem;
font-weight: 700;
@ -299,14 +410,36 @@ const defaultTheme = DEFAULT_THEME;
padding: 1rem;
}
.nav-links {
.nav-toggle {
display: inline-flex;
}
.nav-menu {
display: none;
order: 3;
width: 100%;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
margin-top: 1rem;
}
.public-nav.is-open .nav-menu {
display: flex;
}
.nav-links {
width: 100%;
justify-content: center;
gap: 1rem;
}
.nav-actions {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
}
</style>