ADD sidebar and REFACTOR buttons

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>
-    )
-}
+    );
+};
+
+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;