dylan/vod-system
1
1
Fork 0
Code Issues 16 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

update sidebar with new styling
All checks were successful
CI / Maven unit tests (push) Successful in 13s
Details
CI / Build and push images (push) Has been skipped
Details
CI / Deploy to server (push) Has been skipped
Details

Browse Source
This commit is contained in:
Dylan De Faoite
2026-08-15 18:09:11 +01:00
parent 13c6b1e8cf
commit 34d2265fe7
6 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/Sidebar.tsx
View File

@@ -8,43 +8,43 @@ type props = {
className?: string
}
const Divider = () => <hr className="my-1.5 mx-2 border-gray-100" />;
const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
const Sidebar = ({user, className}: props) => {
return (
<aside className={clsx("h-screen flex flex-col bg-white border-r border-gray-200", className)}>
<div className="px-4 pt-5 pb-3">
<img
className="w-36 mx-auto"
src="../../public/logo.png"
alt="VoD System Logo"
/>
</div>
<nav className="flex flex-col flex-1 px-2 pb-4">
<div className="flex flex-col gap-0.5">
<aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
<h2 className={"font-heading text-3xl"}>The VoD System</h2>
<nav className="flex flex-col flex-1 items-center w-3/4">
<Divider />
<div className="flex flex-col gap-0.5 w-full">
<SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
<SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
</div>
<Divider />
{user && (
<>
<Divider />
<div className="flex flex-col gap-0.5">
<SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
<SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
<SidebarButton url="/my-vods" logo={<Video size={18}/>} label="VoDs" />
<div className="flex flex-col gap-0.5 w-full">
<div>
<SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
<SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
<SidebarButton url="/my-vods" logo={<Video size={18}/>} label="VoDs" />
</div>
</div>
</>
)}
<div className="flex-1" />
{user && (
<>
<Divider />
<SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
</>
)}
<div className={"w-full"}>
{user && (
<>
<Divider />
<SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
</>
)}
</div>
</nav>
</aside>
);

14
frontend/src/components/buttons/SidebarButton.tsx
View File

@@ -1,5 +1,5 @@
import MenuButton from "./MenuButton.tsx";
import { Link, useLocation } from "react-router-dom";
import React from "react";
type Props = {
url: string;
@@ -13,11 +13,17 @@ const SidebarButton = ({url, logo, label}: Props) => {
return (
<Link className="w-full" to={url}>
<MenuButton className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm font-medium rounded-md ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-600"}`}>
<button className={`flex items-center gap-2.5 w-full text-sm
font-body p-2 hover:bg-hover hover:text-text-strong
rounded-md
${isActive ?
"bg-card text-text-strong font-medium shadow-sm"
:
"text-text-primary"}`}>
{logo}{label}
</MenuButton>
</button>
</Link>
)
}
export default SidebarButton;
export default SidebarButton;