REFACTOR: Repositioning of Components in Project Structure

2025-02-16 19:36:34 +00:00
parent bd091b079a
commit b3de7ba238
17 changed files with 356 additions and 311 deletions
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import Logo from "../Layout/Logo";
+import Button from "../Input/Button";
+import Sidebar from "./Sidebar";
+import { Sidebar as SidebarIcon } from "lucide-react";
+import {
+  LogIn as LogInIcon,
+  LogOut as LogOutIcon,
+  Settings as SettingsIcon,
+} from "lucide-react";
+import SearchBar from "../Input/SearchBar";
+import AuthModal from "../Auth/AuthModal";
+import { useAuthModal } from "../../hooks/useAuthModal";
+import { useAuth } from "../../context/AuthContext";
+import QuickSettings from "../Settings/QuickSettings";
+
+interface NavbarProps {
+  variant?: "home" | "default";
+}
+
+const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
+  const { isLoggedIn } = useAuth();
+  const { showAuthModal, setShowAuthModal } = useAuthModal();
+  const [showSideBar, setShowSideBar] = useState(false);
+  const [showQuickSettings, setShowQuickSettings] = useState(false);
+
+  const handleLogout = () => {
+    console.log("Logging out...");
+    fetch("/api/logout")
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        window.location.reload();
+      });
+  };
+
+  const handleQuickSettings = () => {
+    setShowQuickSettings(!showQuickSettings);
+  };
+
+  const handleSideBar = () => {
+    setShowSideBar(!showSideBar);
+  };
+
+  return (
+    <div
+      id="navbar"
+      className={`flex justify-center items-center ${
+        variant === "home"
+          ? "h-[45vh] flex-col"
+          : "h-[15vh] col-span-2 flex-row"
+      }`}
+    >
+      <Logo variant={variant} />
+      <Button
+        extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
+        onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
+      >
+        {isLoggedIn ? (
+          <>
+            <LogOutIcon className="h-15 w-15 mr-1" />
+            Logout
+          </>
+        ) : (
+          <>
+            <LogInIcon className="h-15 w-15 mr-1" />
+            Login / Register
+          </>
+        )}
+      </Button>
+
+      {isLoggedIn && (
+        <>
+          <Button
+            onClick={() => handleSideBar()}
+            extraClasses={`absolute ${
+              showSideBar
+                ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
+          bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
+          over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
+                : "top-[75px] left-[20px]"
+            } transition-all duration-300 z-[99]`}
+          >
+            <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
+          </Button>
+          <div
+            className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
+              transition-transform transition-opacity duration-500 ease-in-out ${
+                showSideBar
+                  ? "translate-x-0 opacity-100"
+                  : "-translate-x-full opacity-0"
+              }`}
+          >
+            <Sidebar />
+          </div>
+        </>
+      )}
+
+      <Button
+        extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
+        onClick={() => handleQuickSettings()}
+      >
+        <SettingsIcon className="h-15 w-15 mr-1 " />
+        Quick Settings
+      </Button>
+
+      <div
+        className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
+               transition-opacity duration-500 ease-in-out ${
+                 showQuickSettings
+                   ? "translate-x-0 opacity-100"
+                   : "translate-x-full opacity-0"
+               }`}
+      >
+        <QuickSettings />
+      </div>
+
+      <SearchBar />
+
+      {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+    </div>
+  );
+};
+
+export default Navbar;