refactor layout

* ui polishing
* frontend and backend fixes

apps/client/src/components/layouts/global/app-header.tsx

@@ -0,0 +1,70 @@
+import { Group } from "@mantine/core";
+import { IconSquareLetterDFilled } from "@tabler/icons-react";
+import classes from "./app-header.module.css";
+import React from "react";
+import TopMenu from "@/components/layouts/global/top-menu.tsx";
+import { Link } from "react-router-dom";
+import APP_ROUTE from "@/lib/app-route.ts";
+import { useAtom } from "jotai/index";
+import {
+  desktopSidebarAtom,
+  mobileSidebarAtom,
+} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
+
+const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
+
+export function AppHeader() {
+  const [mobileOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobile = useToggleSidebar(mobileSidebarAtom);
+
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+
+  const isHomeRoute = location.pathname.startsWith("/home");
+
+  const items = links.map((link) => (
+    <Link key={link.label} to={link.link} className={classes.link}>
+      {link.label}
+    </Link>
+  ));
+
+  return (
+    <>
+      <Group h="100%" px="md" justify="space-between" wrap={"nowrap"}>
+        <Group>
+          <IconSquareLetterDFilled size={30} />
+
+          {!isHomeRoute && (
+            <>
+              <SidebarToggle
+                aria-label="sidebar toggle"
+                opened={mobileOpened}
+                onClick={toggleMobile}
+                hiddenFrom="sm"
+                size="sm"
+              />
+
+              <SidebarToggle
+                aria-label="sidebar toggle"
+                opened={desktopOpened}
+                onClick={toggleDesktop}
+                visibleFrom="sm"
+                size="sm"
+              />
+            </>
+          )}
+
+          <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">
+            {items}
+          </Group>
+        </Group>
+
+        <Group px={"xl"}>
+          <TopMenu />
+        </Group>
+      </Group>
+    </>
+  );
+}