Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
4.1 kB · 126 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127import { Link, useMatchRoute } from "@tanstack/react-router";import { House, LayoutDashboard, LogIn, Settings, Users, Video,} from "lucide-react";import { useTranslation } from "react-i18next";import { useSession } from "../lib/session";import { useStore } from "../lib/store";import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarSeparator,} from "./ui/sidebar";
export default function SidebarComponent() { const { t } = useTranslation("common"); const { state } = useSession(); const isAuthenticated = state.status === "authenticated"; const matchRoute = useMatchRoute();
// Active state follows the current route. Home matches exactly (the // root route is an ancestor of every page); the others match their // sub-routes too (e.g. /settings/account highlights Settings). const isHomeActive = matchRoute({ to: "/", fuzzy: false }) !== false; const isVideosActive = matchRoute({ to: "/videos", fuzzy: false }) !== false; const isDashboardActive = matchRoute({ to: "/dashboard", fuzzy: true }) !== false; const isSettingsActive = matchRoute({ to: "/settings", fuzzy: true }) !== false;
return ( <Sidebar side="left" collapsible="icon" variant="sidebar"> <SidebarHeader className="h-10" /> <SidebarContent> <SidebarGroup> <SidebarMenu> <SidebarMenuItem> <Link to="/" className="w-full"> <SidebarMenuButton tooltip={t("nav-home")} isActive={isHomeActive} > <House /> <span>{t("nav-home")}</span> </SidebarMenuButton> </Link> </SidebarMenuItem> <SidebarMenuItem> <Link to="/videos" className="w-full"> <SidebarMenuButton tooltip={t("nav-videos")} isActive={isVideosActive} > <Video /> <span>{t("nav-videos")}</span> </SidebarMenuButton> </Link> </SidebarMenuItem> <SidebarMenuItem> <SidebarMenuButton tooltip={t("nav-following")} disabled> <Users /> <span>{t("nav-following")}</span> </SidebarMenuButton> </SidebarMenuItem> {isAuthenticated && ( <SidebarMenuItem> <Link to="/dashboard" className="w-full"> <SidebarMenuButton tooltip={t("nav-dashboard", { defaultValue: "Dashboard" })} isActive={isDashboardActive} > <LayoutDashboard /> <span> {t("nav-dashboard", { defaultValue: "Dashboard" })} </span> </SidebarMenuButton> </Link> </SidebarMenuItem> )} </SidebarMenu> </SidebarGroup>
<SidebarSeparator />
<SidebarGroup> <SidebarGroupLabel>{t("nav-account")}</SidebarGroupLabel> <SidebarMenu> <SidebarMenuItem> <SidebarMenuButton tooltip={t("log-in")} onClick={() => useStore.getState().openLoginModal()} > <LogIn /> <span>{t("log-in")}</span> </SidebarMenuButton> </SidebarMenuItem> <SidebarMenuItem> <Link to="/settings" className="w-full"> <SidebarMenuButton tooltip={t("nav-settings")} isActive={isSettingsActive} > <Settings /> <span>{t("nav-settings")}</span> </SidebarMenuButton> </Link> </SidebarMenuItem> </SidebarMenu> </SidebarGroup> </SidebarContent>
<SidebarFooter></SidebarFooter> </Sidebar> );}