forked from 77media/video-flow
123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
Home,
|
|
FolderOpen,
|
|
Users,
|
|
Type,
|
|
Image,
|
|
History,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Video,
|
|
} from 'lucide-react';
|
|
|
|
interface SidebarProps {
|
|
collapsed: boolean;
|
|
onToggle: (collapsed: boolean) => void;
|
|
}
|
|
|
|
const navigationItems = [
|
|
{
|
|
title: 'Main',
|
|
items: [
|
|
{ name: 'Home', href: '/', icon: Home },
|
|
{ name: 'Media Library', href: '/media', icon: FolderOpen },
|
|
{ name: 'Actors Library', href: '/actors', icon: Users },
|
|
],
|
|
},
|
|
{
|
|
title: 'Plugins',
|
|
items: [
|
|
{ name: 'Text to Clip', href: '/plugins/text-to-clip', icon: Type },
|
|
{ name: 'Text to Image', href: '/plugins/text-to-image', icon: Image },
|
|
],
|
|
},
|
|
{
|
|
title: 'History',
|
|
items: [
|
|
{ name: 'Task History', href: '/history', icon: History },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function Sidebar({ collapsed, onToggle }: SidebarProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'fixed left-0 top-0 z-50 h-full transition-all duration-300',
|
|
collapsed ? 'w-16' : 'w-64'
|
|
)}
|
|
>
|
|
<div className="flex h-full flex-col">
|
|
{/* Logo */}
|
|
<div className="flex h-16 items-center justify-between px-4 border-border">
|
|
{!collapsed && (
|
|
<div className="flex items-center space-x-2">
|
|
<Video className="h-8 w-8 text-primary" />
|
|
<span className="text-xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
|
|
Movie Flow
|
|
</span>
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onToggle(!collapsed)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
{collapsed ? (
|
|
<ChevronRight className="h-4 w-4" />
|
|
) : (
|
|
<ChevronLeft className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="flex-1 overflow-y-auto py-4">
|
|
{navigationItems.map((section, index) => (
|
|
<div key={section.title} className="px-3 py-2">
|
|
{!collapsed && (
|
|
<h2 className="mb-2 px-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{section.title}
|
|
</h2>
|
|
)}
|
|
<div className="space-y-1">
|
|
{section.items.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link key={item.name} href={item.href}>
|
|
<Button
|
|
variant={isActive ? 'secondary' : 'ghost'}
|
|
className={cn(
|
|
'w-full justify-start',
|
|
collapsed ? 'px-2' : 'px-4',
|
|
isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
|
|
)}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
{!collapsed && <span className="ml-2">{item.name}</span>}
|
|
</Button>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
{index < navigationItems.length - 1 && (
|
|
<Separator className="mt-4" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |