ADD user prop to Sidebar and conditionally render My Clips button

frontend/src/components/Sidebar.tsx

@@ -2,12 +2,14 @@ import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
 import { Plus, Film, Home } from 'lucide-react';
 import Box from "./Box.tsx";
+import type {User} from "../utils/types.ts";
 
 type props = {
+    user: User | null;
     className?: string
 }
 
-const Sidebar = ({className}: props) => {
+const Sidebar = ({user, className}: props) => {
     return (
         <Box className={clsx("h-screen flex flex-col mr-5", className)}>
             <img
@@ -27,11 +29,13 @@ const Sidebar = ({className}: props) => {
                 label={"Create Clip"}
             />
 
-            <SidebarButton
+            { user && (
-                url={"/my-clips"}
+                <SidebarButton
-                logo={<Film size={20}/>}
+                    url={"/my-clips"}
-                label={"My Clips"}
+                    logo={<Film size={20}/>}
-            />
+                    label={"My Clips"}
+                />
+                )}
         </Box>
     );
 };

frontend/src/layouts/MainLayout.tsx

@@ -26,6 +26,7 @@ const MainLayout = () => {
     return (
         <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
+                user={user}
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
             <Topbar
                 className="transition-all duration-300"