fix: tg safe area

src/routes/-/Header/Header.module.css

@@ -1,9 +1,10 @@
 :root {
   --header-height: 90px;
-  --header-total: calc(
-    var(--header-height) + var(--tg-safe-area-inset-top, 0px) +
-      var(--tg-content-safe-area-inset-top, 0px)
+  --header-padding: calc(
+    var(--tg-viewport-safe-area-inset-top, 0px) +
+      var(--tg-viewport-content-safe-area-inset-top, 0px)
   );
+  --header-total: calc(var(--header-height) + var(--header-padding));
 }
 
 @layer base {
@@ -14,9 +15,7 @@
     left: 0;
     z-index: 10;
     height: var(--header-total);
-    padding-top: calc(
-      var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)
-    );
+    padding-top: var(--header-padding);
     background: rgb(59 130 246 / 0.3);
   }
 }

src/routes/-/Navigation/Navigation.module.css

@@ -1,6 +1,7 @@
 :root {
   --navigation-height: 74px;
-  --navigation-total: calc(var(--navigation-height) + var(--tg-safe-area-inset-bottom, 0px));
+  --navigation-padding: var(--tg-viewport-safe-area-inset-bottom, 0px);
+  --navigation-total: calc(var(--navigation-height) + var(--navigation-padding));
 }
 
 @layer base {
@@ -33,7 +34,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
-    padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
+    padding-bottom: var(--navigation-padding);
   }
 
   .barActive {

src/routes/__root.tsx

@@ -7,6 +7,7 @@ import { useEffect } from "react";
 import { Route as GameRoute } from "./game";
 import Header from "./-/Header";
 import Navigation from "./-/Navigation";
+import tg from "@/tg";
 
 function AppLayout() {
   return (
@@ -22,6 +23,17 @@ function AppLayout() {
   );
 }
 
+tg.storage.setItem("authToken", "123");
+
+tg.storage
+  .getItem("authToken")
+  .then((value) => {
+    console.log("Success", `$${value}$`);
+  })
+  .catch((error) => {
+    console.error("Error", error);
+  });
+
 export const Route = createRootRoute({
   notFoundComponent: () => {
     const navigate = useNavigate();