Merge pull request #1004 from w3bdesign/989-consider-sticky-navigation-on-mobile

Improve mobile design

Author: w3bdesign

components/Layout/LayoutCart.vue

@@ -5,28 +5,38 @@
         >Error fetching cart. Please refresh the page.</span
       >
     </div>
-    <div v-else>
+    <div v-else class="mt-4 lg:mt-0">
       <NuxtLink to="/cart">
         <transition name="cart">
           <span
             v-if="cartLength"
             class="text-xl text-white no-underline lg:text-black is-active"
           >
-            <img
-              alt="Cart icon"
-              class="h-12 ml-4 lg:ml-2"
-              aria-label="Cart"
-              src="~/assets/svg/Cart.svg"
-          /></span>
+            <span class="hidden lg:block">
+              <img
+                alt="Cart icon"
+                class="h-12 ml-4 lg:ml-2"
+                aria-label="Cart"
+                src="~/assets/svg/Cart.svg"
+              />
+            </span>
+            <span class="block lg:hidden">
+              <Icon
+                name="ri:shopping-cart-2-line"
+                size="3em"
+                class="text-white lg:text-black"
+              />
+            </span>
+          </span>
         </transition>
         <transition name="cart">
           <div v-if="cartLength">
             <span
-              class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-white bg-black rounded-full lg:ml-14"
+              class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white  lg:text-white lg:bg-black rounded-full lg:ml-14"
             >
               {{ cartLength }}
             </span>
-            <span>Total: {{ subTotal }}</span>
+            <span class="text-white lg:text-black">Total: {{ subTotal }}</span>
           </div>
         </transition>
       </NuxtLink>

components/Layout/LayoutMobileMenu.vue

@@ -2,7 +2,7 @@
   <div class="relative">
     <div
       v-if="!firstRender"
-      class="fixed top-0 left-0 w-screen mt-40 bg-white h-full animate__animated z-50"
+      class="fixed top-0 left-0 h-[650px] w-screen mt-40 bg-white animate__animated z-50"
       :class="{
         animate__fadeInLeft: expandedMenu,
         animate__fadeOutRight: !expandedMenu && !firstRender,
@@ -25,19 +25,14 @@
         <li class="text-xl linkStyle">
           <NuxtLink to="/search" @click="displayMobileMenu"> Search </NuxtLink>
         </li>
-        <li class="flex justify-center mt-6 text-lg linkStyleCart">
-          <NuxtLink to="/cart" @click="displayMobileMenu">
-            <LayoutCart />
-          </NuxtLink>
-        </li>
       </ul>
     </div>
     <div class="w-5/12 lg:hidden" />
     <div class="flex flex-row w-2/12 px-2 my-2 lg:hidden">
       <div class="self-center block w-full mr-4">
         <button
           id="nav-toggle"
-          class="mt-6 burger burger-squeeze"
+          class="mt-2 burger burger-squeeze"
           aria-haspopup="true"
           :aria-expanded="expandedMenu"
           aria-controls="menu"
@@ -80,6 +75,7 @@ const displayMobileMenu = () => {
   font-size: 14px;
   cursor: pointer;
   transition: 0.5s all;
+
   -webkit-tap-highlight-color: transparent;
 }
 .burger .burger-lines:after {
@@ -111,7 +107,7 @@ const displayMobileMenu = () => {
   content: "";
   width: 100%;
   border-radius: 0.25em;
-  background-color: #000;
+  background-color: #fff;
   height: 0.25em;
   position: absolute;
   transform: rotate(0);

components/Layout/LayoutStickyFooter.vue

@@ -0,0 +1,19 @@
+<template>
+  <nav
+    id="footer"
+    class="fixed bottom-0 z-50 w-full md:hidden lg:hidden xl:hidden"
+  >
+    <div
+      class="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800"
+    >
+      <LayoutMobileMenu />
+      <div
+        class="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
+        id="menu"
+      ></div>
+      <div class="flex items-center order-2 md:order-3" id="nav-content">
+        <LayoutCart />
+      </div>
+    </div>
+  </nav>
+</template>

components/Products/ProductsShowAll.vue

@@ -4,7 +4,7 @@
       <div id="product-container" class="flex flex-wrap items-center">
         <template v-for="product in data.products.nodes">
           <div
-            v-if="product.slug !== undefined"
+            v-if="product.slug"
             :key="product.id"
             class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:1/4 xl:w-1/4"
           >
@@ -17,7 +17,7 @@
             >
               <img
                 id="product-image"
-                class="container mx-auto transition duration-500 ease-in-out transform cursor-pointer lg:w-64 xl:w-64 sm:p-4 hover:scale-110"
+                class="container p-8 border w-4/5 border-gray-200 mx-auto lg:h-[190px] rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:w-64 sm:p-4 hover:scale-95"
                 :alt="product.name"
                 :src="productImage(product)"
               />

components/Products/ProductsSingleProduct.vue

@@ -6,7 +6,7 @@
           class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
         >
           <img
-            v-if="data.product.image !== undefined"
+            v-if="data.product.image"
             id="product-image"
             class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
             :alt="data.product.name"

layouts/default.vue

@@ -5,6 +5,7 @@
       <slot />
     </div>
     <LayoutFooter />
+    <LayoutStickyFooter />
   </div>
 </template>
 

nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
     "@nuxtjs/apollo",
     "@formkit/nuxt",
     "@nuxtjs/algolia",
+    "nuxt-icon",
   ],
   plugins: ["~/plugins/apollo"],
   runtimeConfig: {