style(NavBar): fixed styles for navbar

src/app/layout.tsx

@@ -18,7 +18,7 @@ const RootLayout = ({
         <Providers>
           <main className="flex">
             <NavBar />
-            <div className="flex min-h-screen w-full flex-col bg-light dark:bg-dark">
+            <div className="flex min-h-screen w-full flex-col ml-24 md:ml-72 bg-light dark:bg-dark">
               <Header />
               {children}
               <Footer />

src/components/NavBar.tsx

@@ -18,37 +18,37 @@ const navBarLinks = [
     keyProp: "home",
     label: "Home",
     link: "/",
-    icon: <FaHouseChimney size={24} />,
+    icon: <FaHouseChimney size={24} className="my-auto" />,
   },
   {
     keyProp: "about",
     label: "About",
     link: "/about",
-    icon: <FaAddressCard size={24} />,
+    icon: <FaAddressCard size={24} className="my-auto" />,
   },
   {
     keyProp: "education",
     label: "Education",
     link: "/education",
-    icon: <FaGraduationCap size={24} />,
+    icon: <FaGraduationCap size={24} className="my-auto" />,
   },
   {
     keyProp: "experience",
     label: "Experience",
     link: "/experience",
-    icon: <FaSuitcase size={24} />,
+    icon: <FaSuitcase size={24} className="my-auto" />,
   },
   {
     keyProp: "projects",
     label: "Projects",
     link: "/projects",
-    icon: <FaCode size={24} />,
+    icon: <FaCode size={24} className="my-auto" />,
   },
   {
     keyProp: "contact",
     label: "Contact",
     link: "/contact",
-    icon: <FaEnvelope size={24} />,
+    icon: <FaEnvelope size={24} className="my-auto" />,
   },
 ];
 
@@ -57,9 +57,8 @@ const NavBar = () => {
 
   return (
     <div
-      className={`NavBar flex h-screen bg-primary md:static md:w-72 ${expanded && "absolute w-full"}`}>
-      <div
-        className={`NavBar flex flex-col justify-center gap-2 p-2 w-full`}>
+      className={`NavBar fixed flex min-h-screen bg-primary md:w-72 ${expanded ? "w-full" : "w-24"}`}>
+      <div className={`NavBar flex w-full flex-col gap-2 p-2`}>
         <ThemeSwitcher expanded={expanded} />
 
         {navBarLinks.map((navBarLink) => {

src/components/NavBarExpander.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import { FaAngleRight, FaAngleLeft } from "react-icons/fa";
 import React from "react";
-import { Button } from "@nextui-org/react";
 
 const NavBarExpander = ({
   expanded,
@@ -13,31 +10,25 @@ const NavBarExpander = ({
 }) => {
   if (!expanded) {
     return (
-      <Button
-        isIconOnly={true}
-        disableRipple={true}
-        disableAnimation={true}
-        onPress={() => setExpanded(true)}
+      <button
+        onClick={() => setExpanded(true)}
         aria-label="Expand"
         color="default"
-        className="h-full w-5 md:hidden">
+        className="mx-1 w-5 md:hidden">
         <FaAngleRight size={24} className=" text-dark dark:text-light" />
-      </Button>
+      </button>
     );
   }
 
   if (expanded) {
     return (
-      <Button
-        disableRipple={true}
-        disableAnimation={true}
-        isIconOnly={true}
-        onPress={() => setExpanded(false)}
+      <button
+        onClick={() => setExpanded(false)}
         aria-label="Unexpand"
         color="default"
-        className="h-full w-10 md:hidden">
+        className="mx-1 w-10 md:hidden">
         <FaAngleLeft size={48} className=" text-dark dark:text-light" />
-      </Button>
+      </button>
     );
   }
 };

src/components/NavBarLink.tsx

@@ -18,23 +18,19 @@ const NavBarLink = ({
   const pathname = usePathname();
 
   return (
-    <Button
-      as={Link}
-      isIconOnly={true}
-      disableRipple={true}
-      disableAnimation={true}
+    <a
       href={link}
       aria-label={label}
       color="default"
-      className={`flex justify-start rounded-lg p-3 hover:bg-light dark:hover:bg-dark md:w-full ${expanded ? "w-full" : "w-12"} ${pathname === link && "bg-light dark:bg-dark"}`}>
+      className={`flex justify-start gap-2 rounded-lg p-3 hover:bg-light dark:hover:bg-dark md:w-full ${expanded ? "w-full" : "w-12"} ${pathname === link && "bg-light dark:bg-dark"}`}>
       {icon}
       {
         <div
-          className={`text-2xl font-semibold md:block ${expanded ? "block" : "hidden"}`}>
+          className={`my-auto text-xl font-semibold md:block ${expanded ? "block" : "hidden"}`}>
           {label}
         </div>
       }
-    </Button>
+    </a>
   );
 };
 

src/components/ThemeSwitcher.tsx

@@ -51,11 +51,8 @@ const ThemeSwitcher = ({ expanded }: { expanded: boolean }) => {
 
   if (resolvedTheme === "dark") {
     return (
-      <Button
-        disableRipple={true}
-        disableAnimation={true}
-        isIconOnly={true}
-        onPress={() => setTheme("light")}
+      <button
+        onClick={() => setTheme("light")}
         aria-label="Light"
         color="default"
         className={`flex justify-start rounded-lg p-3 hover:bg-light dark:hover:bg-dark md:w-full ${expanded ? "w-full" : "w-12"}`}>
@@ -66,17 +63,14 @@ const ThemeSwitcher = ({ expanded }: { expanded: boolean }) => {
             Light Mode
           </div>
         }
-      </Button>
+      </button>
     );
   }
 
   if (resolvedTheme === "light") {
     return (
-      <Button
-        disableRipple={true}
-        disableAnimation={true}
-        isIconOnly={true}
-        onPress={() => setTheme("dark")}
+      <button
+        onClick={() => setTheme("dark")}
         aria-label="Dark"
         color="default"
         className={`flex justify-start rounded-lg p-3 hover:bg-light dark:hover:bg-dark md:w-full ${expanded ? "w-full" : "w-12"}`}>
@@ -87,7 +81,7 @@ const ThemeSwitcher = ({ expanded }: { expanded: boolean }) => {
             Dark Mode
           </div>
         }
-      </Button>
+      </button>
     );
   }
 };