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/App.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useAuth } from "./state";
 import { LoginPage } from "./pages/LoginPage";
 import { DashboardPage } from "./pages/DashboardPage";
@@ -17,20 +17,36 @@ function Protected({ children }) {
 
 function Layout({ children }) {
   const { me, logout } = useAuth();
+  const navClass = ({ isActive }) => `nav-btn${isActive ? " active" : ""}`;
+
   return (
     <div className="shell">
       <aside className="sidebar">
         <h1>NexaPG</h1>
-        <nav>
-          <Link to="/">Dashboard</Link>
-          <Link to="/targets">Targets</Link>
-          <Link to="/query-insights">Query Insights</Link>
-          {me?.role === "admin" && <Link to="/admin/users">Admin</Link>}
+        <nav className="sidebar-nav">
+          <NavLink to="/" end className={navClass}>
+            <span className="nav-icon">DB</span>
+            <span className="nav-label">Dashboard</span>
+          </NavLink>
+          <NavLink to="/targets" className={navClass}>
+            <span className="nav-icon">TG</span>
+            <span className="nav-label">Targets</span>
+          </NavLink>
+          <NavLink to="/query-insights" className={navClass}>
+            <span className="nav-icon">QI</span>
+            <span className="nav-label">Query Insights</span>
+          </NavLink>
+          {me?.role === "admin" && (
+            <NavLink to="/admin/users" className={navClass}>
+              <span className="nav-icon">AD</span>
+              <span className="nav-label">Admin</span>
+            </NavLink>
+          )}
         </nav>
         <div className="profile">
           <div>{me?.email}</div>
           <div className="role">{me?.role}</div>
-          <button onClick={logout}>Logout</button>
+          <button className="logout-btn" onClick={logout}>Logout</button>
         </div>
       </aside>
       <main className="main">{children}</main>