ADD sidebar and REFACTOR buttons

frontend/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
         <Router>
             <Routes>
                 <Route element={<MainLayout />}>
+                    <Route path="/" element={<h1>Main Page</h1>} />
                     <Route path="/create" element={<ClipUpload />} />
                     <Route path="/create/:id" element={<ClipEdit />} />
                 </Route>

frontend/src/components/Sidebar.tsx

@@ -1,9 +1,22 @@
-export default function Sidebar() {
+import { Link } from "react-router-dom";
-    return (
+import clsx from "clsx";
-        <div>
+import MenuButton from "./buttons/MenuButton.tsx";
-            <ul>
+
-                <li>Create Clip</li>
+type props = {
-            </ul>
+    className?: string
-        </div>
-    )
 }
+
+const Sidebar = ({className}: props) => {
+    return (
+        <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>
+            </Link>
+        </div>
+    );
+};
+
+export default Sidebar;

frontend/src/components/Topbar.tsx

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

frontend/src/components/buttons/BlueButton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const BlueButton: React.FC<Props> = ({ className = "", ...props }) => {
+  return (
+    <button
+      className={`bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
+      {...props}
+    />
+  );
+};
+
+export default BlueButton;

frontend/src/components/buttons/MenuButton.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
+    return (
+        <button
+            className={`text-gray-800 text-base px-3 py-2 rounded-lg hover:bg-gray-100 hover:text-black transition-colors duration-200 ${className}`}
+            {...props}
+        />
+    );
+};
+
+export default MenuButton;

frontend/src/index.css

@@ -13,7 +13,7 @@
     --color-text: oklch(0.17 0.01 270);       /* Dark Slate (#111827) */
     --color-background: oklch(0.98 0.005 250);/* Soft off-white (#F9FAFB) */
 
-    --color-primary-pressed: oklch(0.55 0.21 254 / 0.5);
+    --color-primary-pressed: oklch(0.45 0.21 254);
 
     /* Easing */
     --ease-fluid: cubic-bezier(0.3, 0, 0, 1);

frontend/src/layouts/MainLayout.tsx

@@ -1,14 +1,21 @@
 // layout/MainLayout.jsx
 import Sidebar from '../components/Sidebar'
+import Topbar from '../components/Topbar'
 import { Outlet } from 'react-router-dom';
+import {useState} from "react";
 
-const MainLayout = () => (
+const MainLayout = () => {
-    <div className="flex">
+    const [sidebarToggled, setSidebarToggled] = useState(false);
-        <Sidebar />
+
+    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="flex-1 p-4">
-            <Outlet /> {/* This renders the nested route content */}
+                <Outlet/> {/* This renders the nested route content */}
             </div>
         </div>
-);
+    )
+};
 
 export default MainLayout;

frontend/src/pages/ClipEdit.tsx

@@ -6,15 +6,14 @@ import ClipRangeSlider from "./../components/ClipRangeSlider";
 import ClipConfig from "./../components/ClipConfig";
 import {editFile, getMetadata, processFile, getProgress} from "../utils/Endpoints"
 import type { VideoMetadata } from "../utils/types.ts";
+import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const ClipEdit = () => {
     const { id } = useParams();
     const videoRef = useRef<HTMLVideoElement | null>(null);
     const videoUrl = `/api/v1/download/input/${id}`
-
     const [metadata, setMetadata] = useState<VideoMetadata | null>(null);
     const [playbackValue, setPlaybackValue] = useState(0);
-
     const [outputMetadata, setOutputMetadata] = useState<VideoMetadata>({
         // default values
         startPoint: 0,
@@ -24,7 +23,6 @@ const ClipEdit = () => {
         fps: 30,
         fileSize: 10000
     });
-
     const [progress, setProgress] = useState(0);
     const [downloadable, setDownloadable] = useState(false);
 
@@ -125,18 +123,16 @@ const ClipEdit = () => {
                 </div>}
 
             <div className={"flex flex-col gap-2 w-4/5 m-auto"}>
-                <button
+                <BlueButton
-                    className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
                     onClick={sendData}>
                     Export
-                </button>
+                </BlueButton>
 
                 { downloadable ?
-                    (<button
+                    (<BlueButton
-                        className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
                         onClick={() => handleDownload(id)}>
                         Download
-                    </button>)
+                    </BlueButton>)
                     :(
                     <progress
                         value={progress}