crap

src/pages/PageWrapper/PageWrapper.module.css

@@ -0,0 +1,14 @@
+.main-container {
+    @mixin dark {
+        background-color: var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        background-color: var(--mantine-color-gray-0);
+    }
+}
+
+.container {
+    padding: rem(20);
+    display: flex;
+    min-height: 100vh;
+}

src/pages/PageWrapper/PageWrapper.tsx

@@ -1,31 +1,35 @@
 import {FC, ReactNode} from "react";
-import {Flex, rem} from "@mantine/core";
+import {AppShell, rem} from "@mantine/core";
 import {Navbar} from "../../components/Navbar/Navbar.tsx";
 import {useSelector} from "react-redux";
 import {RootState} from "../../redux/store.ts";
-import Header from "../../components/Header/Header.tsx";
+import styles from './PageWrapper.module.css';
 
 export type Props = {
     children: ReactNode;
 }
 const PageWrapper: FC<Props> = ({children}) => {
     const authState = useSelector((state: RootState) => state.auth);
-    return (<Flex style={{flex: 1}}>
-
-            {authState.isAuthorized &&
-
+    return (
+        <AppShell
+            layout={"alt"}
+            navbar={{width: rem('80px'), breakpoint: "sm"}}
+            // header={{height:rem(60)}}
+        >
+            {/*<AppShell.Header>*/}
+            {/*    <Header/>*/}
+            {/*</AppShell.Header>*/}
+            <AppShell.Navbar>
                 <Navbar/>
-            }
-            <div style={{flex: 1, display: 'flex', flexDirection: 'column'}}>
-                <Header/>
-                <div style={{padding:rem(20), flex:1}}>
-
+            </AppShell.Navbar>
+            <AppShell.Main className={styles['main-container']}>
+                <div className={styles['container']}>
                     {children}
                 </div>
 
-            </div>
 
-        </Flex>
+            </AppShell.Main>
+        </AppShell>
     )
 }
 export default PageWrapper;