feat: navabar

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

@@ -11,22 +11,14 @@
     bottom: 0;
     left: 0;
     z-index: 10;
+    max-width: 320px;
+    margin: auto;
     display: flex;
     align-items: flex-end;
     justify-content: space-evenly;
     overflow: hidden;
   }
 
-  .barContainer {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  .barWrapper {
-    display: flex;
-    align-items: flex-end;
-  }
-
   .bar {
     width: 54px;
     border-radius: 27px 27px 0 0;
@@ -37,12 +29,6 @@
     padding-bottom: var(--navigation-padding);
   }
 
-  .barActive {
-  }
-
-  .barInactive {
-  }
-
   .safeContent {
     display: flex;
     flex-direction: column;
@@ -50,23 +36,21 @@
     justify-content: center;
     width: 100%;
     height: 64px;
+    margin-top: -10px;
   }
 
-  .iconPlaceholder {
-    width: 20px;
-    height: 20px;
-    background: rgb(255 255 255 / 0.4);
-    border-radius: 4px;
-    flex-shrink: 0;
-    margin-top: -6px;
+  .icon {
+    width: 40px;
+    height: 40px;
     margin-bottom: -6px;
   }
 
   .label {
-    font-size: 11px;
+    font-size: 15px;
+    font-weight: 700;
     text-align: center;
     -webkit-text-stroke: 1px #331b01;
-    text-shadow: 0px 1px 2px 0px #0000008c;
+    text-shadow: 0px 2px 2px #0000008c;
     line-height: 1;
   }
 
@@ -77,4 +61,43 @@
   .labelActive {
     color: #ffbd42;
   }
+
+  .menuOverlay {
+    position: absolute;
+    right: 0;
+    bottom: calc(var(--navigation-total) + 16px);
+    z-index: 9;
+    padding-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 8px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .menuOverlay > * {
+    pointer-events: auto;
+  }
+
+  .menuBar {
+    height: 54px;
+    width: 94px;
+    border-radius: 27px 0 0 27px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 20px;
+  }
+
+  .menuBarContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 54px;
+    height: 100%;
+    margin-left: -10px;
+  }
 }