feat: introduce desktop sidebar layout ahead of the v1.1.0 release (#7)

Add a responsive desktop (md+) Sidebar with collapsible navigation, Lucide outline icons, animated active indicators, and persistent collapse state. Integrate Sidebar into App while preserving the existing TopNav-driven mobile layout. Hide the Home link when already on the home route. Update frontend and monorepo versions to v1.1.0, add lucide-react dependency, refresh README release highlights, and regenerate lockfiles.

Author: diptodeepb

README.md

@@ -34,7 +34,7 @@ PermLens helps developers and reviewers understand what data a GitHub App *decla
   - [Vercel backend API deployment](#vercel-backend-api-deployment)
   - [Vercel frontend deployment](#vercel-frontend-deployment)
 - [🟢 Project status](#-project-status)
-- [✨ Release highlights (v1.0.0)](#-release-highlights-v100)
+- [✨ Release highlights (v1.1.0)](#-release-highlights-v110)
 - [🔐 Security and privacy](#-security-and-privacy)
 - [🏷️ Branding](#️-branding)
 - [⚖️ License](#️-license)
@@ -244,17 +244,17 @@ Frontend:
 
 ## 🟢 Project status
 
-PermLens is in stable release **v1.0.0**.
+PermLens is in stable release **v1.1.0**.
 
 The API response schema is stable, and deployments are ready for production use. Future releases will extend capabilities while preserving the v1 contract.
 
 
-## ✨ Release highlights (v1.0.0)
+## ✨ Release highlights (v1.1.0)
 
-- Stable v1 schema with full app identity fields for audits and tooling
-- Response envelope now surfaces cache hits and rate-limit status explicitly
-- Predictable fallback + error signaling when a slug cannot be resolved
-- Vercel-ready deployment split for backend API and frontend with env guidance
+- Desktop sidebar layout with collapsible navigation and icon cues
+- Mobile layout focuses on the top nav for legal routes
+- Home link now hides when already on the home page
+- Added Lucide icon dependency for navigation visuals
 
 
 ## 🔐 Security and privacy

backend/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "permlens-frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Web interface for inspecting GitHub App permissions and visualizing privacy labels generated by PermLens",
   "type": "module",
   "scripts": {
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.568.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^6.30.1"

frontend/package-lock.json

@@ -1,13 +1,14 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import TopNav from "./components/TopNav";
+import Sidebar from "./layouts/Sidebar";
 import Home from "./pages/Home";
 import TermsOfService from "./pages/TermsOfService";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 
 function App() {
   return (
     <BrowserRouter>
-      <main className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
+      <div className="md:hidden min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
         <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
           <TopNav />
           <Routes>
@@ -16,7 +17,15 @@ function App() {
             <Route path="/privacy" element={<PrivacyPolicy />} />
           </Routes>
         </div>
-      </main>
+      </div>
+
+      <Sidebar>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/tos" element={<TermsOfService />} />
+          <Route path="/privacy" element={<PrivacyPolicy />} />
+        </Routes>
+      </Sidebar>
     </BrowserRouter>
   );
 }

frontend/package.json

@@ -1,9 +1,12 @@
 import { useState } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 
 function TopNav() {
   const [menuOpen, setMenuOpen] = useState(false);
 
+  const location = useLocation();
+  const isHome = location.pathname === "/";
+
   const closeMenu = () => setMenuOpen(false);
 
   return (
@@ -33,23 +36,27 @@ function TopNav() {
             </svg>
           </button>
 
-          <Link
-            to="/"
-            onClick={closeMenu}
-            className="hidden text-sm font-semibold uppercase tracking-wide text-gray-200 hover:text-white md:inline"
-          >
-            Home
-          </Link>
+          {!isHome && (
+            <Link
+              to="/"
+              onClick={closeMenu}
+              className="hidden text-sm font-semibold uppercase tracking-wide text-gray-200 hover:text-white md:inline"
+            >
+              Home
+            </Link>
+          )}
         </div>
 
         <div className="flex items-center gap-3">
-          <Link
-            to="/"
-            onClick={closeMenu}
-            className="text-sm font-semibold uppercase tracking-wide text-gray-200 hover:text-white md:hidden"
-          >
-            Home
-          </Link>
+          {!isHome && (
+            <Link
+              to="/"
+              onClick={closeMenu}
+              className="text-sm font-semibold uppercase tracking-wide text-gray-200 hover:text-white md:hidden"
+            >
+              Home
+            </Link>
+          )}
           <div className="hidden items-center gap-3 text-sm font-semibold uppercase tracking-wide text-gray-300 md:flex">
             <NavLink
               to="/tos"
@@ -103,17 +110,19 @@ function TopNav() {
           </button>
         </div>
         <div className="flex flex-col gap-2">
-          <NavLink
-            to="/"
-            onClick={closeMenu}
-            className={({ isActive }) =>
-              `rounded px-3 py-2 hover:text-white ${
-                isActive ? "bg-white/10 text-white" : ""
-              }`
-            }
-          >
-            Home
-          </NavLink>
+          {!isHome && (
+            <NavLink
+              to="/"
+              onClick={closeMenu}
+              className={({ isActive }) =>
+                `rounded px-3 py-2 hover:text-white ${
+                  isActive ? "bg-white/10 text-white" : ""
+                }`
+              }
+            >
+              Home
+            </NavLink>
+          )}
           <NavLink
             to="/tos"
             onClick={closeMenu}