page controls - wip

* page breadcrumb
* other minor additions and fixes

client/src/components/layouts/shell.tsx

@@ -1,9 +1,13 @@
 import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
 import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
 import { Navbar } from '@/components/navbar/navbar';
-import { AppShell, Burger, Group } from '@mantine/core';
+import { ActionIcon, UnstyledButton, ActionIconGroup, AppShell, Avatar, Burger, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { IconDots } from '@tabler/icons-react';
 import { useAtom } from 'jotai';
+import classes from './shell.module.css';
+import Header from '@/components/layouts/header';
+import Breadcrumb from '@/components/layouts/components/breadcrumb';
 
 export default function Shell({ children }: { children: React.ReactNode }) {
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
@@ -19,27 +23,38 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         breakpoint: 'sm',
         collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
       }}
-      aside={{ width: 300, breakpoint: 'md', collapsed: { desktop: false, mobile: true } }}
+      aside={{ width: 300, breakpoint: 'md', collapsed: { mobile: true, desktop: !desktopOpened } }}
       padding="md"
     >
-      <AppShell.Header>
-        <Group h="100%" px="md">
-          <Burger
-            opened={mobileOpened}
-            onClick={toggleMobile}
-            hiddenFrom="sm"
-            size="sm"
-          />
-          <Burger
-            opened={desktopOpened}
-            onClick={toggleDesktop}
-            visibleFrom="sm"
-            size="sm"
-          />
+      <AppShell.Header
+        className={classes.header}
+      >
 
-          Header
+        <Group justify="space-between" h="100%" px="md" wrap="nowrap">
+
+          <Group h="100%" maw="60%" px="md" wrap="nowrap" style={{ overflow: 'hidden' }}>
+            <Burger
+              opened={mobileOpened}
+              onClick={toggleMobile}
+              hiddenFrom="sm"
+              size="sm"
+            />
+            <Burger
+              opened={desktopOpened}
+              onClick={toggleDesktop}
+              visibleFrom="sm"
+              size="sm"
+            />
+
+            <Breadcrumb />
+          </Group>
+
+          <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+            <Header />
+          </Group>
 
         </Group>
+
       </AppShell.Header>
 
       <AppShell.Navbar>
@@ -51,7 +66,7 @@ export default function Shell({ children }: { children: React.ReactNode }) {
         {children}
       </AppShell.Main>
 
-      <AppShell.Aside>
+      <AppShell.Aside className={classes.aside}>
         TODO
       </AppShell.Aside>
     </AppShell>