feat: add header

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

@@ -1,6 +1,6 @@
 :root {
   --navigation-height: 74px;
-  --navigation-padding: var(--tg-viewport-safe-area-inset-bottom, 0px);
+  --navigation-padding: var(--safe-bottom);
   --navigation-total: calc(var(--navigation-height) + var(--navigation-padding));
 }
 
@@ -12,6 +12,8 @@
     left: 0;
     z-index: 10;
     max-width: 500px;
+    padding-left: var(--safe-left);
+    padding-right: var(--safe-right);
     margin: auto;
     display: flex;
     align-items: flex-end;
@@ -84,9 +86,10 @@
     border-radius: 27px 0 0 27px;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: flex-start;
     padding-right: 20px;
+    padding-left: 20px;
     cursor: pointer;
   }
 

src/routes/-/RootLayout/components/Navigation/Navigation.tsx

@@ -22,7 +22,7 @@ import menuIcon from "./assets/menu.svg";
 import rouletteIcon from "./assets/roulette.svg";
 import tasksIcon from "./assets/tasks.svg";
 import earningsIcon from "./assets/earnings.svg";
-import tg from "@/tg";
+import tg, { useTelegramViewportValue } from "@/tg";
 
 const ANIMATION_DURATION = 0.2;
 const SPRING_ANIMATION = {
@@ -62,33 +62,34 @@ type BarProps = {
 function NavBar({ labelKey, icon, active, entranceDelay, onClick }: BarProps) {
   const { t } = useTranslation();
 
-  const isInitial = useRef(true);
-  useEffect(() => {
-    isInitial.current = false;
-  }, []);
+  const [isReady, setIsReady] = useState(false);
 
-  const height = active ? ACTIVE_BAR_HEIGHT : BAR_HEIGHT;
+  const safeAreaBottom = useTelegramViewportValue("safeAreaInsetBottom");
+  const safeContentBottom = useTelegramViewportValue("contentSafeAreaInsetBottom");
+  const height = (active ? ACTIVE_BAR_HEIGHT : BAR_HEIGHT) + safeAreaBottom + safeContentBottom;
+  const offscreenOffset = height * 0.3;
   return (
     <GlassSurface
       className={[classes.bar, active && classes.active]}
       variants={{
         hidden: {
-          translateY: ACTIVE_BAR_HEIGHT + OFFSCREEN_BAR_OFFSET,
+          translateY: height + offscreenOffset,
           height,
         },
         visible: {
-          translateY: OFFSCREEN_BAR_OFFSET,
-          height: height + OFFSCREEN_BAR_OFFSET,
+          translateY: offscreenOffset,
+          height: height + offscreenOffset,
           transition: { ...SPRING_ANIMATION, delay: entranceDelay },
         },
         ready: {
-          translateY: OFFSCREEN_BAR_OFFSET,
-          height: height + OFFSCREEN_BAR_OFFSET,
+          translateY: offscreenOffset,
+          height: height + offscreenOffset,
           transition: SPRING_ANIMATION,
         },
       }}
+      onAnimationComplete={(variant) => variant === "visible" && setIsReady(true)}
       initial="hidden"
-      animate={isInitial.current ? "visible" : "ready"}
+      animate={isReady ? "ready" : "visible"}
       whileTap={{ scale: 0.95 }}
       onClick={onClick}
     >
@@ -110,34 +111,37 @@ type MenuBarProps = {
 
 const MENU_BAR_WIDTH = 94;
 const ACTIVE_MENU_BAR_WIDTH = 104;
-const OFFSCREEN_MENU_BAR_OFFSET = 20;
 
 function MenuBar({ labelKey, icon, delay, active, onClick }: MenuBarProps) {
   const { t } = useTranslation();
 
   const [isReady, setIsReady] = useState(false);
 
-  const width = active ? ACTIVE_MENU_BAR_WIDTH : MENU_BAR_WIDTH;
+  const safeAreaRight = useTelegramViewportValue("safeAreaInsetRight");
+  const safeContentRight = useTelegramViewportValue("contentSafeAreaInsetRight");
+  const width =
+    (active ? ACTIVE_MENU_BAR_WIDTH : MENU_BAR_WIDTH) + safeAreaRight + safeContentRight;
+  const offscreenOffset = width * 0.3;
   return (
     <GlassSurface
       className={[classes.menuBar, active && classes.active]}
       variants={{
         hidden: {
-          translateX: width + OFFSCREEN_MENU_BAR_OFFSET,
+          translateX: width + offscreenOffset,
           width,
         },
         visible: {
-          translateX: OFFSCREEN_MENU_BAR_OFFSET,
+          translateX: offscreenOffset,
           transition: { ...SPRING_ANIMATION, delay: delay },
           width,
         },
         ready: {
-          translateX: OFFSCREEN_MENU_BAR_OFFSET,
+          translateX: offscreenOffset,
           transition: SPRING_ANIMATION,
           width,
         },
         exit: {
-          translateX: width + OFFSCREEN_MENU_BAR_OFFSET + 10,
+          translateX: width + offscreenOffset,
           transition: { ...SPRING_ANIMATION, delay: delay },
           width,
         },