From 38b684c17b5f1bf39e923e92496cca093531a987 Mon Sep 17 00:00:00 2001 From: Kerem Yilmaz Date: Wed, 24 Jul 2024 05:22:16 -0700 Subject: [PATCH] Change sidebar width and make it collapsible (#637) Co-authored-by: Muhammed Salih Altun --- skyvern-frontend/public/logo-small.png | Bin 0 -> 3885 bytes skyvern-frontend/src/components/Logo.tsx | 2 +- .../src/components/LogoMinimized.tsx | 6 ++ skyvern-frontend/src/routes/root/Profile.tsx | 24 ------ .../src/routes/root/RootLayout.tsx | 69 +++++++++++++----- skyvern-frontend/src/routes/root/SideNav.tsx | 58 +++++++++------ 6 files changed, 94 insertions(+), 65 deletions(-) create mode 100644 skyvern-frontend/public/logo-small.png create mode 100644 skyvern-frontend/src/components/LogoMinimized.tsx delete mode 100644 skyvern-frontend/src/routes/root/Profile.tsx diff --git a/skyvern-frontend/public/logo-small.png b/skyvern-frontend/public/logo-small.png new file mode 100644 index 0000000000000000000000000000000000000000..6d35c105a3699d8ae242bce8cd4ab1287fce7d9e GIT binary patch literal 3885 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 vX@*wAc+@R{z@FarhPVxmsqFXv_zC; + return Logo; } export { Logo }; diff --git a/skyvern-frontend/src/components/LogoMinimized.tsx b/skyvern-frontend/src/components/LogoMinimized.tsx new file mode 100644 index 00000000..fa92bac5 --- /dev/null +++ b/skyvern-frontend/src/components/LogoMinimized.tsx @@ -0,0 +1,6 @@ +function LogoMinimized() { + const src = "/logo-small.png"; + return Minimized Logo; +} + +export { LogoMinimized }; diff --git a/skyvern-frontend/src/routes/root/Profile.tsx b/skyvern-frontend/src/routes/root/Profile.tsx deleted file mode 100644 index 21d17811..00000000 --- a/skyvern-frontend/src/routes/root/Profile.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { Button } from "@/components/ui/button"; -import { ExitIcon, PersonIcon } from "@radix-ui/react-icons"; - -type Props = { - name: string; -}; - -function Profile({ name }: Props) { - return ( -
-
- -

{name}

-
-
- -
-
- ); -} - -export { Profile }; diff --git a/skyvern-frontend/src/routes/root/RootLayout.tsx b/skyvern-frontend/src/routes/root/RootLayout.tsx index 38c054bf..b096559d 100644 --- a/skyvern-frontend/src/routes/root/RootLayout.tsx +++ b/skyvern-frontend/src/routes/root/RootLayout.tsx @@ -1,33 +1,60 @@ import { Link, Outlet } from "react-router-dom"; import { Toaster } from "@/components/ui/toaster"; import { SideNav } from "./SideNav"; -import { DiscordLogoIcon } from "@radix-ui/react-icons"; +import { + DiscordLogoIcon, + PinLeftIcon, + PinRightIcon, +} from "@radix-ui/react-icons"; import { Logo } from "@/components/Logo"; -import { Profile } from "./Profile"; -import { useContext } from "react"; -import { UserContext } from "@/store/UserContext"; import GitHubButton from "react-github-btn"; +import { useState } from "react"; +import { cn } from "@/util/utils"; +import { Button } from "@/components/ui/button"; +import { LogoMinimized } from "@/components/LogoMinimized"; function RootLayout() { - const user = useContext(UserContext); + const [sidebarCollapsed, setSidebarCollapsed] = useState(false); return ( <> -
-