ADD transition to sidebar

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import clsx from "clsx";
 import MenuButton from "./buttons/MenuButton.tsx";
+import { Cross } from 'lucide-react';
 
 type props = {
     className?: string
@@ -11,8 +12,8 @@ const Sidebar = ({className}: props) => {
         <div className={clsx("w-64 h-screen bg-white shadow-sm border-r px-4 py-6 flex flex-col gap-2", className)}>
             <Link
                 to="/create">
-                <MenuButton>
-                    ➕ Create Clip
+                <MenuButton className={"flex items-center gap-2"}>
+                    <Cross size={20}/> Create Clip
                 </MenuButton>
             </Link>
         </div>

frontend/src/components/Topbar.tsx

@@ -1,14 +1,16 @@
 import { Menu, X} from 'lucide-react';
 import MenuButton from "./buttons/MenuButton.tsx";
+import clsx from "clsx";
 
 type props = {
     sidebarToggled: boolean,
     setSidebarToggled: Function
+    className?: string;
 }
 
-const Topbar = ({sidebarToggled, setSidebarToggled}: props) => {
+const Topbar = ({sidebarToggled, setSidebarToggled, className}: props) => {
     return (
-        <div>
+        <div className={clsx(className)}>
             <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
                 {sidebarToggled ? <X size={24}/> : <Menu size={24}/>}
             </MenuButton>

frontend/src/layouts/MainLayout.tsx

@@ -8,9 +8,13 @@ const MainLayout = () => {
     const [sidebarToggled, setSidebarToggled] = useState(false);
 
     return (
-        <div className="grid grid-cols-[1fr_5fr] min-h-screen">
-            <Sidebar className={`row-span-2 transition ${sidebarToggled ? 'hidden' : ''}`}/>
-            <Topbar sidebarToggled={sidebarToggled} setSidebarToggled={setSidebarToggled}/>
+        <div className={`transition-all duration-300 grid ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} gap-4`}>
+            <Sidebar
+                className={`row-span-2 transition-all duration-300 ${sidebarToggled ? "-translate-x-full": "translate-x-0"}`}/>
+            <Topbar
+                className={"transition-all duration-300"}
+                sidebarToggled={sidebarToggled}
+                setSidebarToggled={setSidebarToggled}/>
             <div className="flex-1 p-4">
                 <Outlet/> {/* This renders the nested route content */}
             </div>