direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-01 22:16:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard layout (#597)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-13 23:42:22 +03:00
committed by GitHub
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
resources/js/components/app-sidebar.tsx
View File

@ -1,11 +1,20 @@
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/react';
import { BookOpen, Folder, ServerIcon } from 'lucide-react';
import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
import AppLogo from './app-logo';
import { Icon } from '@/components/icon';
const mainNavItems: NavItem[] = [
{
@ -13,6 +22,11 @@ const mainNavItems: NavItem[] = [
href: route('servers'),
icon: ServerIcon,
},
{
title: 'Settings',
href: route('profile'),
icon: CogIcon,
},
];
const footerNavItems: NavItem[] = [
@ -28,29 +42,93 @@ const footerNavItems: NavItem[] = [
},
];
export function AppSidebar() {
export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
return (
<Sidebar collapsible="icon" variant="sidebar">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
{/* This is the first sidebar */}
{/* We disable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
<Sidebar collapsible="none" className="h-auto !w-[calc(var(--sidebar-width-icon)_+_1px)] border-r">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
<Link href={route('servers')} prefetch>
<AppLogo />
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent className="md:px-0">
<SidebarMenu>
{mainNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={window.location.href.startsWith(item.href)}
tooltip={{ children: item.title, hidden: false }}
>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter className="hidden md:flex">
<SidebarMenu>
{footerNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
<a href={item.href} target="_blank" rel="noopener noreferrer">
{item.icon && <Icon iconNode={item.icon} />}
<span className="sr-only">{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
<NavUser />
</SidebarFooter>
</Sidebar>
<SidebarContent>
<NavMain items={mainNavItems} />
</SidebarContent>
<SidebarFooter>
<NavFooter items={footerNavItems} className="mt-auto" />
<NavUser />
</SidebarFooter>
{/* This is the second sidebar */}
{/* We enable collapsible and adjust width to icon. */}
{/* This will make the sidebar appear as icons. */}
{secondNavItems && secondNavItems.length > 0 && (
<Sidebar collapsible="none" className="flex flex-1">
<SidebarHeader className="hidden h-12 border-b p-0 md:flex">
<div className="flex h-full items-center p-2">
<span className="max-w-[200px] truncate overflow-ellipsis">{secondNavTitle}</span>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{secondNavItems.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
<Link href={item.href} prefetch>
{item.icon && <item.icon />}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
)}
</Sidebar>
);
}