NORY-14: refactor sidebar to inset mode

dashboard/src/components/app-sidebar.tsx

@@ -45,7 +45,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     ];
 
     return (
-        <Sidebar variant="floating" {...props} collapsible="icon">
+        <Sidebar variant="inset" collapsible="icon" {...props}>
             <SidebarContent>
                 <SidebarGroup>
                     <SidebarGroupLabel>Application</SidebarGroupLabel>

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) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+            className,
+        )}
+        {...props}
+    />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn('inline-flex items-center gap-1.5', className)}
+        {...props}
+    />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+}
+>(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+
+    return (
+        <Comp
+            ref={ref}
+            className={cn('transition-colors hover:text-foreground', className)}
+            {...props}
+        />
+    );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn('font-normal text-foreground', className)}
+        {...props}
+    />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+                                 children,
+                                 className,
+                                 ...props
+                             }: React.ComponentProps<'li'>) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn('[&>svg]:w-3.5 [&>svg]:h-3.5', className)}
+        {...props}
+    >
+        {children ?? <ChevronRight/>}
+    </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+                                className,
+                                ...props
+                            }: React.ComponentProps<'span'>) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn('flex h-9 w-9 items-center justify-center', className)}
+        {...props}
+    >
+    <MoreHorizontal className="h-4 w-4"/>
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+};