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;