mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ui: responsive nav toggle
This commit is contained in:
parent
a11543a5f9
commit
0ee3fe6d21
2 changed files with 284 additions and 22 deletions
|
|
@ -84,16 +84,28 @@ 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>
|
||||
<div class="nav-links">
|
||||
<a href="/communities">Organizations</a>
|
||||
<a href="/proposals">Proposals</a>
|
||||
<a href="/about">About</a>
|
||||
</div>
|
||||
<div class="nav-auth" id="nav-auth">
|
||||
<a href="/login">Login</a>
|
||||
{!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
|
||||
<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>
|
||||
<a href="/about">About</a>
|
||||
</div>
|
||||
<div class="nav-auth" id="nav-auth">
|
||||
<a href="/login">Login</a>
|
||||
{!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -82,17 +82,29 @@ 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>
|
||||
<div class="nav-links">
|
||||
<a href="/about">About</a>
|
||||
<a href="/features">Features</a>
|
||||
<a href="/manifesto">Manifesto</a>
|
||||
<a href="/docs">Documentation</a>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
<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}
|
||||
<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>
|
||||
<a href="/manifesto">Manifesto</a>
|
||||
<a href="/docs">Documentation</a>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue