web: add left sidebar navigation to dashboard layout

- Introduce Sidebar component with Overview/Threats/Alerts/Containers links
- Update App layout to include sidebar + main dashboard content
- Add section anchors in Dashboard for sidebar navigation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: vsilent

web/src/App.css

@@ -0,0 +1,8 @@
+.app-layout {
+  display: flex;
+  align-items: flex-start;
+}
+
+.app-layout .dashboard {
+  flex: 1;
+}

web/src/App.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import Dashboard from './components/Dashboard';
+import Sidebar from './components/Sidebar';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './App.css';
 
 const App: React.FC = () => {
   return (
-    <div className="App">
+    <div className="App app-layout">
+      <Sidebar />
       <Dashboard />
     </div>
   );

web/src/components/Dashboard.tsx

@@ -9,6 +9,8 @@ import ContainerList from './ContainerList';
 import ThreatMap from './ThreatMap';
 import './Dashboard.css';
 
+const DASHBOARD_LOGO_URL = 'https://github.com/user-attachments/assets/0c8a9216-8315-4ef7-9b73-d96c40521ed1';
+
 const Dashboard: React.FC = () => {
   const [securityStatus, setSecurityStatus] = useState<SecurityStatus | null>(null);
   const [loading, setLoading] = useState(true);
@@ -79,15 +81,24 @@ const Dashboard: React.FC = () => {
     <Container fluid className="dashboard">
       <Row className="mb-4">
         <Col>
-          <h1 className="dashboard-title">🐕 Stackdog Security Dashboard</h1>
+          <h1 className="dashboard-title">
+            <img
+              src={DASHBOARD_LOGO_URL}
+              alt="Stackdog logo"
+              className="dashboard-logo"
+              width={30}
+              height={30}
+            />
+            Stackdog Security Dashboard
+          </h1>
           <p className="dashboard-subtitle">
             Real-time security monitoring for containers and Linux servers
           </p>
         </Col>
       </Row>
 
       {/* Security Score Card */}
-      <Row className="mb-4">
+      <Row id="overview" className="mb-4">
         <Col md={6} lg={3}>
           <SecurityScore score={securityStatus?.overallScore || 0} />
         </Col>
@@ -124,18 +135,18 @@ const Dashboard: React.FC = () => {
       </Row>
 
       {/* Threat Map */}
-      <Row className="mb-4">
+      <Row id="threats" className="mb-4">
         <Col>
           <ThreatMap />
         </Col>
       </Row>
 
       {/* Alerts and Containers */}
       <Row>
-        <Col lg={8}>
+        <Col id="alerts" lg={8}>
           <AlertPanel />
         </Col>
-        <Col lg={4}>
+        <Col id="containers" lg={4}>
           <ContainerList />
         </Col>
       </Row>

web/src/components/Sidebar.css

@@ -0,0 +1,39 @@
+.sidebar {
+  width: 220px;
+  min-height: 100vh;
+  background: #1f2937;
+  color: #f9fafb;
+  padding: 20px 16px;
+  position: sticky;
+  top: 0;
+}
+
+.sidebar-brand {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sidebar-nav a {
+  color: #d1d5db;
+  text-decoration: none;
+  padding: 8px 10px;
+  border-radius: 6px;
+}
+
+.sidebar-nav a:hover {
+  background: #374151;
+  color: #fff;
+}
+
+@media (max-width: 992px) {
+  .sidebar {
+    display: none;
+  }
+}

web/src/components/Sidebar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './Sidebar.css';
+
+const Sidebar: React.FC = () => {
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-brand">Stackdog</div>
+      <nav className="sidebar-nav">
+        <a href="#overview">Overview</a>
+        <a href="#threats">Threat Map</a>
+        <a href="#alerts">Alerts</a>
+        <a href="#containers">Containers</a>
+      </nav>
+    </aside>
+  );
+};
+
+export default Sidebar;