changed mobile navbar responsivenes

styles/mobile_bar_style.css

@@ -10,7 +10,6 @@
     align-items: center;
     border-right: 1px solid var(--border);
     gap: 10px;
-    background: var(--bg);
     transition: left 0.3s;
     -webkit-user-select: none;
     -ms-user-select: none;
@@ -18,6 +17,15 @@
     z-index: 10;
 }
 
+#navbar-mobile::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--bg);
+  opacity: 0.992;
+  z-index: -1;
+}
+
 #navbar-mobile.inactive {
     left: calc(var(--nav-mobile-w) * (-1))
 }
@@ -33,7 +41,9 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    gap: 10px;
+    width: 100%;
+    border-bottom: 1px solid var(--border);
+    height: fit-content;
 }
 
 .button-mobile {
@@ -47,6 +57,10 @@
     border: 1px solid var(--border);
 }
 
+.button-mobile.navbar {
+    margin-bottom: 20px;
+}
+
 .button-mobile::before {
     content: "";
     position: absolute;
@@ -83,28 +97,31 @@
     background: var(--bg2);
 }
 
-#button-mobile {
+.button-mobile.no-navbar {
     position: fixed;
     top: 5px;
     left: 5px;
     margin-top: 0;
 }
 
-#button-mobile.inactive {
+.button-mobile.no-navbar.inactive {
     display: none;
 }
 
 .navbar-item-mobile {
     width: 100%;
-    height: 60px;
+    height: 8vh;
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: center;
+    border-top: 1px solid var(--border);
 }
 
-.navbar-item-mobile:hover {
-    background: var(--surface);
+@media (hover: hover) and (pointer: fine) {
+    .navbar-item-mobile:hover {
+        background: var(--surface);
+    }
 }
 
 .nav-link-mobile {
@@ -121,10 +138,18 @@
 .mobile-config {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     margin-top: auto;
     margin-bottom: 20px;
     gap: 20px;
     height: fit-content;
-    width: fit-content;
+    width: 100%;
+}
+
+.mobile-config .switch{
+    margin-left: 40px;;
+}
+
+.mobile-config .lang-dropdown {
+    margin-left: 19.5px;
 }