PATCH inverted buttons

frontend/src/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
 import MenuButton from "./buttons/MenuButton.tsx";
-import { Cross } from 'lucide-react';
+import { Cross, User } from 'lucide-react';
 
 type props = {
     className?: string
@@ -16,6 +16,9 @@ const Sidebar = ({className}: props) => {
                     <Cross size={20}/> Create Clip
                 </MenuButton>
             </Link>
+            <MenuButton className={"flex items-center gap-2"}>
+                <User size={20}/> My Clips
+            </MenuButton>
         </div>
     );
 };

frontend/src/components/Topbar.tsx

@@ -12,7 +12,7 @@ const Topbar = ({sidebarToggled, setSidebarToggled, className}: props) => {
     return (
         <div className={clsx(className)}>
             <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
-                {sidebarToggled ? <X size={24}/> : <Menu size={24}/>}
+                {sidebarToggled ? <Menu size={24}/> :  <X size={24}/>}
             </MenuButton>
         </div>
     )

frontend/src/layouts/MainLayout.tsx

@@ -8,7 +8,7 @@ const MainLayout = () => {
     const [sidebarToggled, setSidebarToggled] = useState(false);
 
     return (
-        <div className={`transition-all duration-300 grid ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} gap-4`}>
+        <div className={`transition-all duration-300 grid ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[1fr_8fr] gap-4`}>
             <Sidebar
                 className={`row-span-2 transition-all duration-300 ${sidebarToggled ? "-translate-x-full": "translate-x-0"}`}/>
             <Topbar