Index: lan-frontend/src/components/SideMenu.jsx
===================================================================
--- lan-frontend/src/components/SideMenu.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
+++ lan-frontend/src/components/SideMenu.jsx	(revision a762898ecd37a452c782821d4c2c4955c6ed2521)
@@ -0,0 +1,101 @@
+import React, {useEffect, useRef, useState} from "react";
+
+function Item({active, icon, label, onClick, collapsed}) {
+    return (
+        <button
+            onClick={onClick}
+            className={`side-item ${active ? "active" : ""}`}
+            title={label}
+            type="button"
+        >
+            <span className="side-icon">{icon}</span>
+            {!collapsed && <span className="side-label">{label}</span>}
+        </button>
+    );
+}
+
+export default function SideMenu({activeView, setActiveView}) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+
+    // close on click outside (ако е open преку click)
+    useEffect(() => {
+        function onDocClick(e) {
+            if (!open) return;
+            if (!rootRef.current) return;
+            if (!rootRef.current.contains(e.target)) setOpen(false);
+        }
+
+        document.addEventListener("mousedown", onDocClick);
+        return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    const collapsed = !open;
+
+    return (
+        <aside
+            ref={rootRef}
+            className={`side ${open ? "open" : "collapsed"}`}
+            onMouseEnter={() => setOpen(true)}   // hover open
+            onMouseLeave={() => setOpen(false)}  // hover close
+        >
+            {/* мал “handle” што се гледа секогаш */}
+            <button
+                className="side-handle"
+                type="button"
+                onClick={() => setOpen((v) => !v)}  // click toggle (ако не сакаш click, избриши ова)
+                aria-label="Toggle menu"
+                title="Menu"
+            >
+                {open ? "◀" : "▶"}
+            </button>
+
+            <div className="side-inner">
+                <div className="side-brand">
+                    <div className="side-brand-dot"/>
+                    {!collapsed && (
+                        <div className="side-brand-text">
+                            <div className="side-brand-title">netIntel</div>
+                            <div className="side-brand-sub">tenant dashboard</div>
+                        </div>
+                    )}
+                </div>
+
+
+                <div className="side-section">
+                    {/*<div className="side-section-title">MAIN</div>*/}
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "dashboard"}
+                        icon="🖥️"
+                        label="Dashboard"
+                        onClick={() => setActiveView("dashboard")}
+                    />
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "visualizations"}
+                        icon="📈"
+                        label="Visualizations"
+                        onClick={() => setActiveView("visualizations")}
+                    />
+
+                    <Item
+                        collapsed={collapsed}
+                        active={activeView === "account"}
+                        icon="👤"
+                        label="Account"
+                        onClick={() => setActiveView("account")}
+                    />
+                </div>
+
+                {!collapsed && (
+                    <div className="side-footer">
+                        <div className="side-footer-hint">Tip: користи Visualizations за графови</div>
+                    </div>
+                )}
+            </div>
+        </aside>
+    );
+}