v0.0.3 Debug

frontend/app/components/NexusAuth.css

@@ -8,6 +8,7 @@
     background: linear-gradient(145deg, var(--accent), var(--secondary));
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
     color: var(--foreground);
+    animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
 }
 
 /* Header Styling */
@@ -94,6 +95,7 @@
 .nexus-auth-signup-login {
     text-align: center;
     margin-top: 40px;
+    animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
 }
 
 .nexus-auth-signup-login h1 {

frontend/app/components/Sidebar.js

@@ -1,18 +1,41 @@
-'use client';
+"use client";
 import { VERSION } from "@/app/lib/config";
+import { usePathname } from "next/navigation";
 import { Bars3Icon, UserCircleIcon, Cog6ToothIcon, QuestionMarkCircleIcon, BoltIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import Image from "next/image";
-import logo from "@/app/assets/logo6.png";
+import logo from "@/app/assets/logo.png";
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [accessLevel, setAccessLevel] = useState(null);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const sidebarRef = useRef(null);
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  useEffect(() => {
+    setAccessLevel(localStorage.getItem("a_l"));
+
+    const handleClickOutside = (event) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+        setIsCollapsed(true);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
-export default function Sidebar({ isCollapsed, toggleSidebar }) {
   const logoStyle = {
-    width: isCollapsed ? "60px" : "100px",
-    height: isCollapsed ? "60px" : "100px",
+    width: isCollapsed ? "60px" : "150px",
+    height: isCollapsed ? "60px" : "150px",
     borderRadius: "50px",
     transition: "width 0.3s ease, height 0.3s ease",
-    marginBottom: "20px",
+    marginBottom: 0,
     marginTop: "20px",
   };
 
@@ -48,6 +71,12 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     fontSize: "1em",
   };
 
+  const activeNavLinkStyle = {
+    backgroundColor: "var(--hover-accent)",
+    borderRadius: "5px",
+    animation: "fadeIn .5s ease-in-out, pulse .5s ease-in-out",
+  };
+
   const textStyle = {
     opacity: isCollapsed ? 0 : 1,
     transition: "opacity 0.3s ease",
@@ -78,47 +107,49 @@ export default function Sidebar({ isCollapsed, toggleSidebar }) {
     transition: "background-color 0.3s ease, right 0.3s ease",
   };
 
-  const [acessLevel, setAcessLevel] = useState(null);
-
-  useEffect(() => {
-    setAcessLevel(localStorage.getItem('a_l'));
-  }, []);
-
   return (
-    <div style={sidebarStyle}>
+    <div ref={sidebarRef} className="sidebar-container" style={sidebarStyle}>
       <div className="logo-container" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
         <Image style={logoStyle} src={logo} alt="App Logo" />
         <sup style={versionStyle}>{VERSION}</sup>
         <button
           style={toggleButtonStyle}
-          onClick={toggleSidebar}
+          onClick={() => toggleSidebar(!isCollapsed)}
         >
-          <Bars3Icon style={{transform: `rotate(${isCollapsed ? 0 : 90}deg)`, transition: 'transform .3s', width: '20px' }} />
+          <Bars3Icon style={{ transform: `rotate(${isCollapsed ? 0 : 90}deg)`, transition: "transform .3s", width: "20px" }} />
         </button>
       </div>
       <ul className="nav-links" style={{ listStyleType: "none", marginTop: "20px", paddingLeft: "0" }}>
         <li>
-          <Link href="/" style={navLinkStyle}>
-            <UserCircleIcon style={iconStyle} />
-            <span style={textStyle}>Profile</span>
+          <Link href="/" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/" && activeNavLinkStyle) }}>
+              <UserCircleIcon style={iconStyle} />
+              <span style={textStyle}>Profile</span>
+            </a>
           </Link>
         </li>
         <li>
-          <Link href={`/su/${acessLevel}`} style={navLinkStyle}>
-            <BoltIcon style={iconStyle} />
-            <span style={textStyle}>{acessLevel}</span>
+          <Link href={`/su/${accessLevel}`} legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === `/su/${accessLevel}` && activeNavLinkStyle) }}>
+              <BoltIcon style={iconStyle} />
+              <span style={textStyle}>{accessLevel}</span>
+            </a>
           </Link>
         </li>
         <li>
-          <Link href="/settings" style={navLinkStyle}>
-            <Cog6ToothIcon style={iconStyle} />
-            <span style={textStyle}>Settings</span>
+          <Link href="/settings" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/settings" && activeNavLinkStyle) }}>
+              <Cog6ToothIcon style={iconStyle} />
+              <span style={textStyle}>Settings</span>
+            </a>
           </Link>
         </li>
         <li>
-          <Link href="/support" style={navLinkStyle}>
-            <QuestionMarkCircleIcon style={iconStyle} />
-            <span style={textStyle}>Support</span>
+          <Link href="/support" legacyBehavior>
+            <a style={{ ...navLinkStyle, ...(pathname === "/support" && activeNavLinkStyle) }}>
+              <QuestionMarkCircleIcon style={iconStyle} />
+              <span style={textStyle}>Support</span>
+            </a>
           </Link>
         </li>
       </ul>

frontend/app/globals.css

@@ -3,16 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --background: #15171f; /* Deeper dark background */
-  --foreground: #E0E0E0; /* Light gray text */
-  --sidebar-background: #14141b; /* Darker sidebar background */
+  --background: #15171f;
+  /* Deeper dark background */
+  --foreground: #E0E0E0;
+  /* Light gray text */
+  --sidebar-background: #14141b;
+  /* Darker sidebar background */
   --primary: #1f202a;
-  --secondary: #2a2b3b; /* Soft secondary background for content */
+  --secondary: #2a2b3b;
+  /* Soft secondary background for content */
   --accent: #4a557f;
-  --hover-accent: #5c608a; /* Slightly lighter accent color for hover */
-  --button-background: #3a3b4c; /* Button background */
-  --button-hover: #2D2D38; /* Darker button hover */
-  --shadow-dark: rgba(0, 0, 0, 0.15); /* Shadow for depth */
+  --hover-accent: #5c608a;
+  /* Slightly lighter accent color for hover */
+  --button-background: #3a3b4c;
+  /* Button background */
+  --button-hover: #2D2D38;
+  /* Darker button hover */
+  --shadow-dark: rgba(0, 0, 0, 0.15);
+  /* Shadow for depth */
 }
 
 html,
@@ -38,19 +46,23 @@ body {
 
 @keyframes fadeIn {
   from {
-      opacity: 0;
+    opacity: 0;
   }
+
   to {
-      opacity: 1;
+    opacity: 1;
   }
 }
 
 @keyframes pulse {
-  0%, 100% {
-      transform: scale(1);
+
+  0%,
+  100% {
+    transform: scale(1);
   }
+
   50% {
-      transform: scale(1.1);
+    transform: scale(1.025);
   }
 }
 
@@ -60,8 +72,10 @@ body {
   border-radius: 5px;
   box-shadow: 0 4px 12px var(--shadow-dark);
   text-align: center;
-  width: 90%; /* Adjust for smaller screens */
-  max-width: 500px; /* Limit for larger screens */
+  width: 90%;
+  /* Adjust for smaller screens */
+  max-width: 500px;
+  /* Limit for larger screens */
   margin-bottom: 30px;
   transition: all 0.3s ease-in-out;
 }
@@ -80,3 +94,7 @@ body {
 .logout-button:hover {
   background-color: darken(var(--button-background), 10%);
 }
+
+.page-content {
+  animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
+}

frontend/app/layout.js

@@ -9,11 +9,6 @@ import Sidebar from "@/app/components/Sidebar";
 import { ToastProvider } from "@/app/lib/ToastContext"; // Update with your file path
 
 export default function RootLayout({ children }) {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  const toggleSidebar = () => {
-    setIsCollapsed(!isCollapsed);
-  };
-
   const contentStyle = {
     padding: "30px",
     flexGrow: 1,
@@ -54,7 +49,7 @@ export default function RootLayout({ children }) {
 
           <NexusAuthWrapper>
             <div className="dashboard-container">
-              <Sidebar isCollapsed={isCollapsed} toggleSidebar={toggleSidebar} />
+              <Sidebar/>
               <div style={contentStyle}>
                 <header style={headerStyle}>
                   <h1>Welcome to Nexus Dashboard</h1>

frontend/app/lib/config.js

@@ -1,5 +1,5 @@
 export const API_BASE_URL = "https://hans-r-d-auth-nexus.hf.space/v1/api";
 export const DEBUG = true;
-export const VERSION = "v0.0.2 Debug";
+export const VERSION = "v0.0.3 Debug";
 export const APP_NAME = "Nexus Auth";
 export const APP_DESCRIPTION = "A simple authentication service";

frontend/app/page.js

@@ -36,7 +36,7 @@ export default function Home() {
   };
 
   return (
-    <>
+    <div className="page-content">
       {username && (
         <div className="max-w-sm mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
           <table className="min-w-full divide-y divide-gray-700">
@@ -63,6 +63,6 @@ export default function Home() {
           </table>
         </div>
       )}
-    </>
+    </div>
   );
 }

frontend/app/settings/page.js

@@ -1,5 +1,7 @@
 export default function Settings() {
     return (
-        <></>
+        <div className="page-content flex justify-center items-center">
+            <h1>Settings</h1>
+        </div>
     )
 };

frontend/app/su/[access_level]/page.js

@@ -84,7 +84,7 @@ export default function SuperUser() {
   const { username, userID, accessLevel } = userDetails;
 
   return (
-    <div className="max-w-xl mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
+    <div className="page-content max-w-xl mx-auto shadow-lg rounded-lg overflow-hidden bg-gray-800 text-white">
       {username ? (
         <>
           <table className="min-w-full divide-y divide-gray-700">

frontend/app/support/page.js

@@ -1,5 +1,7 @@
 export default function Support() {
     return (
-        <></>
+        <div className="page-content flex justify-center items-center">
+        <h1>Support</h1>
+    </div>
     )
 };