From 81bd7318bba20dfbc52c6a09f23e9713d4d5fdf1 Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Wed, 28 May 2025 16:02:26 +0200
Subject: [PATCH] ADD sidebar and REFACTOR buttons

---
 frontend/src/App.tsx                          |  1 +
 frontend/src/components/Sidebar.tsx           | 27 ++++++++++++++-----
 frontend/src/components/Topbar.tsx            | 19 +++++++++++++
 .../src/components/buttons/BlueButton.tsx     | 14 ++++++++++
 .../src/components/buttons/MenuButton.tsx     | 14 ++++++++++
 frontend/src/index.css                        |  2 +-
 frontend/src/layouts/MainLayout.tsx           | 21 ++++++++++-----
 frontend/src/pages/ClipEdit.tsx               | 14 ++++------
 8 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/Topbar.tsx
 create mode 100644 frontend/src/components/buttons/BlueButton.tsx
 create mode 100644 frontend/src/components/buttons/MenuButton.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0b4ddba..7a3c0d5 100644
--- a/frontend/src/App.tsx
+++ b/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>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index fa62779..fb36178 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,9 +1,22 @@
-export default function Sidebar() {
+import { Link } from "react-router-dom";
+import clsx from "clsx";
+import MenuButton from "./buttons/MenuButton.tsx";
+
+type props = {
+    className?: string
+}
+
+const Sidebar = ({className}: props) => {
     return (
-        <div>
-            <ul>
-                <li>Create Clip</li>
-            </ul>
+        <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>
-    )
-}
\ No newline at end of file
+    );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/frontend/src/components/Topbar.tsx b/frontend/src/components/Topbar.tsx
new file mode 100644
index 0000000..80478be
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/buttons/BlueButton.tsx b/frontend/src/components/buttons/BlueButton.tsx
new file mode 100644
index 0000000..9925337
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/buttons/MenuButton.tsx b/frontend/src/components/buttons/MenuButton.tsx
new file mode 100644
index 0000000..2fe2bb7
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec3fb91..18989d4 100644
--- a/frontend/src/index.css
+++ b/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);
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index b63bc35..507232a 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/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 = () => (
-    <div className="flex">
-        <Sidebar />
-        <div className="flex-1 p-4">
-            <Outlet /> {/* This renders the nested route content */}
+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="flex-1 p-4">
+                <Outlet/> {/* This renders the nested route content */}
+            </div>
         </div>
-    </div>
-);
+    )
+};
 
 export default MainLayout;
\ No newline at end of file
diff --git a/frontend/src/pages/ClipEdit.tsx b/frontend/src/pages/ClipEdit.tsx
index b5239ae..c91c814 100644
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/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
-                    className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
+                <BlueButton
                     onClick={sendData}>
                     Export
-                </button>
+                </BlueButton>
 
                 { downloadable ?
-                    (<button
-                        className={"bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed h-10"}
+                    (<BlueButton
                         onClick={() => handleDownload(id)}>
                         Download
-                    </button>)
+                    </BlueButton>)
                     :(
                     <progress
                         value={progress}