fixed sidebar responsiveness

Author: biplab-sutradhar

components/HamburgerMenu.tsx

@@ -14,10 +14,20 @@ export default function HamburgerMenu() {
         size="sm"
         variant="outline"
         onClick={() => setIsOpen((prev) => !prev)}
+        className="z-50 absolute top-3 left-2 mb-3"
       >
         {isOpen ? <X /> : <AlignJustify />}
       </Button>
-      {isOpen && <div className=" w-44"> <SideNav /> </div> }
+      
+      {isOpen && (
+        <div className="absolute top-0 z-40 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
+      )}
+      
+      {isOpen && (
+        <div className="absolute top-0 left-0 z-50">
+          <SideNav />
+        </div>
+      )}
     </div>
   );
 }

components/SideNav.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 export default function SideNav() {
   return (
     <div
-      className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white flex justify-start md:justify-center pl-2 md:pl-0`}
+      className={`fixed right-auto border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white flex md:justify-start justify-center  py-14 md:py-8`}
     >
       <nav className="flex flex-col items-start pr-6 space-y-4">
         {navConfig.sideNavItems.map((item) => (

components/TopNav.tsx

@@ -11,7 +11,13 @@ export default function TopNav() {
     <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
       <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
+          
           {/* Logo Section */}
+
+          
+          <div className="flex items-center  lg:hidden"> 
+            <HamburgerMenu />
+          </div>
           <div className="flex-shrink-0">
             <a
               href="/"
@@ -48,8 +54,7 @@ export default function TopNav() {
               rel="noopener noreferrer"
             >
               <GithubIcon />
-            </Link>
-            <HamburgerMenu />
+            </Link> 
           </div>
           <div className="hidden lg:flex items-center">
             <Link