bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine primary header navigation

Browse Source
This commit is contained in:
b0txec
2026-08-22 12:14:31 +03:00
parent d7a7db0710
commit 36d094ebdc
2 changed files with 43 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.tsx
+36 -7
View File
@@ -1,5 +1,6 @@
import { Component, createSignal, onCleanup, onMount, ParentComponent } from 'solid-js' import { Component, createSignal, onCleanup, onMount, ParentComponent } from 'solid-js'
import { A, Route, Router } from '@solidjs/router' import { A, Route, Router, useLocation } from '@solidjs/router'
import { Menu, X } from 'lucide-solid'
import styles from './css/menu.module.css'; import styles from './css/menu.module.css';
import { Country } from './pages/country/Country'; import { Country } from './pages/country/Country';
@@ -34,21 +35,49 @@ const App: Component = () => {
const AppLayout: ParentComponent = (props) => { const AppLayout: ParentComponent = (props) => {
const [isScrolled, setIsScrolled] = createSignal(false) const [isScrolled, setIsScrolled] = createSignal(false)
const pages = [ const [isMoreOpen, setIsMoreOpen] = createSignal(false)
['/station', 'Stations'], ['/cities', 'City analysis'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens temperatūra'], ['/latvia', 'Latvia overview'], const location = useLocation()
['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'], let moreMenu: HTMLDivElement | undefined
const primaryPages = [
['/station', 'Stations'], ['/cities', 'City analysis'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens temperatūra'],
] ]
const secondaryPages = [
['/latvia', 'Latvia overview'], ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
]
const isSecondaryPage = () => secondaryPages.some(([path]) => location.pathname === path)
onMount(() => { onMount(() => {
const updateHeader = () => setIsScrolled(window.scrollY > 24) const updateHeader = () => setIsScrolled(window.scrollY > 24)
const closeMoreMenu = (event: PointerEvent) => {
if (isMoreOpen() && moreMenu && !moreMenu.contains(event.target as Node)) setIsMoreOpen(false)
}
const closeMoreMenuWithEscape = (event: KeyboardEvent) => {
if (event.key === 'Escape') setIsMoreOpen(false)
}
updateHeader() updateHeader()
window.addEventListener('scroll', updateHeader, { passive: true }) window.addEventListener('scroll', updateHeader, { passive: true })
onCleanup(() => window.removeEventListener('scroll', updateHeader)) document.addEventListener('pointerdown', closeMoreMenu)
document.addEventListener('keydown', closeMoreMenuWithEscape)
onCleanup(() => {
window.removeEventListener('scroll', updateHeader)
document.removeEventListener('pointerdown', closeMoreMenu)
document.removeEventListener('keydown', closeMoreMenuWithEscape)
})
}) })
return ( return (
<div class="appShell"> <div class="appShell">
<header class={styles.header} classList={{[styles.scrolled]: isScrolled()}}> <header class={styles.header} classList={{[styles.scrolled]: isScrolled()}}>
<A class={styles.brand} href="/"><span class={styles.brandMark}>W</span><span><strong>WeatherTool</strong><small>Weather data workspace</small></span></A> <A class={styles.brand} href="/" aria-label="WeatherTool main menu" onClick={() => setIsMoreOpen(false)}><span class={styles.brandMark}>W</span><span class={styles.brandCopy}><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
<nav aria-label="Main navigation"><ul class={styles.menu}>{pages.map(([path, label]) => <li><A href={path} activeClass={styles.active}>{label}</A></li>)}</ul></nav> <nav class={styles.navigation} aria-label="Main navigation">
<ul class={styles.menu}>{primaryPages.map(([path, label]) => <li><A href={path} activeClass={styles.active} onClick={() => setIsMoreOpen(false)}>{label}</A></li>)}</ul>
<div class={styles.moreMenu} ref={moreMenu}>
<button class={styles.moreButton} classList={{[styles.active]: isSecondaryPage()}} type="button" aria-label={isMoreOpen() ? 'Close additional navigation' : 'Open additional navigation'} aria-haspopup="menu" aria-expanded={isMoreOpen()} onClick={() => setIsMoreOpen(value => !value)}>
{isMoreOpen() ? <X size={23} strokeWidth={2.2}/> : <Menu size={23} strokeWidth={2.2}/>}<span class={styles.moreLabel}>More</span>
</button>
<div class={styles.morePanel} classList={{[styles.open]: isMoreOpen()}} role="menu">
{secondaryPages.map(([path, label]) => <A href={path} activeClass={styles.active} role="menuitem" onClick={() => setIsMoreOpen(false)}>{label}</A>)}
</div>
</div>
</nav>
</header> </header>
<main class="appContent"> <main class="appContent">
{props.children} {props.children}
web/src/css/menu.module.css
+7 -5
View File
@@ -1,5 +1,7 @@
.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:34px;min-height:88px;padding:0 clamp(24px,3vw,58px);border-bottom:1px solid rgba(99,145,202,.22);background:linear-gradient(110deg,rgba(249,252,255,.9),rgba(224,238,255,.84),rgba(239,248,255,.9));box-shadow:0 8px 28px rgba(41,92,151,.04);backdrop-filter:blur(20px) saturate(125%);transition:min-height 280ms cubic-bezier(.23,1,.32,1),background 280ms,box-shadow 280ms,border-color 280ms} .header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:34px;height:82px;padding:0 clamp(24px,3vw,58px);border-bottom:1px solid rgba(99,145,202,.22);background:linear-gradient(110deg,rgba(249,252,255,.9),rgba(224,238,255,.84),rgba(239,248,255,.9));box-shadow:0 8px 28px rgba(41,92,151,.04);backdrop-filter:blur(20px) saturate(125%);transition:background 280ms,box-shadow 280ms,border-color 280ms}
.header.scrolled{min-height:58px;border-color:rgba(79,127,185,.3);background:linear-gradient(110deg,rgba(246,251,255,.82),rgba(218,234,253,.78),rgba(235,246,255,.84));box-shadow:0 8px 26px rgba(31,77,132,.12);backdrop-filter:blur(24px) saturate(140%)} .header.scrolled{border-color:rgba(79,127,185,.3);background:linear-gradient(110deg,rgba(246,251,255,.82),rgba(218,234,253,.78),rgba(235,246,255,.84));box-shadow:0 8px 26px rgba(31,77,132,.12);backdrop-filter:blur(24px) saturate(140%)}
.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;transition:gap 280ms,opacity 280ms}.brand:hover{opacity:.88}.brandMark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#4499e6,#15579b);color:#fff;font-family:Monda,sans-serif;font-size:23px;box-shadow:0 9px 22px rgba(26,91,157,.28),0 0 0 5px rgba(52,137,216,.08);transition:width 280ms,height 280ms,border-radius 280ms,font-size 280ms,box-shadow 280ms}.brand strong,.brand small{display:block;white-space:nowrap}.brand strong{font-size:18px;letter-spacing:-.01em;transition:font-size 280ms}.brand small{max-height:18px;margin-top:3px;color:var(--text-muted);font-size:12px;opacity:1;overflow:hidden;transition:max-height 240ms,margin 240ms,opacity 180ms}.scrolled .brand{gap:10px}.scrolled .brandMark{width:36px;height:36px;border-radius:10px;font-size:18px;box-shadow:0 5px 13px rgba(26,91,157,.22)}.scrolled .brand strong{font-size:15px}.scrolled .brand small{max-height:0;margin-top:0;opacity:0} .brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;transition:opacity 180ms}.brand:hover{opacity:.88}.brandMark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#4499e6,#15579b);color:#fff;font-family:Monda,sans-serif;font-size:23px;box-shadow:0 9px 22px rgba(26,91,157,.28),0 0 0 5px rgba(52,137,216,.08);transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),box-shadow 280ms}.brandCopy{width:190px;transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),opacity 220ms}.brand strong,.brand small{display:block;white-space:nowrap}.brand strong{font-size:18px;letter-spacing:-.01em}.brand small{margin-top:3px;color:var(--text-muted);font-size:12px}.scrolled .brandMark{transform:scale(.8);box-shadow:0 5px 13px rgba(26,91,157,.22)}.scrolled .brandCopy{transform:translateX(-7px) scale(.88);opacity:.82}
.menu{display:flex;align-items:center;gap:5px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a{position:relative;display:block;padding:11px 13px;border-radius:10px;color:var(--text-muted);font-size:14px;font-weight:700;text-decoration:none;transition:padding 280ms,font-size 280ms,color 180ms,background 180ms,transform 180ms}.menu a:after{content:"";position:absolute;right:13px;bottom:5px;left:13px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transition:opacity 180ms,transform 220ms}.menu a:hover{background:rgba(255,255,255,.5);color:var(--text);transform:translateY(-1px)}.menu a.active{background:rgba(224,239,255,.78);color:var(--accent-strong)}.menu a.active:after{opacity:1;transform:scaleX(1)}.scrolled .menu a{padding:8px 11px;font-size:12.5px}.scrolled .menu a:after{right:11px;bottom:3px;left:11px} .navigation,.menu{display:flex;align-items:center}.navigation{gap:8px}.menu{gap:5px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a,.moreButton,.morePanel a{font-size:14px;font-weight:700}.menu a{position:relative;display:block;padding:10px 13px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 180ms,background 180ms,transform 180ms}.menu a:after{content:"";position:absolute;right:13px;bottom:4px;left:13px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transition:opacity 180ms,transform 220ms}.menu a:hover{background:rgba(255,255,255,.5);color:var(--text);transform:translateY(-1px)}.menu a.active{background:rgba(224,239,255,.78);color:var(--accent-strong)}.menu a.active:after{opacity:1;transform:scaleX(1)}
@media(max-width:1120px){.header{align-items:flex-start;flex-direction:column;gap:10px;padding:14px 20px}.header.scrolled{min-height:auto;padding-block:9px}.menu{max-width:100%;overflow-x:auto}.menu a{white-space:nowrap}.brand small,.scrolled .brand small{max-height:0;margin:0;opacity:0}} .moreMenu{position:relative}.moreButton{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:44px;padding:0 12px;border:1px solid rgba(88,134,187,.24);border-radius:12px;background:rgba(255,255,255,.56);color:var(--text-muted);cursor:pointer;transition:color 180ms,background 180ms,border-color 180ms,transform 180ms}.moreButton:hover,.moreButton.active{border-color:rgba(42,119,199,.36);background:rgba(224,239,255,.88);color:var(--accent-strong)}.moreButton:hover{transform:translateY(-1px)}.moreLabel{font-size:13px}.morePanel{position:absolute;top:calc(100% + 10px);right:0;display:grid;min-width:230px;padding:8px;border:1px solid rgba(87,133,185,.28);border-radius:15px;background:rgba(247,251,255,.97);box-shadow:0 18px 50px rgba(25,65,110,.2);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity 160ms,transform 180ms,visibility 160ms;backdrop-filter:blur(22px)}.morePanel.open{opacity:1;visibility:visible;transform:none}.morePanel a{padding:12px 14px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 160ms,background 160ms}.morePanel a:hover,.morePanel a.active{background:rgba(222,238,255,.88);color:var(--accent-strong)}
@media(max-width:980px){.header{gap:16px;padding-inline:20px}.brandCopy{width:auto}.brand small{display:none}.moreLabel{display:none}.menu a{padding-inline:9px;font-size:13px}}
@media(max-width:760px){.header{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;padding-block:12px}.navigation{width:100%}.menu{max-width:calc(100% - 58px);overflow-x:auto}.menu a{white-space:nowrap}.moreMenu{margin-left:auto}.morePanel{position:fixed;top:132px;right:16px;left:16px}}