Sidebar 10

import { AppSidebar } from "@/components/app-sidebar";
import { NavActions } from "@/components/nav-actions";
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import {
	SidebarInset,
	SidebarProvider,
	SidebarTrigger,
} from "@/components/ui/sidebar";

export default function Page() {
	return (
		<SidebarProvider>
			<AppSidebar />
			<SidebarInset>
				<header className="flex h-14 shrink-0 items-center gap-2">
					<div className="flex flex-1 items-center gap-2 px-3">
						<SidebarTrigger />
						<Separator
							orientation="vertical"
							className="mr-2 data-vertical:h-4 data-vertical:self-auto"
						/>
						<Breadcrumb>
							<BreadcrumbList>
								<BreadcrumbItem>
									<BreadcrumbPage className="line-clamp-1">
										Project Management & Task Tracking
									</BreadcrumbPage>
								</BreadcrumbItem>
							</BreadcrumbList>
						</Breadcrumb>
					</div>
					<div className="ml-auto px-3">
						<NavActions />
					</div>
				</header>
				<div className="flex flex-1 flex-col gap-4 px-4 py-10">
					<div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
					<div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
				</div>
			</SidebarInset>
		</SidebarProvider>
	);
}

"use client";

import {
	AudioLinesIcon,
	BlocksIcon,
	CalendarIcon,
	HomeIcon,
	InboxIcon,
	MessageCircleQuestionIcon,
	SearchIcon,
	Settings2Icon,
	SparklesIcon,
	TerminalIcon,
	Trash2Icon,
} from "lucide-react";

import type * as React from "react";

import { NavFavorites } from "@/components/nav-favorites";
import { NavMain } from "@/components/nav-main";
import { NavSecondary } from "@/components/nav-secondary";
import { NavWorkspaces } from "@/components/nav-workspaces";
import { TeamSwitcher } from "@/components/team-switcher";
import {
	Sidebar,
	SidebarContent,
	SidebarHeader,
	SidebarRail,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
	teams: [
		{
			name: "Acme Inc",
			logo: <TerminalIcon />,
			plan: "Enterprise",
		},
		{
			name: "Acme Corp.",
			logo: <AudioLinesIcon />,
			plan: "Startup",
		},
		{
			name: "Evil Corp.",
			logo: <TerminalIcon />,
			plan: "Free",
		},
	],
	navMain: [
		{
			title: "Search",
			url: "#",
			icon: <SearchIcon />,
		},
		{
			title: "Ask AI",
			url: "#",
			icon: <SparklesIcon />,
		},
		{
			title: "Home",
			url: "#",
			icon: <HomeIcon />,
			isActive: true,
		},
		{
			title: "Inbox",
			url: "#",
			icon: <InboxIcon />,
			badge: "10",
		},
	],
	navSecondary: [
		{
			title: "Calendar",
			url: "#",
			icon: <CalendarIcon />,
		},
		{
			title: "Settings",
			url: "#",
			icon: <Settings2Icon />,
		},
		{
			title: "Templates",
			url: "#",
			icon: <BlocksIcon />,
		},
		{
			title: "Trash",
			url: "#",
			icon: <Trash2Icon />,
		},
		{
			title: "Help",
			url: "#",
			icon: <MessageCircleQuestionIcon />,
		},
	],
	favorites: [
		{
			name: "Project Management & Task Tracking",
			url: "#",
			emoji: "📊",
		},
		{
			name: "Family Recipe Collection & Meal Planning",
			url: "#",
			emoji: "🍳",
		},
		{
			name: "Fitness Tracker & Workout Routines",
			url: "#",
			emoji: "💪",
		},
		{
			name: "Book Notes & Reading List",
			url: "#",
			emoji: "📚",
		},
		{
			name: "Sustainable Gardening Tips & Plant Care",
			url: "#",
			emoji: "🌱",
		},
		{
			name: "Language Learning Progress & Resources",
			url: "#",
			emoji: "🗣️",
		},
		{
			name: "Home Renovation Ideas & Budget Tracker",
			url: "#",
			emoji: "🏠",
		},
		{
			name: "Personal Finance & Investment Portfolio",
			url: "#",
			emoji: "💰",
		},
		{
			name: "Movie & TV Show Watchlist with Reviews",
			url: "#",
			emoji: "🎬",
		},
		{
			name: "Daily Habit Tracker & Goal Setting",
			url: "#",
			emoji: "✅",
		},
	],
	workspaces: [
		{
			name: "Personal Life Management",
			emoji: "🏠",
			pages: [
				{
					name: "Daily Journal & Reflection",
					url: "#",
					emoji: "📔",
				},
				{
					name: "Health & Wellness Tracker",
					url: "#",
					emoji: "🍏",
				},
				{
					name: "Personal Growth & Learning Goals",
					url: "#",
					emoji: "🌟",
				},
			],
		},
		{
			name: "Professional Development",
			emoji: "💼",
			pages: [
				{
					name: "Career Objectives & Milestones",
					url: "#",
					emoji: "🎯",
				},
				{
					name: "Skill Acquisition & Training Log",
					url: "#",
					emoji: "🧠",
				},
				{
					name: "Networking Contacts & Events",
					url: "#",
					emoji: "🤝",
				},
			],
		},
		{
			name: "Creative Projects",
			emoji: "🎨",
			pages: [
				{
					name: "Writing Ideas & Story Outlines",
					url: "#",
					emoji: "✍️",
				},
				{
					name: "Art & Design Portfolio",
					url: "#",
					emoji: "🖼️",
				},
				{
					name: "Music Composition & Practice Log",
					url: "#",
					emoji: "🎵",
				},
			],
		},
		{
			name: "Home Management",
			emoji: "🏡",
			pages: [
				{
					name: "Household Budget & Expense Tracking",
					url: "#",
					emoji: "💰",
				},
				{
					name: "Home Maintenance Schedule & Tasks",
					url: "#",
					emoji: "🔧",
				},
				{
					name: "Family Calendar & Event Planning",
					url: "#",
					emoji: "📅",
				},
			],
		},
		{
			name: "Travel & Adventure",
			emoji: "🧳",
			pages: [
				{
					name: "Trip Planning & Itineraries",
					url: "#",
					emoji: "🗺️",
				},
				{
					name: "Travel Bucket List & Inspiration",
					url: "#",
					emoji: "🌎",
				},
				{
					name: "Travel Journal & Photo Gallery",
					url: "#",
					emoji: "📸",
				},
			],
		},
	],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
	return (
		<Sidebar className="border-r-0" {...props}>
			<SidebarHeader>
				<TeamSwitcher teams={data.teams} />
				<NavMain items={data.navMain} />
			</SidebarHeader>
			<SidebarContent>
				<NavFavorites favorites={data.favorites} />
				<NavWorkspaces workspaces={data.workspaces} />
				<NavSecondary items={data.navSecondary} className="mt-auto" />
			</SidebarContent>
			<SidebarRail />
		</Sidebar>
	);
}

