chore: moved forward with navbar approaches, pausing navbar right now

src/app/page.tsx

@@ -109,7 +109,7 @@ export default function Home() {
         {/* Sponsors Section */}
         <div className="w-full" id="sponsors">
           <p className="text-center font-extrabold text-5xl">Our Sponsors</p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-24 text-center border-[#104456] border-2">
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 mt-24 text-center border-[#104456] border-2 m-8">
             {sponsorsList.map((sponsor, index) => (
               <Sponsor key={index} name={sponsor.name} image={sponsor.image} />
             ))}

src/components/navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import TextButton from "../buttons/TextButton";
 import IconButton from "../buttons/IconButton";
 import { Montserrat } from "next/font/google";
+import Sidebar from "../ui/sidebar";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
@@ -41,7 +42,8 @@ const Navbar = () => {
                   d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"
                 />
               </svg>
-              {isDropdownOpen && (
+              <Sidebar />
+              {/* {isDropdownOpen && (
                 <ul className="absolute right-0 w-48 bg-white text-black rounded shadow-lg">
                   <li>
                     <TextButton href="#about">About Us</TextButton>
@@ -59,7 +61,7 @@ const Navbar = () => {
                     <TextButton href="#faq">FAQs</TextButton>
                   </li>
                 </ul>
-              )}
+              )} */}
             </button>
             <ul className="hidden md:flex gap-x-16 text-white ">
               <TextButton href="#about">About Us</TextButton>

src/components/ui/sidebar.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Sidebar = () => {
+  return <div className="h-100% w-100% bg-blue-950 z-100"></div>;
+};
+
+export default Sidebar;