-
-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: init work on improved side bar
- Loading branch information
Showing
19 changed files
with
2,313 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import * as React from "react"; | ||
| import { | ||
| AudioWaveform, | ||
| BookOpen, | ||
| Bot, | ||
| Command, | ||
| Frame, | ||
| GalleryVerticalEnd, | ||
| Map, | ||
| PieChart, | ||
| Settings2, | ||
| SquareTerminal, | ||
| } from "lucide-react"; | ||
|
|
||
| import { NavMain } from "@/shadcn/components/nav-main"; | ||
| import { NavProjects } from "@/shadcn/components/nav-projects"; | ||
| import { NavUser } from "@/shadcn/components/nav-user"; | ||
| import { TeamSwitcher } from "@/shadcn/components/team-switcher"; | ||
| import { | ||
| Sidebar, | ||
| SidebarContent, | ||
| SidebarFooter, | ||
| SidebarHeader, | ||
| SidebarRail, | ||
| } from "@/shadcn/ui/sidebar"; | ||
| import ThemeSettings from "../../../components/ThemeSettings"; | ||
|
|
||
| const data = { | ||
| user: { | ||
| name: "shadcn", | ||
| email: "m@example.com", | ||
| avatar: "/avatars/shadcn.jpg", | ||
| }, | ||
| teams: [ | ||
| { | ||
| name: "Peppermint", | ||
| logo: GalleryVerticalEnd, | ||
| plan: `version: ${process.env.NEXT_PUBLIC_CLIENT_VERSION}`, | ||
| }, | ||
| ], | ||
| navMain: [ | ||
| { | ||
| title: "Dashboard", | ||
| url: "/", | ||
| icon: SquareTerminal, | ||
| isActive: true, | ||
| }, | ||
| { | ||
| title: "Issues", | ||
| url: "#", | ||
| icon: Bot, | ||
| items: [ | ||
| { | ||
| title: "Open", | ||
| url: "#", | ||
| }, | ||
| { | ||
| title: "Closed", | ||
| url: "#", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: "Admin", | ||
| url: "/", | ||
| icon: SquareTerminal, | ||
| isActive: true, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) { | ||
| return ( | ||
| <Sidebar collapsible="icon" {...props}> | ||
| <SidebarHeader> | ||
| {/* <TeamSwitcher teams={data.teams} /> */} | ||
| <div className="flex items-center gap-2 "> | ||
| <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"> | ||
| <GalleryVerticalEnd className="size-4" /> | ||
| </div> | ||
| <div className="grid flex-1 text-left text-sm leading-tight"> | ||
| <span className="truncate font-semibold">Peppermint</span> | ||
| <span className="truncate text-xs"> | ||
| version: {process.env.NEXT_PUBLIC_CLIENT_VERSION} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </SidebarHeader> | ||
| <SidebarContent> | ||
| <NavMain items={data.navMain} /> | ||
| </SidebarContent> | ||
| <SidebarFooter> | ||
| <div className="hidden sm:block "> | ||
| <ThemeSettings /> | ||
| </div> | ||
| </SidebarFooter> | ||
| <SidebarRail /> | ||
| </Sidebar> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { ChevronRight, type LucideIcon } from "lucide-react"; | ||
|
|
||
| import { | ||
| Collapsible, | ||
| CollapsibleContent, | ||
| CollapsibleTrigger, | ||
| } from "@/shadcn/ui/collapsible"; | ||
| import { | ||
| SidebarGroup, | ||
| SidebarGroupLabel, | ||
| SidebarMenu, | ||
| SidebarMenuButton, | ||
| SidebarMenuItem, | ||
| SidebarMenuSub, | ||
| SidebarMenuSubButton, | ||
| SidebarMenuSubItem, | ||
| } from "@/shadcn/ui/sidebar"; | ||
|
|
||
| export function NavMain({ | ||
| items, | ||
| }: { | ||
| items: { | ||
| title: string; | ||
| url: string; | ||
| icon?: LucideIcon; | ||
| isActive?: boolean; | ||
| items?: { | ||
| title: string; | ||
| url: string; | ||
| }[]; | ||
| }[]; | ||
| }) { | ||
| return ( | ||
| <SidebarGroup> | ||
| <SidebarMenu> | ||
| {items.map((item) => | ||
| item.items ? ( | ||
| <Collapsible | ||
| key={item.title} | ||
| asChild | ||
| defaultOpen={true} | ||
| className="group/collapsible" | ||
| > | ||
| <SidebarMenuItem> | ||
| <CollapsibleTrigger asChild> | ||
| <SidebarMenuButton tooltip={item.title} size="sm"> | ||
| {item.icon && <item.icon />} | ||
| <span>{item.title}</span> | ||
| <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" /> | ||
| </SidebarMenuButton> | ||
| </CollapsibleTrigger> | ||
| <CollapsibleContent> | ||
| <SidebarMenuSub > | ||
| {item.items?.map((subItem) => ( | ||
| <SidebarMenuSubItem key={subItem.title}> | ||
| <SidebarMenuSubButton asChild size="sm"> | ||
| <a href={subItem.url}> | ||
| <span>{subItem.title}</span> | ||
| </a> | ||
| </SidebarMenuSubButton> | ||
| </SidebarMenuSubItem> | ||
| ))} | ||
| </SidebarMenuSub> | ||
| </CollapsibleContent> | ||
| </SidebarMenuItem> | ||
| </Collapsible> | ||
| ) : ( | ||
| <SidebarMenuItem key={item.title}> | ||
| <SidebarMenuButton size="sm" asChild tooltip={item.title}> | ||
| <a href={item.url}> | ||
| {item.icon && <item.icon />} | ||
| <span>{item.title}</span> | ||
| </a> | ||
| </SidebarMenuButton> | ||
| </SidebarMenuItem> | ||
| ) | ||
| )} | ||
| </SidebarMenu> | ||
| </SidebarGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { | ||
| Folder, | ||
| Forward, | ||
| MoreHorizontal, | ||
| Trash2, | ||
| type LucideIcon, | ||
| } from "lucide-react" | ||
|
|
||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from "@/shadcn/ui/dropdown-menu"; | ||
| import { | ||
| SidebarGroup, | ||
| SidebarGroupLabel, | ||
| SidebarMenu, | ||
| SidebarMenuAction, | ||
| SidebarMenuButton, | ||
| SidebarMenuItem, | ||
| useSidebar, | ||
| } from "@/shadcn/ui/sidebar"; | ||
|
|
||
| export function NavProjects({ | ||
| projects, | ||
| }: { | ||
| projects: { | ||
| name: string | ||
| url: string | ||
| icon: LucideIcon | ||
| }[] | ||
| }) { | ||
| const { isMobile } = useSidebar() | ||
|
|
||
| return ( | ||
| <SidebarGroup className="group-data-[collapsible=icon]:hidden"> | ||
| <SidebarGroupLabel>Projects</SidebarGroupLabel> | ||
| <SidebarMenu> | ||
| {projects.map((item) => ( | ||
| <SidebarMenuItem key={item.name}> | ||
| <SidebarMenuButton asChild> | ||
| <a href={item.url}> | ||
| <item.icon /> | ||
| <span>{item.name}</span> | ||
| </a> | ||
| </SidebarMenuButton> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <SidebarMenuAction showOnHover> | ||
| <MoreHorizontal /> | ||
| <span className="sr-only">More</span> | ||
| </SidebarMenuAction> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent | ||
| className="w-48 rounded-lg" | ||
| side={isMobile ? "bottom" : "right"} | ||
| align={isMobile ? "end" : "start"} | ||
| > | ||
| <DropdownMenuItem> | ||
| <Folder className="text-muted-foreground" /> | ||
| <span>View Project</span> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem> | ||
| <Forward className="text-muted-foreground" /> | ||
| <span>Share Project</span> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem> | ||
| <Trash2 className="text-muted-foreground" /> | ||
| <span>Delete Project</span> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </SidebarMenuItem> | ||
| ))} | ||
| <SidebarMenuItem> | ||
| <SidebarMenuButton className="text-sidebar-foreground/70"> | ||
| <MoreHorizontal className="text-sidebar-foreground/70" /> | ||
| <span>More</span> | ||
| </SidebarMenuButton> | ||
| </SidebarMenuItem> | ||
| </SidebarMenu> | ||
| </SidebarGroup> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { | ||
| BadgeCheck, | ||
| Bell, | ||
| ChevronsUpDown, | ||
| CreditCard, | ||
| LogOut, | ||
| Sparkles, | ||
| } from "lucide-react" | ||
|
|
||
| import { | ||
| Avatar, | ||
| AvatarFallback, | ||
| AvatarImage, | ||
| } from "@/shadcn/ui/avatar"; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuGroup, | ||
| DropdownMenuItem, | ||
| DropdownMenuLabel, | ||
| DropdownMenuSeparator, | ||
| DropdownMenuTrigger, | ||
| } from "@/shadcn/ui/dropdown-menu"; | ||
| import { | ||
| SidebarMenu, | ||
| SidebarMenuButton, | ||
| SidebarMenuItem, | ||
| useSidebar, | ||
| } from "@/shadcn/ui/sidebar"; | ||
|
|
||
| export function NavUser({ | ||
| user, | ||
| }: { | ||
| user: { | ||
| name: string | ||
| email: string | ||
| avatar: string | ||
| } | ||
| }) { | ||
| const { isMobile } = useSidebar() | ||
|
|
||
| return ( | ||
| <SidebarMenu> | ||
| <SidebarMenuItem> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <SidebarMenuButton | ||
| size="lg" | ||
| className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" | ||
| > | ||
| <Avatar className="h-8 w-8 rounded-lg"> | ||
| <AvatarImage src={user.avatar} alt={user.name} /> | ||
| <AvatarFallback className="rounded-lg">CN</AvatarFallback> | ||
| </Avatar> | ||
| <div className="grid flex-1 text-left text-sm leading-tight"> | ||
| <span className="truncate font-semibold">{user.name}</span> | ||
| <span className="truncate text-xs">{user.email}</span> | ||
| </div> | ||
| <ChevronsUpDown className="ml-auto size-4" /> | ||
| </SidebarMenuButton> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent | ||
| className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" | ||
| side={isMobile ? "bottom" : "right"} | ||
| align="end" | ||
| sideOffset={4} | ||
| > | ||
| <DropdownMenuLabel className="p-0 font-normal"> | ||
| <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm"> | ||
| <Avatar className="h-8 w-8 rounded-lg"> | ||
| <AvatarImage src={user.avatar} alt={user.name} /> | ||
| <AvatarFallback className="rounded-lg">CN</AvatarFallback> | ||
| </Avatar> | ||
| <div className="grid flex-1 text-left text-sm leading-tight"> | ||
| <span className="truncate font-semibold">{user.name}</span> | ||
| <span className="truncate text-xs">{user.email}</span> | ||
| </div> | ||
| </div> | ||
| </DropdownMenuLabel> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuGroup> | ||
| <DropdownMenuItem> | ||
| <Sparkles /> | ||
| Upgrade to Pro | ||
| </DropdownMenuItem> | ||
| </DropdownMenuGroup> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuGroup> | ||
| <DropdownMenuItem> | ||
| <BadgeCheck /> | ||
| Account | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem> | ||
| <CreditCard /> | ||
| Billing | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem> | ||
| <Bell /> | ||
| Notifications | ||
| </DropdownMenuItem> | ||
| </DropdownMenuGroup> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem> | ||
| <LogOut /> | ||
| Log out | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </SidebarMenuItem> | ||
| </SidebarMenu> | ||
| ) | ||
| } |
Oops, something went wrong.