{# src/fledermap/web/templates/_nav.html -- included by map.html,
   sessions_list.html, session_detail.html. Design spec section 8:
   expanded by default at normal widths (this is the app's only standing
   nav, so hiding it by default would just make /sessions harder to find);
   auto-collapses below a responsive breakpoint, matching the "columns
   stack on narrow screens" convention Phase 5a's drawer panels already
   use, plus a manual toggle at any width.

   Also owns the dark-mode toggle (2026-08-28): a single x-data scope for
   both, since they're both small pieces of standing nav state with no
   need to be split into separate components. theme starts from
   localStorage, not from document.documentElement.dataset.theme --
   _theme_init.html already applied that (before this component ever
   initializes) for the override case, and reading localStorage directly
   here is the one source of truth for what state to display, whether or
   not an override is currently active.

   localStorage access is guarded with try/catch (final review, 2026-08-28):
   getItem/setItem/removeItem throw SecurityError when site data is blocked
   (private browsing settings, some enterprise policies), which would
   otherwise take out this entire x-data scope -- including the unrelated
   sidebar-collapse toggle -- not just the theme feature. On a throw, the
   DOM attribute still updates so the toggle works for this page load, and
   this.theme is assigned exactly once, after the try/catch, so it never
   disagrees with what actually happened in storage/the DOM. #}
<nav id="sidebar"
     x-data="{
       collapsed: window.matchMedia('(max-width: 800px)').matches,
       theme: (function () {
         try {
           return localStorage.getItem('fledermap-theme') || 'system';
         } catch (e) {
           return 'system';
         }
       })(),
       cycleTheme() {
         var next = { system: 'light', light: 'dark', dark: 'system' }[this.theme];
         try {
           if (next === 'system') {
             localStorage.removeItem('fledermap-theme');
             delete document.documentElement.dataset.theme;
           } else {
             localStorage.setItem('fledermap-theme', next);
             document.documentElement.dataset.theme = next;
           }
         } catch (e) {
           // localStorage inaccessible (e.g. blocked site data): still
           // update the DOM so the toggle works for this page load, even
           // though the choice won't persist across reloads.
           if (next === 'system') {
             delete document.documentElement.dataset.theme;
           } else {
             document.documentElement.dataset.theme = next;
           }
         }
         this.theme = next;
       },
     }"
     :class="{ collapsed: collapsed }">
  <button type="button" id="sidebar-toggle" @click="collapsed = !collapsed" aria-label="Toggle navigation">☰</button>
  <button type="button" id="theme-toggle" x-cloak @click="cycleTheme()" :aria-label="'Theme: ' + theme + '. Click to change.'">
    <span x-text="theme === 'dark' ? '🌙' : (theme === 'light' ? '☀️' : '🖥️')"></span>
  </button>
  <a class="sidebar-link" href="/"><span class="label">🦇 Map</span></a>
  <a class="sidebar-link" href="/sessions"><span class="label">Sessions</span></a>
  <a class="sidebar-link" href="/species"><span class="label">Species</span></a>
  <a class="sidebar-link" href="/sites"><span class="label">Sites</span></a>
  <a class="sidebar-link" href="/statistics"><span class="label">Statistics</span></a>
</nav>