"use client";

import {
	ArrowDownIcon,
	ArrowUpIcon,
	BellIcon,
	ChartLineIcon,
	CopyIcon,
	CornerUpLeftIcon,
	CornerUpRightIcon,
	FileTextIcon,
	GalleryVerticalEndIcon,
	LinkIcon,
	MoreHorizontalIcon,
	Settings2Icon,
	StarIcon,
	Trash2Icon,
	TrashIcon,
} from "lucide-react";

import * as React from "react";

import { Button } from "@/components/ui/button";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import {
	Sidebar,
	SidebarContent,
	SidebarGroup,
	SidebarGroupContent,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

const data = [
	[
		{
			label: "Customize Page",
			icon: <Settings2Icon />,
		},
		{
			label: "Turn into wiki",
			icon: <FileTextIcon />,
		},
	],
	[
		{
			label: "Copy Link",
			icon: <LinkIcon />,
		},
		{
			label: "Duplicate",
			icon: <CopyIcon />,
		},
		{
			label: "Move to",
			icon: <CornerUpRightIcon />,
		},
		{
			label: "Move to Trash",
			icon: <Trash2Icon />,
		},
	],
	[
		{
			label: "Undo",
			icon: <CornerUpLeftIcon />,
		},
		{
			label: "View analytics",
			icon: <ChartLineIcon />,
		},
		{
			label: "Version History",
			icon: <GalleryVerticalEndIcon />,
		},
		{
			label: "Show delete pages",
			icon: <TrashIcon />,
		},
		{
			label: "Notifications",
			icon: <BellIcon />,
		},
	],
	[
		{
			label: "Import",
			icon: <ArrowUpIcon />,
		},
		{
			label: "Export",
			icon: <ArrowDownIcon />,
		},
	],
];
export function NavActions() {
	const [isOpen, setIsOpen] = React.useState(false);
	React.useEffect(() => {
		setIsOpen(true);
	}, []);
	return (
		<div className="flex items-center gap-2 text-sm">
			<div className="hidden font-medium text-muted-foreground md:inline-block">
				Edit Oct 08
			</div>
			<Button variant="ghost" size="icon" className="h-7 w-7">
				<StarIcon />
			</Button>
			<Popover open={isOpen} onOpenChange={setIsOpen}>
				<PopoverTrigger
					render={
						<Button
							variant="ghost"
							size="icon"
							className="h-7 w-7 data-open:bg-accent"
						/>
					}
				>
					<MoreHorizontalIcon />
				</PopoverTrigger>
				<PopoverContent
					className="w-56 overflow-hidden rounded-lg p-0"
					align="end"
				>
					<Sidebar collapsible="none" className="bg-transparent">
						<SidebarContent>
							{data.map((group, index) => (
								<SidebarGroup key={index} className="border-b last:border-none">
									<SidebarGroupContent className="gap-0">
										<SidebarMenu>
											{group.map((item, index) => (
												<SidebarMenuItem key={index}>
													<SidebarMenuButton>
														{item.icon} <span>{item.label}</span>
													</SidebarMenuButton>
												</SidebarMenuItem>
											))}
										</SidebarMenu>
									</SidebarGroupContent>
								</SidebarGroup>
							))}
						</SidebarContent>
					</Sidebar>
				</PopoverContent>
			</Popover>
		</div>
	);
}

"use client";

import {
	ArrowUpRightIcon,
	LinkIcon,
	MoreHorizontalIcon,
	StarOffIcon,
	Trash2Icon,
} from "lucide-react";

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	SidebarGroup,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuButton,
	SidebarMenuItem,
	useSidebar,
} from "@/components/ui/sidebar";

