Fix sticky footer navbar

Author: w3bdesign

components/Cart/Cart.component.jsx

@@ -8,7 +8,7 @@ import { AppContext } from 'utils/context/AppContext';
  * Currently only displays a sample cart.
  * Displays amount of items in cart.
  */
-const Cart = () => {
+const Cart = ({ stickyNav }) => {
   const [cart] = useContext(AppContext);
 
   const productsCount =
@@ -22,7 +22,7 @@ const Cart = () => {
           aria-label="Handlekurv"
         >
           <svg
-            className="fill-current"
+            className={`${stickyNav ? 'fill-white' : 'fill-current'}`}
             xmlns="https://www.w3.org/2000/svg"
             width="55"
             height="55"
@@ -40,7 +40,10 @@ const Cart = () => {
       </Link>
       {/*Cart quantity */}
       {productsCount && (
-        <span className="w-6 h-6 pb-2 -mt-5 text-center text-white bg-black rounded-full">
+        <span
+          className={`w-6 h-6 pb-2 -mt-5 text-center rounded-full         
+          ${stickyNav ? 'text-black bg-white' : 'text-white bg-black'}`}
+        >
           {productsCount}
         </span>
       )}

components/Footer/Stickynav.component.jsx

@@ -13,9 +13,9 @@ import Hamburger from '../Header/Hamburger.component';
 const Stickynav = () => (
   <nav
     id="footer"
-    className="fixed bottom-0 z-50 w-full py-1 bg-white md:hidden lg:hidden xl:hidden"
+    className="fixed bottom-0 z-50 w-full md:hidden lg:hidden xl:hidden"
   >
-    <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
+    <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />
       <div
         className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
@@ -41,7 +41,7 @@ const Stickynav = () => (
       <div className="flex items-center order-2 md:order-3" id="nav-content">
         <Search />
         <SVGMobileSearchIcon />
-        <Cart />
+        <Cart stickyNav />
       </div>
     </div>
   </nav>

components/Header/Hamburger.component.jsx

@@ -49,7 +49,7 @@ const Hamburger = () => {
   const opacityFull = 'opacity-100 group-hover:opacity-100';
 
   return (
-    <div className="z-50 md:hidden lg:hidden xl:hidden bg-gray-800">
+    <div className="z-50 md:hidden lg:hidden xl:hidden bg-blue-800">
       <button
         className="flex flex-col w-16 rounded justify-center items-center group"
         data-cy="hamburger"

components/SVG/SVGMobileSearchIcon.component.jsx

@@ -32,11 +32,11 @@ const SVGMobileSearchIcon = () => {
           onClick={() => {
             setisExpanded(!isExpanded);
           }}
-          fill="#000000"
+          fill="#fff"
           xmlns="https://www.w3.org/2000/svg"
           viewBox="0 0 50 50"
-          width="20px"
-          height="20px"
+          width="35px"
+          height="35px"
         >
           <path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z" />
         </svg>