feat: residues accounting

src/pages/PageWrapper/PageWrapper.module.css

@@ -9,4 +9,8 @@
 
 .container {
     padding: rem(20);
+
+    @media only screen and (max-width: 768px) {
+        padding: 0 !important;
+    }
 }

src/pages/PageWrapper/PageWrapper.tsx

@@ -12,22 +12,26 @@ export type Props = {
 const PageWrapper: FC<Props> = ({ children }) => {
     const authState = useSelector((state: RootState) => state.auth);
     const uiState = useSelector((state: RootState) => state.ui);
+    const navbarNeeded = authState.isAuthorized && !authState.isGuest;
+
     return (
         <AppShell
             layout={"alt"}
             withBorder={false}
             navbar={
-                authState.isAuthorized && !authState.isGuest
+                navbarNeeded
                     ? {
                         width: "130px",
                         breakpoint: "sm",
-                        collapsed: { desktop: uiState.hideNavbar },
+                        collapsed: { desktop: uiState.hideNavbar, mobile: true },
                     }
                     : undefined
-
             }>
+            <AppShell.Header>
+
+            </AppShell.Header>
             <AppShell.Navbar>
-                {authState.isAuthorized && !authState.isGuest && (
+                {navbarNeeded && (
                     <Flex
                         className={styles["main-container"]}
                         h={"100%"}