added some mobile responsiveness

Author: ariflogs

app/(docs)/docs/layout.tsx

@@ -15,7 +15,7 @@ export default function ComponentLayout({
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-16">{children}</div>
+      <div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
     </div>
   );
 }

components/HamburgerMenu.tsx

@@ -7,22 +7,29 @@ import { Button } from "@/packages/ui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div>
       <Button
         size="sm"
         variant="outline"
+        className="p-2"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="z-50 absolute top-3 left-2 mb-3"
       >
-        {isOpen ? <X /> : <AlignJustify />}
+        {isOpen ? (
+          <X className="h-4 w-4" />
+        ) : (
+          <AlignJustify className="h-4 w-4" />
+        )}
       </Button>
-      
+
       {isOpen && (
-        <div className="absolute top-0 z-30 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
+        <div
+          className="absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50"
+          onClick={() => setIsOpen(false)}
+        />
       )}
-      
+
       {isOpen && (
         <div className="absolute top-0 left-0 z-40">
           <SideNav />

components/TopNav.tsx

@@ -11,13 +11,7 @@ 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="/"
@@ -54,8 +48,10 @@ export default function TopNav() {
               rel="noopener noreferrer"
             >
               <GithubIcon />
-            </Link> 
+            </Link>
+            <HamburgerMenu />
           </div>
+
           <div className="hidden lg:flex items-center">
             <Link
               href="https://github.com/Logging-Stuff/retroui"