fix sidebar button placement

martincham · Dec 2, 2024 · bb0359e · bb0359e
1 parent 765a762
commit bb0359e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -48,16 +48,17 @@ const App: React.FC = () => {
                     </h1>
                   </Link>
                   {/* Buttons */}
-                  <div className="flex justify-end space-x-2 ml-auto z-50">
+                  <div className="flex justify-end space-x-2 ml-auto z-30">
                     {/* Mode Toggle */}
                     <div className="ml-auto z-50 flex items-center justify-center">
                       <DarkSwitch />
                     </div>
                     {/* Mobile Hamburger Menu */}
                     <Button
                       variant="outline"
-                      className="ml-auto p-2 md:hidden bg-background z-50 border-foreground"
+                      className="ml-auto p-2 md:hidden bg-background outline-foreground"
                       onClick={toggleSidebar}
+                      size="icon"
                       aria-label="Toggle sidebar"
                     >
                       <div>
@@ -95,7 +96,28 @@ const App: React.FC = () => {
                   : "z-40 translate-x-full duration-0 opacity-0 md:opacity-100"
               } md:flex md:flex-col overflow-y-auto`}
             >
-              <div className="py-10 md:hidden"></div>
+              <div className="h-[120px] relative md:hidden">
+                {/* Mobile Hamburger Menu */}
+
+                <Button
+                  variant="outline"
+                  className="ml-auto p-2 md:hidden bg-background justify-between absolute bottom-0 right-0 "
+                  onClick={toggleSidebar}
+                  aria-label="Toggle sidebar"
+                >
+                  <div>
+                    <span
+                      className={`block w-5 h-0.5 bg-black dark:bg-white mb-1 transition-transform ${isOpen ? "rotate-45 translate-y-1.5" : ""}`}
+                    ></span>
+                    <span
+                      className={`block w-5 h-0.5 bg-black dark:bg-white mb-1 transition-opacity ${isOpen ? "opacity-0" : ""}`}
+                    ></span>
+                    <span
+                      className={`block w-5 h-0.5 bg-black dark:bg-white transition-transform ${isOpen ? "-rotate-45 -translate-y-1.5" : ""}`}
+                    ></span>
+                  </div>
+                </Button>
+              </div>
               <Sidebar toggleSidebar={toggleSidebar} isOpen={isOpen} />
             </div>
             {/* Content */}

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -43,7 +43,7 @@ interface SidebarProps {
 
 const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar }) => {
   return (
-    <nav className="flex flex-col space-y-2 pt-24 md:pt-0 md:space-y-0 md:flex-row md:items-center md:justify-between md:px-4 md:py-4">
+    <nav className="flex flex-col md:flex-row md:items-center md:justify-between md:px-4 md:py-4">
       <Accordion type="multiple" className="w-full">
         {/* Art Projects */}
         {sidebarItems.map((sidebarItem, index) => (