Refactoring Navbar + fixed mobile

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import Navbar from "../components/navbar";
+import Navbar from "@/components/navbar";
 import { ToastContainer } from "react-toastify";
 import { NextUIProvider, Spacer } from "@nextui-org/react";
 import Footer from "@/components/footer";

src/components/footer/Socials.tsx

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from "react";
+import { HTMLNextUIProps } from '@nextui-org/system';
+import IconLink from "@/components/link-components/IconLink";
+import { SiBluesky, SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
+
+interface Social {
+    icon: ReactNode,
+    name: string,
+    href: string
+}
+
+export const socialList: Social[] = [
+    {
+        icon: <SiGithub />,
+        name: "Github",
+        href: "https://github.com/Dare2Jam"
+    },
+    {
+        icon: <SiForgejo />,
+        name: "Personal Git",
+        href: "https://git.edikoyo.com/Ategon/Jamjar"
+    },
+    {
+        icon: <SiBluesky />,
+        name: "BlueSky",
+        href: "https://bsky.app/profile/d2jam.com"
+    },
+    {
+        icon: <SiDiscord />,
+        name: "Discord",
+        href: "https://discord.d2jam.com"
+    }
+]
+
+const Socials: FC<HTMLNextUIProps> = ({}) => {
+    return (
+        <>
+            {socialList.map(social => (<IconLink key={social.name} icon={social.icon} href={social.href} />))}
+        </>
+    )
+}
+
+export default Socials;

src/components/footer/index.tsx

@@ -1,18 +1,12 @@
-import IconLink from "../link-components/IconLink";
-import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
+import Socials from "./Socials";
 
 export default function Footer() {
   return (
     <div className="p-8 bg-[#fff] dark:bg-[#222] mt-8 border-t-2 dark:border-white/15 border-black/15 transition-color duration-500 ease-in-out z-10">
       <div className="flex justify-between">
         <div></div>
         <div className="flex gap-3">
-          <IconLink icon={<SiGithub />} href="https://github.com/Dare2Jam" />
-          <IconLink
-            icon={<SiForgejo />}
-            href="https://git.edikoyo.com/Ategon/Jamjar"
-          />
-          <IconLink icon={<SiDiscord />} href="https://discord.d2jam.com" />
+          <Socials />
         </div>
       </div>
     </div>