things and stuff

barkmanui/src/App.tsx

@@ -2,12 +2,15 @@ import { Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
 import InventoryList from "./features/inventory/InventoryList.tsx";
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import '@mantine/core/styles.css';
 
 // Create a client
 const queryClient = new QueryClient()
 
+import { MantineProvider } from '@mantine/core';
+
 function App() {
-  return (
+  return <MantineProvider>{ (
       <QueryClientProvider client={queryClient}>
     <>
         <Routes>
@@ -18,7 +21,7 @@ function App() {
 
     </>
       </QueryClientProvider>
-  )
+  ) }</MantineProvider>;
 }
 
 export default App

barkmanui/src/common/components/BarkHeader.module.css

@@ -0,0 +1,33 @@
+.header {
+    height: 56px;
+    margin-bottom: 120px;
+    background-color: var(--mantine-color-body);
+    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.inner {
+    height: 56px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.link {
+    display: block;
+    line-height: 1;
+    padding: 8px 12px;
+    border-radius: var(--mantine-radius-sm);
+    text-decoration: none;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    font-size: var(--mantine-font-size-sm);
+    font-weight: 500;
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    }
+
+    [data-mantine-color-scheme] &[data-active] {
+        background-color: var(--mantine-color-blue-filled);
+        color: var(--mantine-color-white);
+    }
+}

barkmanui/src/common/components/BarkHeader.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { Burger, Container, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import classes from './BarkHeader.module.css';
+
+const links = [
+    { link: '/', label: 'Home' },
+    { link: '/inventory', label: 'Inventory' },
+];
+
+export function BarkHeader() {
+    const [opened, { toggle }] = useDisclosure(false);
+    const [active, setActive] = useState(links[0].link);
+
+    const items = links.map((link) => (
+        <a
+            key={link.label}
+            href={link.link}
+            className={classes.link}
+            data-active={active === link.link || undefined}
+            onClick={(event) => {
+                event.preventDefault();
+                setActive(link.link);
+            }}
+        >
+            {link.label}
+        </a>
+    ));
+
+    return (
+        <header className={classes.header}>
+            <Container size="md" className={classes.inner}>
+
+                <Group gap={5} visibleFrom="xs">
+                    {items}
+                </Group>
+
+                <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />
+            </Container>
+        </header>
+    );
+}

barkmanui/src/pages/home.tsx

@@ -1,5 +1,6 @@
 import {Link} from "react-router";
 import Button from "../common/components/Button.tsx";
+import {BarkHeader} from "../common/components/BarkHeader.tsx";
 
 
 function Home() {
@@ -7,6 +8,7 @@ function Home() {
 
     return (
         <>
+            <BarkHeader></BarkHeader>
             <div>
                 <h1 className={"text-brand"}>Home</h1>
             </div>