From 8c74eddf500b76895214e1524c696a72a5c53da0 Mon Sep 17 00:00:00 2001 From: Markus Thielker Date: Sun, 1 Dec 2024 15:27:19 +0100 Subject: [PATCH 1/5] NORY-14: refactor sidebar to inset mode --- dashboard/src/app/layout.tsx | 49 ++++++--- dashboard/src/components/app-sidebar.tsx | 2 +- dashboard/src/components/ui/breadcrumb.tsx | 115 +++++++++++++++++++++ 3 files changed, 149 insertions(+), 17 deletions(-) create mode 100644 dashboard/src/components/ui/breadcrumb.tsx diff --git a/dashboard/src/app/layout.tsx b/dashboard/src/app/layout.tsx index 68326d3..51548bd 100644 --- a/dashboard/src/app/layout.tsx +++ b/dashboard/src/app/layout.tsx @@ -5,8 +5,10 @@ import { cn } from '@/lib/utils'; import { Toaster } from '@/components/ui/sonner'; import React from 'react'; import { ThemeProvider } from 'next-themes'; -import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'; +import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'; import { AppSidebar } from '@/components/app-sidebar'; +import { Separator } from '@/components/ui/separator'; +import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from '@/components/ui/breadcrumb'; const inter = Inter({ subsets: ['latin'] }); @@ -48,23 +50,38 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac /> -
- - - - -
+ + + + +
+ + + { + // TODO: implement dynamic Breadcrumbs + } + + + + + Ory Dashboard + + + + +
+
{children} -
- - -
+ + + + ); diff --git a/dashboard/src/components/app-sidebar.tsx b/dashboard/src/components/app-sidebar.tsx index d506db8..5598b4a 100644 --- a/dashboard/src/components/app-sidebar.tsx +++ b/dashboard/src/components/app-sidebar.tsx @@ -45,7 +45,7 @@ export function AppSidebar({ ...props }: React.ComponentProps) { ]; return ( - + Application diff --git a/dashboard/src/components/ui/breadcrumb.tsx b/dashboard/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..a76f836 --- /dev/null +++ b/dashboard/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { ChevronRight, MoreHorizontal } from 'lucide-react'; + +import { cn } from '@/lib/utils'; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<'nav'> & { + separator?: React.ReactNode +} +>(({ ...props }, ref) =>