vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Change sidebar width and make it collapsible (#637)

Browse Source 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Kerem Yilmaz
2024-07-24 05:22:16 -07:00
committed by GitHub
parent 80b0bf6bef
commit 38b684c17b
6 changed files with 94 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
skyvern-frontend/src/routes/root/SideNav.tsx
View File

@@ -7,52 +7,68 @@ import {
} from "@radix-ui/react-icons";
import { NavLink } from "react-router-dom";
function SideNav() {
type Props = {
collapsed: boolean;
};
function SideNav({ collapsed }: Props) {
return (
<nav className="space-y-2">
<NavLink
to="create"
className={({ isActive }) => {
return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
"bg-muted": isActive,
});
return cn(
"flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
{
"bg-muted": isActive,
},
);
}}
>
<PlusCircledIcon className="mr-4 h-6 w-6" />
<span className="text-lg">Create</span>
<PlusCircledIcon className="h-6 w-6" />
{!collapsed && <span className="text-lg">Create</span>}
</NavLink>
<NavLink
to="tasks"
className={({ isActive }) => {
return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
"bg-muted": isActive,
});
return cn(
"flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
{
"bg-muted": isActive,
},
);
}}
>
<ListBulletIcon className="mr-4 h-6 w-6" />
<span className="text-lg">Tasks</span>
<ListBulletIcon className="h-6 w-6" />
{!collapsed && <span className="text-lg">Tasks</span>}
</NavLink>
<NavLink
to="workflows"
className={({ isActive }) => {
return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
"bg-muted": isActive,
});
return cn(
"flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
{
"bg-muted": isActive,
},
);
}}
>
<LightningBoltIcon className="mr-4 h-6 w-6" />
<span className="text-lg">Workflows (Beta)</span>
<LightningBoltIcon className="h-6 w-6" />
{!collapsed && <span className="text-lg">Workflows</span>}
</NavLink>
<NavLink
to="settings"
className={({ isActive }) => {
return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
"bg-muted": isActive,
});
return cn(
"flex h-[3.25rem] items-center gap-4 rounded-2xl px-5 hover:bg-muted",
{
"bg-muted": isActive,
},
);
}}
>
<GearIcon className="mr-4 h-6 w-6" />
<span className="text-lg">Settings</span>
<GearIcon className="h-6 w-6" />
{!collapsed && <span className="text-lg">Settings</span>}
</NavLink>
</nav>
);