From 883e4b565dabfb91ba4cb07f1fdd5c39486fac31 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:01:40 +0100
Subject: [PATCH] fix: add page navigation to Sidebar + wire in camel SVG logo

- Add Navigation section (Dashboard, Metrics, Agents) with useNavigate
- Route items now navigate to /routes/:id
- Active state highlights current page based on location.pathname
- Replace inline CamelIcon with actual camel-logo.svg asset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../layout/Sidebar/Sidebar.module.css         | 19 +++++
 src/design-system/layout/Sidebar/Sidebar.tsx  | 76 +++++++++++--------
 2 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/src/design-system/layout/Sidebar/Sidebar.module.css b/src/design-system/layout/Sidebar/Sidebar.module.css
index 045fae7..6cede03 100644
--- a/src/design-system/layout/Sidebar/Sidebar.module.css
+++ b/src/design-system/layout/Sidebar/Sidebar.module.css
@@ -17,6 +17,13 @@
   flex-shrink: 0;
 }
 
+.logoImg {
+  width: 28px;
+  height: 24px;
+  color: var(--amber-light);
+  filter: brightness(0) saturate(100%) invert(76%) sepia(30%) saturate(400%) hue-rotate(5deg) brightness(95%);
+}
+
 .brand {
   font-family: var(--font-mono);
   font-weight: 600;
@@ -132,6 +139,18 @@
   padding-left: 22px;
 }
 
+.navIcon {
+  font-size: 14px;
+  width: 18px;
+  text-align: center;
+  color: var(--sidebar-muted);
+  flex-shrink: 0;
+}
+
+.item.active .navIcon {
+  color: var(--amber-light);
+}
+
 .routeArrow {
   color: var(--sidebar-muted);
   font-size: 10px;
diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index d974280..fa1b2b5 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -1,5 +1,7 @@
 import { useState } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
 import styles from './Sidebar.module.css'
+import camelLogoUrl from '../../../assets/camel-logo.svg'
 
 export interface App {
   id: string
@@ -49,34 +51,19 @@ function HealthDot({ status }: { status: 'live' | 'stale' | 'dead' }) {
   )
 }
 
-// Camel SVG silhouette
-function CamelIcon() {
-  return (
-    <svg
-      width="28"
-      height="24"
-      viewBox="0 0 28 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      {/* Simple camel silhouette */}
-      <path
-        d="M4 20 L4 16 L6 14 L6 12 C6 10 7 9 9 9 L10 8 C10 6 11 5 12 5 C12 3 13 2 14 2 C15 2 15.5 3 15 5 C16 5 17 6 17 8 L18 9 C20 9 21 10 21 12 L21 14 L22 14 L22 12 C22 10 23 9 24 9 L24 20"
-        fill="var(--amber-light)"
-        stroke="var(--amber)"
-        strokeWidth="0.5"
-      />
-      <path
-        d="M4 20 L24 20"
-        stroke="var(--amber)"
-        strokeWidth="1"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
+interface NavItem {
+  id: string
+  label: string
+  path: string
+  icon: string
 }
 
+const NAV_ITEMS: NavItem[] = [
+  { id: 'dashboard', label: 'Dashboard', path: '/', icon: '▦' },
+  { id: 'metrics', label: 'Metrics', path: '/metrics', icon: '◔' },
+  { id: 'agents', label: 'Agents', path: '/agents', icon: '⬡' },
+]
+
 export function Sidebar({
   apps,
   routes,
@@ -85,6 +72,8 @@ export function Sidebar({
   onItemClick,
 }: SidebarProps) {
   const [search, setSearch] = useState('')
+  const navigate = useNavigate()
+  const location = useLocation()
 
   const liveCount = agents.filter((a) => a.status === 'live').length
   const agentBadge = `${liveCount}/${agents.length} live`
@@ -96,8 +85,8 @@ export function Sidebar({
   return (
     <aside className={styles.sidebar}>
       {/* Logo */}
-      <div className={styles.logo}>
-        <CamelIcon />
+      <div className={styles.logo} onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
+        <img src={camelLogoUrl} alt="" aria-hidden="true" className={styles.logoImg} />
         <div>
           <span className={styles.brand}>cameleer</span>
           <span className={styles.version}>v3.2.1</span>
@@ -125,6 +114,31 @@ export function Sidebar({
 
       {/* Scrollable nav area */}
       <div className={styles.navArea}>
+        {/* Top-level navigation */}
+        <div className={styles.section}>Navigation</div>
+        <div className={styles.items}>
+          {NAV_ITEMS.map((nav) => (
+            <div
+              key={nav.id}
+              className={[
+                styles.item,
+                location.pathname === nav.path ? styles.active : '',
+              ].filter(Boolean).join(' ')}
+              onClick={() => navigate(nav.path)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate(nav.path) }}
+            >
+              <span className={styles.navIcon}>{nav.icon}</span>
+              <div className={styles.itemInfo}>
+                <div className={styles.itemName}>{nav.label}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className={styles.divider} />
+
         {/* Applications section */}
         <div className={styles.section}>Applications</div>
         <div className={styles.items}>
@@ -166,15 +180,15 @@ export function Sidebar({
               className={[
                 styles.item,
                 styles.indented,
-                activeItem === route.id ? styles.active : '',
+                activeItem === route.id || location.pathname === `/routes/${route.id}` ? styles.active : '',
               ]
                 .filter(Boolean)
                 .join(' ')}
-              onClick={() => onItemClick?.(route.id)}
+              onClick={() => { onItemClick?.(route.id); navigate(`/routes/${route.id}`) }}
               role="button"
               tabIndex={0}
               onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') onItemClick?.(route.id)
+                if (e.key === 'Enter' || e.key === ' ') { onItemClick?.(route.id); navigate(`/routes/${route.id}`) }
               }}
             >
               <span className={styles.routeArrow}>&#9656;</span>