82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
import { Calendar, Home, Inbox, Search, Settings } from "lucide-react";
|
||
|
||
import {
|
||
Sidebar,
|
||
SidebarContent,
|
||
SidebarGroup,
|
||
SidebarGroupContent,
|
||
SidebarGroupLabel,
|
||
SidebarMenu,
|
||
SidebarMenuButton,
|
||
SidebarMenuItem,
|
||
} from "@/components/ui/sidebar";
|
||
import { ModeToggle } from "./mode-toggle";
|
||
import ToggleLanguage from "./toggle-language";
|
||
import Image from "next/image";
|
||
|
||
// Menu items.
|
||
const items = [
|
||
{
|
||
title: "Home",
|
||
url: "#",
|
||
icon: Home,
|
||
},
|
||
{
|
||
title: "Inbox",
|
||
url: "#",
|
||
icon: Inbox,
|
||
},
|
||
{
|
||
title: "Calendar",
|
||
url: "#",
|
||
icon: Calendar,
|
||
},
|
||
{
|
||
title: "Search",
|
||
url: "#",
|
||
icon: Search,
|
||
},
|
||
{
|
||
title: "Settings",
|
||
url: "#",
|
||
icon: Settings,
|
||
},
|
||
];
|
||
|
||
export function AppSidebar() {
|
||
return (
|
||
<Sidebar side="right">
|
||
<SidebarContent>
|
||
<SidebarGroup>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center">
|
||
<Image src={"/logo.png"} width={25} height={25} alt="logo" />
|
||
<h3 className="font-bold tracking-tighter leading-normal pe-2 text-lg text-parch">
|
||
پارچ کست
|
||
</h3>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<ModeToggle />
|
||
<ToggleLanguage size={"icon"} />
|
||
</div>
|
||
</div>
|
||
<SidebarGroupContent>
|
||
<SidebarMenu>
|
||
{items.map((item) => (
|
||
<SidebarMenuItem key={item.title}>
|
||
<SidebarMenuButton asChild>
|
||
<a href={item.url}>
|
||
<item.icon />
|
||
<span>{item.title}</span>
|
||
</a>
|
||
</SidebarMenuButton>
|
||
</SidebarMenuItem>
|
||
))}
|
||
</SidebarMenu>
|
||
</SidebarGroupContent>
|
||
</SidebarGroup>
|
||
</SidebarContent>
|
||
</Sidebar>
|
||
);
|
||
}
|