Revamp navigation and styling; enhance API URL handling.

Replaced `Link` components with `NavLink` for active state support and added new sidebar navigation styling. Enhanced API URL handling to prevent mixed content when using HTTPS. Updated layout and CSS for better responsiveness and consistent design.

frontend/src/styles.css

@@ -17,6 +17,7 @@ body {
   font-family: "Space Grotesk", "Segoe UI", sans-serif;
   color: var(--text);
   background: radial-gradient(circle at top right, #1d335f, #0b1020 55%);
+  overflow: hidden;
 }
 
 a {
@@ -27,7 +28,8 @@ a {
 .shell {
   display: grid;
   grid-template-columns: 260px 1fr;
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .sidebar {
@@ -37,14 +39,60 @@ a {
   display: flex;
   flex-direction: column;
   gap: 20px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow: hidden;
 }
 
-.sidebar nav {
+.sidebar-nav {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid #223056;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #101b3a, #0d1530);
+  color: #c6d5ef;
+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+}
+
+.nav-btn:hover {
+  border-color: #2e4f98;
+  background: linear-gradient(180deg, #13224b, #101b3a);
+  transform: translateY(-1px);
+}
+
+.nav-btn.active {
+  border-color: #38bdf8;
+  box-shadow: inset 0 0 0 1px #38bdf860;
+  background: linear-gradient(180deg, #16305f, #101f43);
+  color: #ecf5ff;
+}
+
+.nav-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid #2b3f74;
+  background: #0d1631;
+}
+
+.nav-label {
+  font-size: 15px;
+  font-weight: 600;
+}
+
 .profile {
   margin-top: auto;
   border-top: 1px solid #223056;
@@ -58,6 +106,8 @@ a {
 
 .main {
   padding: 24px;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .card {
@@ -120,6 +170,17 @@ button {
   cursor: pointer;
 }
 
+.logout-btn {
+  width: 100%;
+  margin-top: 8px;
+  border-color: #374f8f;
+  background: linear-gradient(180deg, #13224b, #101b3a);
+}
+
+.logout-btn:hover {
+  border-color: #38bdf8;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -215,16 +276,26 @@ td {
 }
 
 @media (max-width: 980px) {
+  body {
+    overflow: auto;
+  }
   .shell {
     grid-template-columns: 1fr;
+    height: auto;
+    overflow: visible;
   }
   .sidebar {
     position: sticky;
     top: 0;
     z-index: 2;
+    height: auto;
   }
   .grid.two,
   .grid.three {
     grid-template-columns: 1fr;
   }
+  .main {
+    height: auto;
+    overflow: visible;
+  }
 }