Removed top bar, and updating sidebar

src/components/CvmisLogo.tsx

@@ -10,7 +10,7 @@ interface CvmisLogoProps {
 
 // ── Animation timing constants ──────────────────────────────────────
 // Rise phase: all pills rise together from below
-const RISE_DURATION_MS = 2500           // duration of the upward rise (ms)
+const RISE_DURATION_MS = 1250           // duration of the upward rise (ms)
 const RISE_DURATION_S = RISE_DURATION_MS / 1000
 const RISE_OPACITY_DURATION_S = 0.25   // opacity fade-in during rise (s)
 const RISE_EASING: [number, number, number, number] = [0.33, 1, 0.68, 1]
@@ -18,11 +18,11 @@ const RISE_START_Y = 350               // initial Y offset (viewBox units)
 
 // Fan phase: left and right pills fan outward
 const FAN_DELAY_AFTER_RISE_MS = RISE_DURATION_MS - 100    // delay before fan begins (ms from mount)
-const FAN_DURATION_S = 1            // duration of fan-out (s)
+const FAN_DURATION_S = 2            // duration of fan-out (s)
 const FAN_EASING = 'cubic-bezier(0.34, 1.56, 0.64, 1)'
 const FAN_ROTATION_DEG = 55            // rotation angle for fanned pills (±degrees)
-const FAN_HORIZONTAL_PX = 10           // horizontal offset for fanned pills (±px)
-const FAN_RIGHT_STAGGER_S = 0.0       // stagger delay for right pill (s)
+const FAN_HORIZONTAL_PX = -10           // horizontal offset for fanned pills (±px)
+const FAN_RIGHT_STAGGER_S = 0       // stagger delay for right pill (s)
 
 // Total animation = rise delay + fan duration
 const TOTAL_ANIMATION_MS = FAN_DELAY_AFTER_RISE_MS + FAN_DURATION_S * 1000

src/components/DashboardLayout.tsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { motion } from 'framer-motion'
 import { ChevronRight } from 'lucide-react'
-import { TopBar } from './TopBar'
-import { SubNav } from './SubNav'
 import Sidebar from './Sidebar'
 import { CommandPalette } from './CommandPalette'
 import { DetailPanel } from './DetailPanel'
@@ -23,17 +21,6 @@ import type { PaletteAction } from '@/lib/search'
 
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
-const topbarVariants = {
-  hidden: prefersReducedMotion ? { y: 0, opacity: 1 } : { y: -48, opacity: 0 },
-  visible: {
-    y: 0,
-    opacity: 1,
-    transition: prefersReducedMotion
-      ? { duration: 0 }
-      : { duration: 0.2, ease: 'easeOut' },
-  },
-}
-
 const sidebarVariants = {
   hidden: prefersReducedMotion ? { x: 0, opacity: 1 } : { x: -272, opacity: 0 },
   visible: {
@@ -279,17 +266,19 @@ export function DashboardLayout() {
     return () => observer.disconnect()
   }, [])
 
-  const handleSearchClick = () => {
-    setCommandPaletteOpen(true)
-  }
-
   const handlePaletteClose = useCallback(() => {
     setCommandPaletteOpen(false)
   }, [])
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleSectionClick = useCallback((_sectionId: string) => {
-    // SubNav handles scrolling internally
+  const handleSearchClick = useCallback(() => {
+    setCommandPaletteOpen(true)
+  }, [])
+
+  const scrollToSection = useCallback((tileId: string) => {
+    const tileEl = document.querySelector(`[data-tile-id="${tileId}"]`)
+    if (tileEl) {
+      tileEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
   }, [])
 
   // Constellation graph handlers
@@ -337,10 +326,7 @@ export function DashboardLayout() {
   const handlePaletteAction = useCallback((action: PaletteAction) => {
     switch (action.type) {
       case 'scroll': {
-        const tileEl = document.querySelector(`[data-tile-id="${action.tileId}"]`)
-        if (tileEl) {
-          tileEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
-        }
+        scrollToSection(action.tileId)
         break
       }
       case 'expand': {
@@ -370,48 +356,64 @@ export function DashboardLayout() {
         break
       }
     }
-  }, [openPanel])
+  }, [openPanel, scrollToSection])
 
   return (
     <div
       className="font-ui"
-      style={{ background: 'var(--bg-dashboard)', minHeight: '100vh' }}
+      style={{ background: 'var(--bg-dashboard)', height: '100vh', overflow: 'hidden' }}
     >
-      {/* TopBar — fixed at top */}
-      <motion.div initial="hidden" animate="visible" variants={topbarVariants}>
-        <TopBar onSearchClick={handleSearchClick} />
-      </motion.div>
+      <a
+        href="#main-content"
+        style={{
+          position: 'absolute',
+          top: '-48px',
+          left: 0,
+          background: 'var(--accent)',
+          color: '#FFFFFF',
+          padding: '8px 16px',
+          textDecoration: 'none',
+          zIndex: 120,
+          borderRadius: '0 0 4px 0',
+          fontSize: '14px',
+          fontWeight: 600,
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.top = '0'
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.top = '-48px'
+        }}
+      >
+        Skip to main content
+      </a>
 
-      {/* SubNav — sticky below TopBar */}
-      <SubNav activeSection={activeSection} onSectionClick={handleSectionClick} />
-
-      {/* Layout below TopBar + SubNav: Sidebar + Main */}
       <div
         style={{
           display: 'flex',
-          marginTop: 'calc(var(--topbar-height) + var(--subnav-height))',
-          height: 'calc(100vh - var(--topbar-height) - var(--subnav-height))',
+          height: '100%',
         }}
       >
-        {/* Sidebar — hidden on mobile/tablet, visible on desktop */}
         <motion.div
           initial="hidden"
           animate="visible"
           variants={sidebarVariants}
-          className="hidden lg:block"
           style={{ flexShrink: 0 }}
         >
-          <Sidebar />
+          <Sidebar
+            activeSection={activeSection}
+            onNavigate={scrollToSection}
+            onSearchClick={handleSearchClick}
+          />
         </motion.div>
 
-        {/* Main content — scrollable card grid */}
         <motion.main
           id="main-content"
           initial="hidden"
           animate="visible"
           variants={contentVariants}
           aria-label="Dashboard content"
-          className="pmr-scrollbar p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12"
+          className="dashboard-main pmr-scrollbar p-5 pb-10 md:p-7 md:pb-12 lg:px-8 lg:pt-7 lg:pb-12"
           style={{
             flex: 1,
             overflowY: 'auto',

src/components/Sidebar.tsx

@@ -1,11 +1,47 @@
-import { AlertTriangle, AlertCircle } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import {
+  AlertCircle,
+  AlertTriangle,
+  GraduationCap,
+  type LucideIcon,
+  Menu,
+  Pill,
+  Search,
+  UserRound,
+  Workflow,
+  Wrench,
+  X,
+} from 'lucide-react'
+import cvmisLogo from '../../cvmis-logo.svg'
 import { patient } from '@/data/patient'
 import { tags } from '@/data/tags'
 import { alerts } from '@/data/alerts'
 import type { Tag, Alert } from '@/types/pmr'
 
+interface SidebarProps {
+  activeSection: string
+  onNavigate: (tileId: string) => void
+  onSearchClick: () => void
+}
+
+interface NavSection {
+  id: string
+  label: string
+  tileId: string
+  Icon: LucideIcon
+}
+
+const navSections: NavSection[] = [
+  { id: 'overview', label: 'Overview', tileId: 'patient-summary', Icon: UserRound },
+  { id: 'projects', label: 'Projects', tileId: 'projects', Icon: Pill },
+  { id: 'experience', label: 'Experience', tileId: 'section-experience', Icon: Workflow },
+  { id: 'education', label: 'Education', tileId: 'section-education', Icon: GraduationCap },
+  { id: 'skills', label: 'Skills', tileId: 'section-skills', Icon: Wrench },
+]
+
 interface SectionTitleProps {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 function SectionTitle({ children }: SectionTitleProps) {
@@ -40,7 +76,7 @@ interface TagPillProps {
 }
 
 function TagPill({ tag }: TagPillProps) {
-  const styles: Record<Tag['colorVariant'], React.CSSProperties> = {
+  const styles: Record<Tag['colorVariant'], CSSProperties> = {
     teal: {
       background: 'var(--accent-light)',
       color: 'var(--accent)',
@@ -82,7 +118,7 @@ interface AlertFlagProps {
 function AlertFlag({ alert }: AlertFlagProps) {
   const Icon = alert.icon === 'AlertTriangle' ? AlertTriangle : AlertCircle
 
-  const styles: Record<Alert['severity'], React.CSSProperties> = {
+  const styles: Record<Alert['severity'], CSSProperties> = {
     alert: {
       background: 'var(--alert-light)',
       color: 'var(--alert)',
@@ -126,308 +162,419 @@ function AlertFlag({ alert }: AlertFlagProps) {
   )
 }
 
-export default function Sidebar() {
+export default function Sidebar({ activeSection, onNavigate, onSearchClick }: SidebarProps) {
+  const [isDesktop, setIsDesktop] = useState(() => window.matchMedia('(min-width: 1024px)').matches)
+  const [isMobileExpanded, setIsMobileExpanded] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 1024px)')
+    const updateDesktopState = (event: MediaQueryListEvent | MediaQueryList) => {
+      const desktopMode = event.matches
+      setIsDesktop(desktopMode)
+      if (desktopMode) {
+        setIsMobileExpanded(false)
+      }
+    }
+
+    updateDesktopState(mediaQuery)
+
+    const listener = (event: MediaQueryListEvent) => updateDesktopState(event)
+    mediaQuery.addEventListener('change', listener)
+
+    return () => mediaQuery.removeEventListener('change', listener)
+  }, [])
+
+  const isExpanded = isDesktop || isMobileExpanded
+
+  const handleNavActivate = (tileId: string) => {
+    onNavigate(tileId)
+    if (!isDesktop) {
+      setIsMobileExpanded(false)
+    }
+  }
+
   return (
-    <aside
-      style={{
-        width: 'var(--sidebar-width)',
-        minWidth: 'var(--sidebar-width)',
-        background: 'var(--sidebar-bg)',
-        borderRight: '1px solid var(--border)',
-        overflowY: 'auto',
-        padding: '24px 20px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '2px',
-      }}
-      className="pmr-scrollbar"
-    >
-      {/* PersonHeader Section */}
-      <div
+    <>
+      {!isDesktop && isMobileExpanded && (
+        <button
+          type="button"
+          aria-label="Close sidebar navigation"
+          onClick={() => setIsMobileExpanded(false)}
+          style={{
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(26,43,42,0.28)',
+            border: 'none',
+            zIndex: 108,
+            cursor: 'pointer',
+          }}
+        />
+      )}
+
+      <aside
+        id="sidebar-panel"
+        aria-label="Sidebar"
         style={{
-          borderBottom: '2px solid var(--accent)',
-          paddingBottom: '16px',
-          marginBottom: '10px',
+          position: isDesktop ? 'relative' : 'fixed',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: isExpanded ? 'var(--sidebar-width)' : 'var(--sidebar-rail-width)',
+          minWidth: isExpanded ? 'var(--sidebar-width)' : 'var(--sidebar-rail-width)',
+          background: 'var(--sidebar-bg)',
+          borderRight: '1px solid var(--border)',
+          overflowY: isExpanded ? 'auto' : 'hidden',
+          overflowX: 'hidden',
+          padding: isExpanded ? '6px 16px' : '12px 8px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '10px',
+          transition: 'width 180ms ease-out, min-width 180ms ease-out, padding 180ms ease-out',
+          zIndex: isDesktop ? 'auto' : 110,
         }}
+        className={isExpanded ? 'pmr-scrollbar' : undefined}
       >
-        {/* Avatar */}
-        <div
-          style={{
-            width: '60px',
-            height: '60px',
-            borderRadius: '50%',
-            background: 'linear-gradient(135deg, var(--accent), #0A8080)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: '#FFFFFF',
-            fontSize: '20px',
-            fontWeight: 700,
-            boxShadow: '0 2px 8px rgba(13,110,110,0.25)',
-            marginBottom: '12px',
-          }}
-        >
-          AC
-        </div>
-
-        {/* Name */}
-        <div
-          style={{
-            fontSize: '17px',
-            fontWeight: 700,
-            color: 'var(--text-primary)',
-            letterSpacing: '-0.01em',
-          }}
-        >
-          CHARLWOOD, Andrew
-        </div>
-
-        {/* Title */}
-        <div
-          style={{
-            fontSize: '13px',
-            fontFamily: 'Geist Mono, monospace',
-            fontWeight: 400,
-            color: 'var(--text-secondary)',
-            marginTop: '2px',
-          }}
-        >
-          Pharmacy Data Technologist
-        </div>
-
-        {/* Status badge */}
-        <div
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '5px',
-            marginTop: '8px',
-            fontSize: '12px',
-            fontWeight: 500,
-            color: 'var(--success)',
-            background: 'var(--success-light)',
-            border: '1px solid var(--success-border)',
-            padding: '3px 9px',
-            borderRadius: '20px',
-          }}
-        >
-          <span
+        {!isDesktop && (
+          <button
+            type="button"
+            aria-label={isExpanded ? 'Collapse sidebar navigation' : 'Expand sidebar navigation'}
+            aria-expanded={isExpanded}
+            aria-controls="sidebar-panel"
+            onClick={() => setIsMobileExpanded((prev) => !prev)}
+            className="sidebar-control"
             style={{
-              width: '7px',
-              height: '7px',
-              borderRadius: '50%',
-              background: 'var(--success)',
-              animation: 'pulse 2s infinite',
-            }}
-            aria-hidden="true"
-          />
-          <span>{patient.badge}</span>
-        </div>
-
-        {/* Details grid */}
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr',
-            gap: '8px',
-            marginTop: '12px',
-          }}
-        >
-          {/* GPhC No. */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
+              width: '100%',
+              minHeight: '44px',
+              display: 'inline-flex',
               alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
+              justifyContent: isExpanded ? 'space-between' : 'center',
+              gap: '8px',
+              border: '1px solid var(--border-light)',
+              background: 'var(--surface)',
+              borderRadius: 'var(--radius-sm)',
+              color: 'var(--text-primary)',
+              padding: isExpanded ? '0 12px' : '0',
+              cursor: 'pointer',
             }}
           >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              GPhC No.
-            </span>
-            <span
+            {isExpanded && <span style={{ fontSize: '12px', fontWeight: 600 }}>Menu</span>}
+            {isExpanded ? <X size={17} strokeWidth={2.4} /> : <Menu size={18} strokeWidth={2.4} />}
+          </button>
+        )}
+
+        {isExpanded && (
+          <section style={{ borderBottom: '2px solid var(--accent)', paddingBottom: '16px' }}>
+            <div
               style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                gap: '6px',
+                marginBottom: '4px',
+                width: '100%',
+              }}
+            >
+              <img
+                src={cvmisLogo}
+                alt="CVMIS"
+                style={{
+                  width: '140px',
+                  height: 'auto',
+                  display: 'block',
+                }}
+              />
+              <div
+                style={{
+                  flex: 1,
+                  fontSize: '11px',
+                  color: 'var(--text-tertiary)',
+                  letterSpacing: '0.04em',
+                  lineHeight: 1.1,
+                  textAlign: 'center',
+                }}
+              >
+                CVMIS v1.0
+              </div>
+            </div>
+
+            <button
+              type="button"
+              onClick={onSearchClick}
+              className="sidebar-control"
+              aria-label="Search. Press Control plus K"
+              style={{
+                width: '100%',
+                minHeight: '44px',
+                border: '1px solid var(--border)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'var(--surface)',
+                color: 'var(--text-secondary)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                padding: '0 10px',
+                cursor: 'pointer',
+                marginBottom: '8px',
+              }}
+            >
+              <Search size={16} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} aria-hidden="true" />
+              <span style={{ flex: 1, textAlign: 'left', fontSize: '13px' }}>
+                Search
+              </span>
+              <kbd
+                style={{
+                  fontSize: '11px',
+                  color: 'var(--text-tertiary)',
+                  background: 'var(--bg-dashboard)',
+                  border: '1px solid var(--border)',
+                  padding: '2px 6px',
+                  borderRadius: '4px',
+                  lineHeight: 1,
+                }}
+              >
+                Ctrl+K
+              </kbd>
+            </button>
+
+            <SectionTitle>Patient Data</SectionTitle>
+
+            <div
+              style={{
+                width: '60px',
+                height: '60px',
+                borderRadius: '50%',
+                background: 'linear-gradient(135deg, var(--accent), #0A8080)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#FFFFFF',
+                fontSize: '20px',
+                fontWeight: 700,
+                boxShadow: '0 2px 8px rgba(13,110,110,0.25)',
+                marginBottom: '12px',
+              }}
+            >
+              AC
+            </div>
+
+            <div
+              style={{
+                fontSize: '17px',
+                fontWeight: 700,
                 color: 'var(--text-primary)',
-                fontWeight: 500,
+                letterSpacing: '-0.01em',
+              }}
+            >
+              CHARLWOOD, Andrew
+            </div>
+
+            <div
+              style={{
+                fontSize: '13px',
                 fontFamily: 'Geist Mono, monospace',
-                fontSize: '12px',
-                letterSpacing: '0.12em',
+                fontWeight: 400,
+                color: 'var(--text-secondary)',
+                marginTop: '2px',
               }}
             >
-              {patient.nhsNumber.replace(/\s/g, '')}
-            </span>
-          </div>
+              Pharmacy Data Technologist
+            </div>
 
-          {/* Education */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
-            }}
-          >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              Education
-            </span>
-            <span
+            <div
               style={{
-                color: 'var(--text-primary)',
-                fontWeight: 500,
-                textAlign: 'right',
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gap: '8px',
+                marginTop: '12px',
               }}
             >
-              {patient.qualification}
-            </span>
-          </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>GPhC No.</span>
+                <span
+                  style={{
+                    color: 'var(--text-primary)',
+                    fontWeight: 500,
+                    fontFamily: 'Geist Mono, monospace',
+                    fontSize: '12px',
+                    letterSpacing: '0.12em',
+                  }}
+                >
+                  {patient.nhsNumber.replace(/\s/g, '')}
+                </span>
+              </div>
 
-          {/* Location */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
-            }}
-          >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              Location
-            </span>
-            <span
-              style={{
-                color: 'var(--text-primary)',
-                fontWeight: 500,
-                textAlign: 'right',
-              }}
-            >
-              {patient.address}
-            </span>
-          </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Education</span>
+                <span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
+                  {patient.qualification}
+                </span>
+              </div>
 
-          {/* Phone */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
-            }}
-          >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              Phone
-            </span>
-            <a
-              href={`tel:${patient.phone}`}
-              style={{
-                color: 'var(--accent)',
-                fontWeight: 500,
-                textDecoration: 'none',
-                textAlign: 'right',
-              }}
-              onMouseEnter={(e) =>
-                (e.currentTarget.style.textDecoration = 'underline')
-              }
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.textDecoration = 'none')
-              }
-            >
-              {patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
-            </a>
-          </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Location</span>
+                <span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
+                  {patient.address}
+                </span>
+              </div>
 
-          {/* Email */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
-            }}
-          >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              Email
-            </span>
-            <a
-              href={`mailto:${patient.email}`}
-              style={{
-                color: 'var(--accent)',
-                fontWeight: 500,
-                textDecoration: 'none',
-                textAlign: 'right',
-              }}
-              onMouseEnter={(e) =>
-                (e.currentTarget.style.textDecoration = 'underline')
-              }
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.textDecoration = 'none')
-              }
-            >
-              {patient.email}
-            </a>
-          </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Phone</span>
+                <a
+                  href={`tel:${patient.phone}`}
+                  style={{
+                    color: 'var(--accent)',
+                    fontWeight: 500,
+                    textDecoration: 'none',
+                    textAlign: 'right',
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
+                  onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
+                >
+                  {patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
+                </a>
+              </div>
 
-          {/* Registered */}
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              fontSize: '13px',
-              padding: '4px 0',
-            }}
-          >
-            <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
-              Registered
-            </span>
-            <span
-              style={{
-                color: 'var(--text-primary)',
-                fontWeight: 500,
-                textAlign: 'right',
-              }}
-            >
-              {patient.registrationYear}
-            </span>
-          </div>
-        </div>
-      </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Email</span>
+                <a
+                  href={`mailto:${patient.email}`}
+                  style={{
+                    color: 'var(--accent)',
+                    fontWeight: 500,
+                    textDecoration: 'none',
+                    textAlign: 'right',
+                  }}
+                  onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
+                  onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
+                >
+                  {patient.email}
+                </a>
+              </div>
 
-      {/* Tags Section */}
-      <div style={{ padding: '16px 0 8px' }}>
-        <SectionTitle>Tags</SectionTitle>
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '5px',
-          }}
-        >
-          {tags.map((tag) => (
-            <TagPill key={tag.label} tag={tag} />
-          ))}
-        </div>
-      </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  fontSize: '13px',
+                  padding: '4px 0',
+                }}
+              >
+                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>Registered</span>
+                <span style={{ color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
+                  {patient.registrationYear}
+                </span>
+              </div>
+            </div>
+          </section>
+        )}
 
-      {/* Alerts / Highlights Section */}
-      <div style={{ padding: '16px 0 8px' }}>
-        <SectionTitle>Alerts / Highlights</SectionTitle>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '6px',
-          }}
-        >
-          {alerts.map((alert, index) => (
-            <AlertFlag key={index} alert={alert} />
-          ))}
-        </div>
-      </div>
-    </aside>
+        <section>
+          {isExpanded && <SectionTitle>Navigation</SectionTitle>}
+          <nav aria-label="Sidebar navigation" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+            {navSections.map((section) => {
+              const isActive = activeSection === section.id
+              const Icon = section.Icon
+
+              return (
+                <button
+                  key={section.id}
+                  type="button"
+                  onClick={() => handleNavActivate(section.tileId)}
+                  aria-current={isActive ? 'page' : undefined}
+                  aria-label={!isExpanded ? section.label : undefined}
+                  className="sidebar-control"
+                  style={{
+                    minHeight: '44px',
+                    border: '1px solid',
+                    borderColor: isActive ? 'var(--accent-border)' : 'transparent',
+                    background: isActive ? 'var(--accent-light)' : 'transparent',
+                    color: isActive ? 'var(--accent)' : 'var(--text-secondary)',
+                    borderRadius: 'var(--radius-sm)',
+                    width: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: isExpanded ? 'flex-start' : 'center',
+                    gap: '10px',
+                    padding: isExpanded ? '0 10px' : '0',
+                    cursor: 'pointer',
+                    transition: 'background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out',
+                  }}
+                >
+                  <Icon size={17} strokeWidth={2.2} />
+                  {isExpanded && (
+                    <span style={{ fontSize: '14px', fontWeight: 600 }}>
+                      {section.label}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
+          </nav>
+        </section>
+
+        {isExpanded && (
+          <>
+            <section style={{ paddingTop: '8px' }}>
+              <SectionTitle>Tags</SectionTitle>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
+                {tags.map((tag) => (
+                  <TagPill key={tag.label} tag={tag} />
+                ))}
+              </div>
+            </section>
+
+            <section style={{ padding: '8px 0 4px' }}>
+              <SectionTitle>Alerts / Highlights</SectionTitle>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                {alerts.map((alert, index) => (
+                  <AlertFlag key={index} alert={alert} />
+                ))}
+              </div>
+            </section>
+          </>
+        )}
+      </aside>
+    </>
   )
 }