feat: billing guest access

src/pages/PageWrapper/PageWrapper.tsx

@@ -3,7 +3,7 @@ import {AppShell, Flex, rem} from "@mantine/core";
 import {useSelector} from "react-redux";
 import {RootState} from "../../redux/store.ts";
 import styles from './PageWrapper.module.css';
-import { Navbar } from "../../components/Navbar/Navbar.tsx";
+import {Navbar} from "../../components/Navbar/Navbar.tsx";
 
 export type Props = {
     children: ReactNode;
@@ -14,14 +14,14 @@ const PageWrapper: FC<Props> = ({children}) => {
         <AppShell
             layout={"alt"}
             withBorder={false}
-            navbar={authState.isAuthorized ? {
+            navbar={(authState.isAuthorized && !authState.isGuest) ? {
                 width: "130px",
                 breakpoint: "sm"
             } : undefined}
         >
 
             <AppShell.Navbar>
-                {authState.isAuthorized &&
+                {(authState.isAuthorized && !authState.isGuest) &&
                     <Flex className={styles['main-container']} h={"100%"} w={"100%"}
                           pl={rem(20)}
                           py={rem(20)}
@@ -31,8 +31,16 @@ const PageWrapper: FC<Props> = ({children}) => {
                     </Flex>
                 }
             </AppShell.Navbar>
-            <AppShell.Main className={styles['main-container']}>
-                <div className={styles['container']}>
+            <AppShell.Main
+                style={
+                    authState.isGuest ? {backgroundColor: "var(--mantine-color-dark-8)"} : {}
+                }
+                className={styles['main-container']}
+            >
+                <div
+                    className={styles['container']}
+
+                >
                     {children}
                 </div>
             </AppShell.Main>