feat: hide layout element in fullscreen

Author: stampaaaron

apps/frontend/src/routes/__root.tsx

@@ -54,8 +54,8 @@ function Root() {
   return (
     <>
       <AppShell
-        header={{ height: 104 }}
-        footer={{ height: 84 }}
+        header={{ height: 104, collapsed: layoutStore.fullscreen }}
+        footer={{ height: 84, collapsed: layoutStore.fullscreen }}
         navbar={{ width: 300, breakpoint: "sm", collapsed: { desktop: !layoutStore.admin } }}
         padding="xl"
         mod={{ admin: layoutStore.admin }}
@@ -100,6 +100,7 @@ function Root() {
         <AppShell.Main>
           <Outlet />
         </AppShell.Main>
+
         <AppShell.Footer>
           <Group justify="space-between">
             <FooterLogos />

apps/frontend/src/routes/_auth/questionnaire.tsx

@@ -1,5 +1,7 @@
 import { ActionIcon, Affix, Container, IconMaximize, IconMaximizeOff, useFullscreen } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { $layout } from "../../stores/layout";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/_auth/questionnaire")({
   component: QuestionnaireLayout,
@@ -8,10 +10,14 @@ export const Route = createFileRoute("/_auth/questionnaire")({
 function QuestionnaireLayout() {
   const { fullscreen, toggle } = useFullscreen();
 
+  useEffect(() => {
+    $layout.set({ fullscreen });
+  }, [fullscreen]);
+
   return (
-    <Container size="md" mt="xl">
+    <Container size={fullscreen ? "100%" : "md"} p={0} mt={fullscreen ? 0 : "xl"}>
       <Outlet />
-      <Affix position={{ bottom: 100, right: 40 }}>
+      <Affix position={{ bottom: 110, right: 40 }}>
         <ActionIcon variant="outline" radius="xl" size="xl" onClick={toggle}>
           {fullscreen ? <IconMaximizeOff /> : <IconMaximize />}
         </ActionIcon>

apps/frontend/src/stores/layout.ts

@@ -2,6 +2,7 @@ import { map } from "nanostores";
 
 type Layout = {
   admin?: boolean;
+  fullscreen?: boolean;
 };
 
 export const $layout = map<Layout>({});