FIX: Quick Setting Icon

frontend/src/components/Layout/Navbar.tsx

@@ -13,6 +13,7 @@ import Input from "./Input";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
+import QuickSettings from "./QuickSettings";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -22,6 +23,7 @@ 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...");
@@ -40,11 +42,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   return (
     <div
       id="navbar"
-      className={`flex justify-center items-center ${
-        variant === "home"
+      className={`flex justify-center items-center ${variant === "home"
           ? "h-[45vh] flex-col"
           : "h-[15vh] col-span-2 flex-row"
-      }`}
+        }`}
     >
       <Logo variant={variant} />
       <Button
@@ -68,21 +69,19 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <>
           <Button
             onClick={() => handleSideBar()}
-            extraClasses={`absolute ${
-              showSideBar
+            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]`}
+              } 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(--sideBar-LightBG)] text-[var(--sideBar-LightText)] 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"
-    }`}
+              transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+              }`}
           >
             <Sidebar />
           </div>
@@ -96,6 +95,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15 mr-1" />
         Quick Settings
       </Button>
+      
+        <div
+          className={`fix top-0 right-0 w-250px h-screen 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>
 
       <div id="search-bar" className="flex items-center">
         <Input