export function NavFavorites({
	favorites,
}: {
	favorites: {
		name: string;
		url: string;
		emoji: string;
	}[];
}) {
	const { isMobile } = useSidebar();
	return (
		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
			<SidebarGroupLabel>Favorites</SidebarGroupLabel>
			<SidebarMenu>
				{favorites.map((item) => (
					<SidebarMenuItem key={item.name}>
						<SidebarMenuButton render={<a href={item.url} title={item.name} />}>
							<span>{item.emoji}</span>
							<span>{item.name}</span>
						</SidebarMenuButton>
						<DropdownMenu>
							<DropdownMenuTrigger
								render={
									<SidebarMenuAction
										showOnHover
										className="aria-expanded:bg-muted"
									/>
								}
							>
								<MoreHorizontalIcon />
								<span className="sr-only">More</span>
							</DropdownMenuTrigger>
							<DropdownMenuContent
								side={isMobile ? "bottom" : "right"}
								align={isMobile ? "end" : "start"}
							>
								<DropdownMenuGroup>
									<DropdownMenuItem>
										<StarOffIcon className="text-muted-foreground" />
										<span>Remove from Favorites</span>
									</DropdownMenuItem>
								</DropdownMenuGroup>
								<DropdownMenuSeparator />
								<DropdownMenuGroup>
									<DropdownMenuItem>
										<LinkIcon className="text-muted-foreground" />
										<span>Copy Link</span>
									</DropdownMenuItem>
									<DropdownMenuItem>
										<ArrowUpRightIcon className="text-muted-foreground" />
										<span>Open in New Tab</span>
									</DropdownMenuItem>
									<DropdownMenuSeparator />
									<DropdownMenuItem variant="destructive">
										<Trash2Icon className="text-muted-foreground" />
										<span>Delete</span>
									</DropdownMenuItem>
								</DropdownMenuGroup>
							</DropdownMenuContent>
						</DropdownMenu>
					</SidebarMenuItem>
				))}
				<SidebarMenuItem>
					<SidebarMenuButton className="text-sidebar-foreground/70">
						<MoreHorizontalIcon />
						<span>More</span>
					</SidebarMenuButton>
				</SidebarMenuItem>
			</SidebarMenu>
		</SidebarGroup>
	);
}

"use client";

