From d3dce9ec25f4372b17cce423b235902f4ab90ed5 Mon Sep 17 00:00:00 2001
From: ThisBirchWood <dylanseandefaoite@gmail.com>
Date: Tue, 24 Jun 2025 20:37:21 +0200
Subject: [PATCH] ADD user prop to Sidebar and conditionally render My Clips
 button

---
 frontend/src/components/Sidebar.tsx | 16 ++++++++++------
 frontend/src/layouts/MainLayout.tsx |  1 +
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index dcfdb47..4e6e272 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/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
-                url={"/my-clips"}
-                logo={<Film size={20}/>}
-                label={"My Clips"}
-            />
+            { user && (
+                <SidebarButton
+                    url={"/my-clips"}
+                    logo={<Film size={20}/>}
+                    label={"My Clips"}
+                />
+                )}
         </Box>
     );
 };
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index aca598e..0c24458 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/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"