Mobile menu styling

Author: w3bdesign

public/css/app.css

@@ -787,6 +787,10 @@ video {
   margin-left: 1.5rem;
 }
 
+.mt-36 {
+  margin-top: 9rem;
+}
+
 .block {
   display: block;
 }
@@ -887,6 +891,10 @@ video {
   height: 1rem;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }

public/js/app.js

@@ -21523,7 +21523,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [!$setup.state.firstRender ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
     key: 0,
-    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["fixed top-0 left-0 z-50 w-screen mt-40 bg-white h-96 animate__animated", {
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["fixed top-0 left-0 z-50 w-screen mt-36 bg-white h-screen animate__animated", {
       animate__fadeInLeft: $setup.state.expandedMenu,
       animate__fadeOutRight: !$setup.state.expandedMenu && !$setup.state.firstRender
     }])

resources/js/components/Header/MobileMenu.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <div
       v-if="!state.firstRender"
-      class="fixed top-0 left-0 z-50 w-screen mt-40 bg-white h-96 animate__animated"
+      class="fixed top-0 left-0 z-50 w-screen mt-36 bg-white h-screen animate__animated"
       :class="{
         animate__fadeInLeft: state.expandedMenu,
         animate__fadeOutRight: !state.expandedMenu && !state.firstRender,