css changes

examples/crash_reporter/backend/public/assets/css/app.css

@@ -27,38 +27,209 @@ a:hover { text-decoration: underline; }
   transition: width .2s ease;
   overflow: hidden;
   position: relative;
+  flex-shrink: 0;
 }
-.nav-pane.open, .nav-pane:hover { width: 220px; }
+.nav-pane.open,
+.nav-pane:hover { width: 72px; }
 .nav-handle {
   position: absolute;
-  right: 0;
+  top: 8px;
-  top: 0;
+  left: 50%;
-  bottom: 0;
+  transform: translateX(-50%);
-  width: 4px;
+  width: 40px;
-  cursor: ew-resize;
+  height: 40px;
-  background: var(--border);
+  padding: 0;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  background: transparent;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background .15s ease, color .15s ease;
 }
-.nav-pane ul { list-style: none; margin: 48px 0 0; padding: 0 12px; }
+.nav-handle:hover,
-.nav-pane li { margin: 8px 0; }
+.nav-handle:focus-visible {
-.nav-pane a {
+  background: rgba(61, 139, 253, .15);
-  display: block;
-  padding: 10px 12px;
-  border-radius: 8px;
   color: var(--text);
-  white-space: nowrap;
+  outline: none;
 }
-.nav-pane a.active, .nav-pane a:hover {
+.nav-list {
-  background: rgba(61, 139, 253, .2);
+  list-style: none;
+  margin: 56px 0 0;
+  padding: 0 8px;
+}
+.nav-list li { margin: 6px 0; }
+.nav-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  padding: 0;
+  border-radius: 10px;
+  color: var(--muted);
   text-decoration: none;
+  transition: background .15s ease, color .15s ease;
+}
+.nav-link.active,
+.nav-link:hover {
+  background: rgba(61, 139, 253, .22);
+  color: var(--accent);
+  text-decoration: none;
+}
+.nav-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.nav-icon {
+  display: block;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+/* Hamburger (nav handle) */
+.nav-icon--menu {
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
+}
+/* House */
+.nav-icon--home {
+  width: 18px;
+  height: 16px;
+}
+.nav-icon--home::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 7px solid currentColor;
+}
+.nav-icon--home::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  bottom: 0;
+  width: 12px;
+  height: 9px;
+  border: 2px solid currentColor;
+  border-top: none;
+  border-radius: 0 0 2px 2px;
+  box-sizing: border-box;
+}
+/* Stacked reports */
+.nav-icon--reports {
+  width: 16px;
+  height: 18px;
+  border: 2px solid currentColor;
+  border-radius: 3px;
+}
+.nav-icon--reports::before,
+.nav-icon--reports::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+.nav-icon--reports::before { top: 5px; }
+.nav-icon--reports::after { top: 10px; width: 70%; }
+/* User */
+.nav-icon--user {
+  width: 18px;
+  height: 18px;
+}
+.nav-icon--user::before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 8px;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.nav-icon--user::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  bottom: 0;
+  height: 7px;
+  border: 2px solid currentColor;
+  border-top: none;
+  border-radius: 8px 8px 3px 3px;
+  box-sizing: border-box;
+}
+/* Logout — door + arrow */
+.nav-icon--logout {
+  width: 18px;
+  height: 16px;
+}
+.nav-icon--logout::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 1px;
+  width: 10px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right: none;
+  border-radius: 2px 0 0 2px;
+  box-sizing: border-box;
+}
+.nav-icon--logout::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid currentColor;
 }
 .nav-user {
   position: absolute;
-  bottom: 12px;
+  bottom: 10px;
-  left: 12px;
+  left: 0;
-  right: 12px;
+  right: 0;
-  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
   color: var(--muted);
 }
+.nav-user-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  color: var(--muted);
+}
+.nav-link--logout { color: var(--muted); }
+.nav-link--logout:hover { color: var(--danger); background: rgba(248, 113, 113, .12); }
 .main-pane { flex: 1; padding: 24px 28px; }
 .bottom-bar {
   height: 40px;

examples/crash_reporter/backend/public/assets/js/app.js

@@ -2,5 +2,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const nav = document.getElementById('nav-pane');
   const handle = document.getElementById('nav-handle');
   if (!nav || !handle) return;
-  handle.addEventListener('click', () => nav.classList.toggle('open'));
+  handle.addEventListener('click', () => {
+    const open = nav.classList.toggle('open');
+    handle.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
+  handle.setAttribute('aria-expanded', nav.classList.contains('open') ? 'true' : 'false');
 });

examples/crash_reporter/backend/views/layout.php

@@ -24,15 +24,42 @@
 <body>
   <header class="top-menu" hidden aria-hidden="true"></header>
   <div class="shell">
-    <nav class="nav-pane" id="nav-pane">
+    <nav class="nav-pane" id="nav-pane" aria-label="Console navigation">
-      <div class="nav-handle" id="nav-handle" title="Navigation"></div>
+      <button type="button" class="nav-handle" id="nav-handle" aria-label="Toggle navigation" title="Navigation">
-      <ul>
+        <span class="nav-icon nav-icon--menu" aria-hidden="true"></span>
-        <li><a href="<?= h(Auth::basePath()) ?>/?view=home" class="<?= ($view ?? '') === 'home' ? 'active' : '' ?>">Home</a></li>
+      </button>
-        <li><a href="<?= h(Auth::basePath()) ?>/?view=reports" class="<?= ($view ?? '') === 'reports' ? 'active' : '' ?>">Reports</a></li>
+      <ul class="nav-list">
+        <li>
+          <a href="<?= h(Auth::basePath()) ?>/?view=home"
+             class="nav-link <?= ($view ?? '') === 'home' ? 'active' : '' ?>"
+             aria-label="Home"
+             title="Home">
+            <span class="nav-icon nav-icon--home" aria-hidden="true"></span>
+            <span class="nav-label">Home</span>
+          </a>
+        </li>
+        <li>
+          <a href="<?= h(Auth::basePath()) ?>/?view=reports"
+             class="nav-link <?= ($view ?? '') === 'reports' || ($view ?? '') === 'report' ? 'active' : '' ?>"
+             aria-label="Reports"
+             title="Reports">
+            <span class="nav-icon nav-icon--reports" aria-hidden="true"></span>
+            <span class="nav-label">Reports</span>
+          </a>
+        </li>
       </ul>
       <div class="nav-user">
-        <span><?= h(Auth::user()['username'] ?? '') ?></span>
+        <span class="nav-user-name" title="<?= h(Auth::user()['username'] ?? '') ?>">
-        <a href="<?= h(Auth::basePath()) ?>/logout">Logout</a>
+          <span class="nav-icon nav-icon--user" aria-hidden="true"></span>
+          <span class="nav-label"><?= h(Auth::user()['username'] ?? '') ?></span>
+        </span>
+        <a href="<?= h(Auth::basePath()) ?>/logout"
+           class="nav-link nav-link--logout"
+           aria-label="Logout"
+           title="Logout">
+          <span class="nav-icon nav-icon--logout" aria-hidden="true"></span>
+          <span class="nav-label">Logout</span>
+        </a>
       </div>
     </nav>
     <main class="main-pane">