import {
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavMain({
	items,
}: {
	items: {
		title: string;
		url: string;
		icon: React.ReactNode;
		isActive?: boolean;
	}[];
}) {
	return (
		<SidebarMenu>
			{items.map((item) => (
				<SidebarMenuItem key={item.title}>
					<SidebarMenuButton
						isActive={item.isActive}
						render={<a href={item.url} />}
					>
						{item.icon}
						<span>{item.title}</span>
					</SidebarMenuButton>
				</SidebarMenuItem>
			))}
		</SidebarMenu>
	);
}

"use client";

import type React from "react";

import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarMenu,
	SidebarMenuBadge,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavSecondary({
	items,
	...props
}: {
	items: {
		title: string;
		url: string;
		icon: React.ReactNode;
		badge?: React.ReactNode;
	}[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
	return (
		<SidebarGroup {...props}>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<SidebarMenuItem key={item.title}>
							<SidebarMenuButton render={<a href={item.url} />}>
								{item.icon}
								<span>{item.title}</span>
							</SidebarMenuButton>
							{item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
						</SidebarMenuItem>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}

"use client";

import { ChevronRightIcon, MoreHorizontalIcon, PlusIcon } from "lucide-react";

import {
	Collapsible,
	CollapsibleContent,
	CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarGroupLabel,
	SidebarMenu,
	SidebarMenuAction,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarMenuSub,
	SidebarMenuSubButton,
	SidebarMenuSubItem,
} from "@/components/ui/sidebar";

export function NavWorkspaces({
	workspaces,
}: {
	workspaces: {
		name: string;
		emoji: React.ReactNode;
		pages: {
			name: string;
			emoji: React.ReactNode;
		}[];
	}[];
}) {
	return (
		<SidebarGroup>
			<SidebarGroupLabel>Workspaces</SidebarGroupLabel>
			<SidebarGroupContent>
				<SidebarMenu>
					{workspaces.map((workspace) => (
						<Collapsible key={workspace.name}>
							<SidebarMenuItem>
								<SidebarMenuButton render={<a href="#" />}>
									<span>{workspace.emoji}</span>
									<span>{workspace.name}</span>
								</SidebarMenuButton>
								<SidebarMenuAction
									render={<CollapsibleTrigger />}
									className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90"
									showOnHover
								>
									<ChevronRightIcon />
								</SidebarMenuAction>
								<SidebarMenuAction showOnHover>
									<PlusIcon />
								</SidebarMenuAction>
								<CollapsibleContent>
									<SidebarMenuSub>
										{workspace.pages.map((page) => (
											<SidebarMenuSubItem key={page.name}>
												<SidebarMenuSubButton render={<a href="#" />}>
													<span>{page.emoji}</span>
													<span>{page.name}</span>
												</SidebarMenuSubButton>
											</SidebarMenuSubItem>
										))}
									</SidebarMenuSub>
								</CollapsibleContent>
							</SidebarMenuItem>
						</Collapsible>
					))}
					<SidebarMenuItem>
						<SidebarMenuButton className="text-sidebar-foreground/70">
							<MoreHorizontalIcon />
							<span>More</span>
						</SidebarMenuButton>
					</SidebarMenuItem>
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}

"use client";

import { ChevronDownIcon, PlusIcon } from "lucide-react";

import * as React from "react";

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuShortcut,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from "@/components/ui/sidebar";

export function TeamSwitcher({
	teams,
}: {
	teams: {
		name: string;
		logo: React.ReactNode;
		plan: string;
	}[];
}) {
	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
	if (!activeTeam) {
		return null;
	}
	return (
		<SidebarMenu>
			<SidebarMenuItem>
				<DropdownMenu>
					<DropdownMenuTrigger
						render={<SidebarMenuButton className="w-fit px-1.5" />}
					>
						<div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
							{activeTeam.logo}
						</div>
						<span className="truncate font-medium">{activeTeam.name}</span>
						<ChevronDownIcon className="opacity-50" />
					</DropdownMenuTrigger>
					<DropdownMenuContent align="start" side="bottom" sideOffset={4}>
						<DropdownMenuGroup>
							<DropdownMenuLabel className="text-muted-foreground text-xs">
								Teams
							</DropdownMenuLabel>
							{teams.map((team, index) => (
								<DropdownMenuItem
									key={team.name}
									onClick={() => setActiveTeam(team)}
									className="gap-2 p-2"
								>
									<div className="flex size-6 items-center justify-center rounded-xs border">
										{team.logo}
									</div>
									{team.name}
									<DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
								</DropdownMenuItem>
							))}
						</DropdownMenuGroup>
						<DropdownMenuSeparator />
						<DropdownMenuGroup>
							<DropdownMenuItem className="gap-2 p-2">
								<div className="flex size-6 items-center justify-center rounded-md border bg-background">
									<PlusIcon className="size-4" />
								</div>
								<div className="font-medium text-muted-foreground">
									Add team
								</div>
							</DropdownMenuItem>
						</DropdownMenuGroup>
					</DropdownMenuContent>
				</DropdownMenu>
			</SidebarMenuItem>
		</SidebarMenu>
	);
}