Group sidebar nav by purpose

Replaces the flat 16-item list with six sections (Overview, Operations,
Vendors, Customers & Sites, Internal, System) and adds section titles
that collapse into dividers when the sidebar is collapsed.

src/components/Sidebar.js

@@ -19,29 +19,58 @@ import {
   FaFileInvoiceDollar,
 } from "react-icons/fa";
 
-const navItems = [
+const navGroups = [
-  { label: "Dashboard", icon: <FaTachometerAlt />, path: "/" },
+  {
-  { label: "Calendar", icon: <FaCalendarAlt />, path: "/calendar" },
+    title: "Overview",
-  { label: "Documents", icon: <FaFileAlt />, path: "/documents" },
+    items: [
-  { label: "Employees", icon: <FaUserTie />, path: "/employees" },
+      { label: "Dashboard", icon: <FaTachometerAlt />, path: "/" },
-  { label: "Accounts", icon: <FaMoneyCheckAlt />, path: "/accounts" },
+      { label: "Calendar", icon: <FaCalendarAlt />, path: "/calendar" },
-  { label: "Contacts", icon: <FaAddressBook />, path: "/contacts" },
+      { label: "Reports", icon: <FaChartBar />, path: "/reports" },
-  { label: "Reports", icon: <FaChartBar />, path: "/reports" },
+    ],
-  { label: "Work Orders", icon: <FaTools />, path: "/workorders" },
+  },
-  { label: "Vendors", icon: <FaTruck />, path: "/vendors" },
+  {
-  { label: "Vendor POs", icon: <FaFileInvoiceDollar />, path: "/vendor-pos" },
+    title: "Operations",
-  { label: "Uplifts", icon: <FaDollarSign />, path: "/uplifts" },
+    items: [
-  { label: "Follow Ups", icon: <FaBell />, path: "/followups" },
+      { label: "Work Orders", icon: <FaTools />, path: "/workorders" },
-  { label: "PM Schedules", icon: <FaClipboardList />, path: "/pmschedules" },
+      { label: "Uplifts", icon: <FaDollarSign />, path: "/uplifts" },
-  { label: "Assets", icon: <FaCubes />, path: "/assets" },
+      { label: "Follow Ups", icon: <FaBell />, path: "/followups" },
-  { label: "Locations", icon: <FaMapMarkerAlt />, path: "/locations" },
+      { label: "PM Schedules", icon: <FaClipboardList />, path: "/pmschedules" },
-  { label: "Settings", icon: <FaCog />, path: "/settings/dropdowns" },
+    ],
+  },
+  {
+    title: "Vendors",
+    items: [
+      { label: "Vendors", icon: <FaTruck />, path: "/vendors" },
+      { label: "Vendor POs", icon: <FaFileInvoiceDollar />, path: "/vendor-pos" },
+    ],
+  },
+  {
+    title: "Customers & Sites",
+    items: [
+      { label: "Accounts", icon: <FaMoneyCheckAlt />, path: "/accounts" },
+      { label: "Contacts", icon: <FaAddressBook />, path: "/contacts" },
+      { label: "Locations", icon: <FaMapMarkerAlt />, path: "/locations" },
+      { label: "Assets", icon: <FaCubes />, path: "/assets" },
+    ],
+  },
+  {
+    title: "Internal",
+    items: [
+      { label: "Employees", icon: <FaUserTie />, path: "/employees" },
+      { label: "Documents", icon: <FaFileAlt />, path: "/documents" },
+    ],
+  },
+  {
+    title: "System",
+    items: [
+      { label: "Settings", icon: <FaCog />, path: "/settings/dropdowns" },
+    ],
+  },
 ];
 
 export default function Sidebar() {
   return (
     <aside className="sidebar">
-      {/* Logo */}
       <div className="logoRow">
         <img
           src="/logo.png"
@@ -50,20 +79,30 @@ export default function Sidebar() {
         />
       </div>
 
-      <div className="navTitle">NAVIGATION</div>
-
       <ul className="navList">
-        {navItems.map(({ label, icon, path }) => (
+        {navGroups.map((group, idx) => (
-          <li key={path}>
+          <li key={group.title} className="navGroup">
-            <NavLink
+            <div
-              to={path}
+              className={`navGroupTitle ${idx === 0 ? "navGroupTitleFirst" : ""}`}
-              className={({ isActive }) =>
-                `navItem ${isActive ? "active" : ""}`
-              }
             >
-              <span className="glyph">{icon}</span>
+              {group.title}
-              <span className="navLabel">{label}</span>
+            </div>
-            </NavLink>
+            <ul className="navGroupList">
+              {group.items.map(({ label, icon, path }) => (
+                <li key={path}>
+                  <NavLink
+                    to={path}
+                    end={path === "/"}
+                    className={({ isActive }) =>
+                      `navItem ${isActive ? "active" : ""}`
+                    }
+                  >
+                    <span className="glyph">{icon}</span>
+                    <span className="navLabel">{label}</span>
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
           </li>
         ))}
       </ul>

src/index.css

@@ -106,6 +106,31 @@ body {
   margin-bottom: 14px;
 }
 
+.navGroup {
+  list-style: none;
+}
+
+.navGroupList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.navGroupTitle {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: #9aa0a6;
+  margin-top: 18px;
+  margin-bottom: 6px;
+  padding: 0 14px;
+}
+
+.navGroupTitleFirst {
+  margin-top: 0;
+}
+
 .navList {
   list-style: none;
   padding: 0;
@@ -167,10 +192,17 @@ body {
 /* Hide text only */
 .app.nav-collapsed .navLabel,
 .app.nav-collapsed .logoText,
-.app.nav-collapsed .navTitle {
+.app.nav-collapsed .navTitle,
+.app.nav-collapsed .navGroupTitle {
   display: none;
 }
 
+.app.nav-collapsed .navGroup + .navGroup {
+  border-top: 1px solid #e5e7eb;
+  margin-top: 8px;
+  padding-top: 8px;
+}
+
 /* Center icons */
 .app.nav-collapsed .navItem {
   justify-content: center;