fix(nuxt3-app): my account mobile menu (SWF-261)

shopware · Feb 15, 2023 · f394092 · f394092
1 parent 45c60fe
commit f394092
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/.changeset/hot-clocks-ring.md b/.changeset/hot-clocks-ring.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Fix my account menu (mobile)
diff --git a/templates/vue-demo-store/layouts/account.vue b/templates/vue-demo-store/layouts/account.vue
@@ -43,23 +43,20 @@ provide("swNavigation-footer-navigation", footerData);
       <div class="m-10">
         <div class="account-inner">
           <div class="md:grid md:grid-cols-3 md:gap-6">
-            <aside
-              class="hidden md:block lg:w-64 md:col-span-"
-              aria-label="Sidebar"
-            >
+            <aside class="block lg:w-64 md:col-span-" aria-label="Sidebar">
               <div
-                class="overflow-y-auto py-4 px-3 bg-gray-50 text-base font-normal text-gray-500 rounded"
+                class="overflow-y-auto md:py-4 md:px-3 md:bg-gray-50 text-base font-normal text-gray-500 rounded"
               >
                 <h1
-                  class="self-center text-xl p-2 mb-2 font-semibold whitespace-nowrap"
+                  class="self-center text-xl px-0 md:px-2 py-2 mb-2 font-semibold whitespace-nowrap"
                 >
                   My account
                 </h1>
                 <ul class="space-y-2">
                   <li>
                     <RouterLink
                       to="/account"
-                      class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
+                      class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
                     >
                       <div i-carbon-dashboard text-xl inline-block />
                       <span class="ml-3">Account Overview</span>
@@ -68,7 +65,7 @@ provide("swNavigation-footer-navigation", footerData);
                   <li>
                     <RouterLink
                       to="/account/profile"
-                      class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
+                      class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100 is-active"
                     >
                       <div i-carbon-user text-xl inline-block />
                       <span class="ml-3">My profile</span>
@@ -77,7 +74,7 @@ provide("swNavigation-footer-navigation", footerData);
                   <li>
                     <RouterLink
                       to="/account/address"
-                      class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
+                      class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-home text-xl inline-block />
                       <span class="ml-3">My address</span>
@@ -86,7 +83,7 @@ provide("swNavigation-footer-navigation", footerData);
                   <li>
                     <RouterLink
                       to="/account/payment"
-                      class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
+                      class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-wallet text-xl inline-block />
                       <span class="ml-3">Payment</span>
@@ -97,15 +94,15 @@ provide("swNavigation-footer-navigation", footerData);
                   <li>
                     <RouterLink
                       to="/account/order"
-                      class="flex items-center p-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
+                      class="flex items-center px-0 md:px-2 py-2 rounded-lg hover:text-brand-primary hover:bg-gray-100"
                     >
                       <div i-carbon-order-details text-xl inline-block />
                       <span class="ml-3">Order history</span>
                     </RouterLink>
                   </li>
                   <li>
                     <button
-                      class="flex items-center rounded-lg p-2 hover:text-brand-primary hover:bg-gray-100 w-full"
+                      class="flex items-center rounded-lg px-0 md:px-2 py-2 hover:text-brand-primary hover:bg-gray-100 w-full"
                       @click="invokeLogout()"
                     >
                       <div i-carbon-logout text-xl inline-block />