149 lines
3.5 KiB
TypeScript
149 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================================
|
||
// Application Sidebar
|
||
// ============================================================================
|
||
|
||
import * as React from "react";
|
||
import {
|
||
BarChart3,
|
||
Folder,
|
||
LayoutDashboard,
|
||
Megaphone,
|
||
ShoppingCart,
|
||
TrendingUp,
|
||
Settings2,
|
||
ExternalLink,
|
||
} from "lucide-react";
|
||
|
||
import { NavMain } from "@/components/nav-main";
|
||
import { NavUser } from "@/components/nav-user";
|
||
import {
|
||
Sidebar,
|
||
SidebarContent,
|
||
SidebarFooter,
|
||
SidebarHeader,
|
||
SidebarRail,
|
||
} from "@/components/ui/sidebar";
|
||
import { useAuth } from "@/components/auth/auth-provider";
|
||
|
||
const data = {
|
||
navMain: [
|
||
{
|
||
title: "Главная",
|
||
url: "/",
|
||
icon: LayoutDashboard,
|
||
isActive: true,
|
||
},
|
||
{
|
||
title: "Внешние каналы",
|
||
url: "/external-channels",
|
||
icon: ExternalLink,
|
||
items: [
|
||
{
|
||
title: "Каталог",
|
||
url: "/external-channels",
|
||
},
|
||
{
|
||
title: "Импорт",
|
||
url: "/external-channels/import",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Креативы",
|
||
url: "/creatives",
|
||
icon: Folder,
|
||
items: [
|
||
{
|
||
title: "Все креативы",
|
||
url: "/creatives",
|
||
},
|
||
{
|
||
title: "Создать",
|
||
url: "/creatives/new",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Закупы",
|
||
url: "/purchases",
|
||
icon: ShoppingCart,
|
||
items: [
|
||
{
|
||
title: "Все закупы",
|
||
url: "/purchases",
|
||
},
|
||
{
|
||
title: "Создать",
|
||
url: "/purchases/new",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Аналитика",
|
||
url: "/analytics",
|
||
icon: BarChart3,
|
||
items: [
|
||
{
|
||
title: "Обзор",
|
||
url: "/analytics",
|
||
},
|
||
{
|
||
title: "Затраты",
|
||
url: "/analytics/costs",
|
||
},
|
||
{
|
||
title: "По каналам",
|
||
url: "/analytics/channels",
|
||
},
|
||
{
|
||
title: "По креативам",
|
||
url: "/analytics/creatives",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
||
const { user } = useAuth();
|
||
|
||
return (
|
||
<Sidebar collapsible="icon" {...props}>
|
||
<SidebarHeader>
|
||
<div className="flex items-center gap-2 px-2 py-2">
|
||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||
<Megaphone className="h-4 w-4" />
|
||
</div>
|
||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||
<span className="truncate font-semibold">TGEX</span>
|
||
<span className="truncate text-xs text-muted-foreground">
|
||
Управление закупками
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</SidebarHeader>
|
||
<SidebarContent>
|
||
<NavMain items={data.navMain} />
|
||
</SidebarContent>
|
||
<SidebarFooter>
|
||
{user && (
|
||
<NavUser
|
||
user={{
|
||
name: user.username || `User ${user.telegram_id}`,
|
||
email: user.username
|
||
? `@${user.username}`
|
||
: `ID: ${user.telegram_id}`,
|
||
avatar: user.username
|
||
? `https://ui-avatars.com/api/?name=${user.username}`
|
||
: `https://ui-avatars.com/api/?name=User`,
|
||
}}
|
||
/>
|
||
)}
|
||
</SidebarFooter>
|
||
<SidebarRail />
|
||
</Sidebar>
|
||
);
|
||
}
|