refactor: implement main menu popover for smaller and medium devices

_dev/js/theme.js

@@ -24,12 +24,12 @@
  */
 /* eslint-disable */
 // import 'bootstrap/dist/js/bootstrap.min';
-import  'jquery-modal'
+import "jquery-modal";
 import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
 import touchspin from "bootstrap-touchspin";
 import "jquery-touchswipe";
 import "./selectors";
-import './tabs.js';
+import "./tabs.js";
 
 import "./responsive";
 import "./checkout";
@@ -165,4 +165,7 @@ $(function () {
 
   $(".th-accordion").thaccordion();
 
+  $(".toggle-main-menu").on("click", function () {
+    $(".mobile-main-menu").toggle();
+  });
 });

assets/css/theme.css

@@ -823,6 +823,10 @@ select {
   top: 100%;
 }
 
+.top-12 {
+  top: 3rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1029,10 +1033,6 @@ select {
   width: 33.333333%;
 }
 
-.w-1\/4 {
-  width: 25%;
-}
-
 .w-1\/6 {
   width: 16.666667%;
 }
@@ -1049,6 +1049,10 @@ select {
   width: 6rem;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
 .w-40 {
   width: 10rem;
 }
@@ -1102,14 +1106,14 @@ select {
   max-width: 240px;
 }
 
-.max-w-\[250px\] {
-  max-width: 250px;
-}
-
 .max-w-full {
   max-width: 100%;
 }
 
+.max-w-\[180px\] {
+  max-width: 180px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1291,6 +1295,27 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-gray-200\/50 {
+  border-color: rgb(229 231 235 / 0.5);
+}
+
+.border-gray-500\/50 {
+  border-color: rgb(107 114 128 / 0.5);
+}
+
+.border-gray-300\/50 {
+  border-color: rgb(209 213 219 / 0.5);
+}
+
+.border-gray-200\/70 {
+  border-color: rgb(229 231 235 / 0.7);
+}
+
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1605,6 +1630,33 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-sm {
+  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1740,6 +1792,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     flex-direction: column;
   }
 
+  .max-md\:items-end {
+    align-items: flex-end;
+  }
+
   .max-md\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -1797,6 +1853,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 50%;
   }
 
+  .md\:max-w-\[350px\] {
+    max-width: 350px;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1911,6 +1971,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     flex-wrap: nowrap;
   }
 
+  .lg\:border-none {
+    border-style: none;
+  }
+
   .lg\:bg-transparent {
     background-color: transparent;
   }

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -1,7 +1,7 @@
 {assign var=_counter value=0}
 {function name="menu" nodes=[] depth=0 parent=null}
     {if $nodes|count}
-      <ul class="flex flex-1 items-center justify-center top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
+      <ul class="flex flex-1 items-center justify-center top-menu max-md:flex-col max-md:items-end" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
         {foreach from=$nodes item=node}
             <li class="{$node.type}{if $node.current} current {/if} px-2 py-2 font-medium hover:text-gray-950" id="{$node.page_identifier}">
             {assign var=_counter value=$_counter+1}
@@ -18,7 +18,7 @@
     {/if}
 {/function}
 
-<button class="absolute right-4 top-1/2 block -translate-y-1/2 p-3 ring-primary focus:ring-2 lg:hidden">
+<button class="toggle-main-menu absolute right-4 top-1/2 block -translate-y-1/2 p-3 ring-primary focus:ring-2 lg:hidden">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M4 6l16 0"></path>
@@ -26,6 +26,6 @@
     <path d="M4 18l16 0"></path>
   </svg>
 </button>
-<nav class="absolute right-4 top-full w-full max-w-[250px] justify-center rounded-lg bg-white py-5 px-6 shadow lg:static lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
+<nav class="mobile-main-menu absolute z-10 right-4 top-full w-full max-w-[180px] md:max-w-[350px] border border-gray-100 justify-center rounded-lg bg-white py-5 px-6 drop-shadow-lg lg:static lg:border-none lg:flex lg:w-full lg:max-w-full lg:bg-transparent lg:py-0 lg:shadow-none hidden" id="_desktop_top_menu">
   {menu nodes=$menu.children}
 </nav>