Promote Brīdinājumi to the visible header nav, add icons throughout

Brīdinājumi was tucked in the "Vairāk" overflow menu despite being a
primary newsroom workflow. Moved it into the always-visible nav
alongside Stacijas/Kartes/Faktiskā/Ūdens, and gave every visible nav
item a small icon (reusing the same icons as their Home cards) so the
header matches the icon treatment the overflow menu already had.

web/src/App.tsx

@@ -1,6 +1,6 @@
 import { Component, createSignal, onCleanup, onMount, ParentComponent } from 'solid-js'
 import { A, Route, Router, useLocation } from '@solidjs/router'
-import { AlertTriangle, Archive, Database as DatabaseIcon, Map, Menu, Wind, X } from 'lucide-solid'
+import { AlertTriangle, Archive, BarChart3, CloudSun, Database as DatabaseIcon, Map, Menu, RadioTower, Waves, Wind, X } from 'lucide-solid'
 
 import styles from './css/menu.module.css';
 import { Country } from './pages/country/Country';
@@ -41,14 +41,17 @@ const AppLayout: ParentComponent = (props) => {
     const location = useLocation()
     let moreMenu: HTMLDivElement | undefined
     const primaryPages = [
-        ['/station', 'Stacijas'], ['/cities', 'Kartes'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens'],
+        {path: '/station', label: 'Stacijas', icon: RadioTower},
+        {path: '/cities', label: 'Kartes', icon: BarChart3},
+        {path: '/faktiska', label: 'Faktiskā', icon: CloudSun},
+        {path: '/udens-temperatura', label: 'Ūdens', icon: Waves},
+        {path: '/bridinajumi', label: 'Brīdinājumi', icon: AlertTriangle},
     ]
     const secondaryPages = [
         {path: '/latvia', label: 'Apskats', icon: Map},
         {path: '/database', label: 'Arhīvs', icon: Archive},
         {path: '/harmonie', label: 'Harmonie', icon: Wind},
         {path: '/lvgmc-forecast', label: 'LVĢMC', icon: DatabaseIcon},
-        {path: '/bridinajumi', label: 'Brīdinājumi', icon: AlertTriangle},
     ]
     const isSecondaryPage = () => secondaryPages.some(page => location.pathname === page.path)
     onMount(() => {
@@ -74,7 +77,7 @@ const AppLayout: ParentComponent = (props) => {
                 <header class={styles.header} classList={{[styles.scrolled]: isScrolled()}}>
                     <A class={styles.brand} href="/" aria-label="WeatherTool galvenā izvēlne" onClick={() => setIsMoreOpen(false)}><span class={styles.brandMark}>W</span><span class={styles.brandCopy}><strong>WeatherTool</strong><small>Laikapstākļu datu vide</small></span></A>
                     <nav class={styles.navigation} aria-label="Galvenā navigācija">
-                        <ul class={styles.menu}>{primaryPages.map(([path, label]) => <li><A href={path} activeClass={styles.active} onClick={() => setIsMoreOpen(false)}>{label}</A></li>)}</ul>
+                        <ul class={styles.menu}>{primaryPages.map(page => <li><A href={page.path} activeClass={styles.active} onClick={() => setIsMoreOpen(false)}><page.icon size={17} strokeWidth={2}/><span>{page.label}</span></A></li>)}</ul>
                         <div class={styles.moreMenu} ref={moreMenu}>
                             <button class={styles.moreButton} classList={{[styles.active]: isSecondaryPage()}} type="button" aria-label={isMoreOpen() ? 'Aizvērt papildu izvēlni' : 'Atvērt papildu izvēlni'} 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}>Vairāk</span>

web/src/css/menu.module.css

@@ -1,7 +1,7 @@
 .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{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: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}
-.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)}
+.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:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 180ms,background 180ms,transform 180ms}.menu a svg{flex:0 0 auto}.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)}
 .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;gap:3px;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{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 160ms,background 160ms,transform 160ms}.morePanel a svg{flex:0 0 auto;color:var(--accent)}.morePanel a:hover,.morePanel a.active{background:rgba(222,238,255,.88);color:var(--accent-strong);transform:translateX(-2px)}
 @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}}