Organized Files for Navigation

src/App.tsx

@@ -1,4 +1,4 @@
-import Navbar from "./components/Navbar";
+import Navbar from "./components/Navigation/Navbar";
 import Home from "./pages/Home";
 import Footer from "./components/Footer/Footer";
 

src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import HorizontalLine from "../HorizontalLine";
+import HorizontalLine from "../ui/HorizontalLine";
 import { LeftFooterGrid } from "./LeftFooterGrid";
 import RightFooterGrid from "./RightFooterGrid";
 import { MiddleFooterGrid } from "./MiddleFooterGrid";

src/components/Navigation/DesktopNav.tsx

@@ -0,0 +1,41 @@
+import RoundedButton from "../Button/RoundedButton";
+
+const navLinks = [
+  {
+    name: "Info",
+    id_href: "#info",
+    cssClass: "nav-text-animation",
+  },
+  {
+    name: "Sponsors",
+    id_href: "#sponsors",
+    cssClass: "nav-text-animation",
+  },
+  {
+    name: "Team",
+    id_href: "#team",
+    cssClass: "nav-text-animation",
+  },
+];
+
+export default function DesktopNav() {
+  return (
+    <section className="nav-container">
+      <a href="/" className="flex gap-4 items-center">
+        <img src="/logo/Compact_Dark_Mode.svg" className="w-20 aspect-square" />
+      </a>
+      <ul className="flex gap-14 items-center text-soda-white font-bold">
+        {navLinks.map((el) => (
+          <li>
+            <a href={el.id_href} className={`${el.cssClass}`}>
+              {el.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <a href="#join">
+        <RoundedButton name="Join SoDA" />
+      </a>
+    </section>
+  );
+}

src/components/Navigation/Navbar.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import OpenedMobileNav from "./Mobile/OpenedMobileNav";
+import MobileNav from "./Mobile/MobileNav";
+
+import DesktopNav from "./DesktopNav";
+
+function Navbar() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <nav className="navigation">
+      {/* Primary Navigation - Hidden on mobile */}
+      <DesktopNav />
+      {/*Mobile Navigation*/}
+      <MobileNav setIsOpen={setIsOpen} isOpen={isOpen} />
+      {/*Mobile Navigation when opened*/}
+      {isOpen && <OpenedMobileNav setIsOpen={setIsOpen} />}
+    </nav>
+  );
+}
+
+export default Navbar;