Merge pull request #724 from w3bdesign/dev

Fix "method_lines" issue in components/Header/Hamburger

Author: w3bdesign

README.md

@@ -67,7 +67,7 @@ The current release has been tested and is confirmed working with the following
 
 ## Features
 
-- NextJS version 11.1.2
+- NextJS version 12.0.7
 - Connect to Woocommerce GraphQL API and list name, price and display image for products
 - Support for simple products and variable products
 - Cart handling and checkout with WooCommerce (Cash On Delivery only for now)

components/Header/Hamburger.component.jsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { useSpring, animated } from 'react-spring';
 import Link from 'next/link';
 
+import LINKS from '../../utils/constants/LINKS';
+
 /**
  * Shows the mobile menu.
  * Shows a X when mobile menu is expanded.
@@ -89,47 +91,26 @@ const Hamburger = () => {
           <line x1="6" y1="6" x2="18" y2="18"></line>
         </animated.svg>
       </label>
-
       {isExpanded && (
         <animated.div
           style={hamburgerSlideDownAnimation}
           id="mobile-menu"
           className="absolute right-0 z-10 w-full text-center text-black bg-white "
         >
           <ul>
-            <li className="w-full p-4 border-t border-gray-400 border-solid rounded">
-              <Link href="/">
-                <a
-                  className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"
-                  href="#"
-                >
-                  Hjem
-                </a>
-              </Link>
-            </li>
-            <li className="w-full p-4 border-t border-gray-400 border-solid rounded">
-              <Link href="/produkter">
-                <a
-                  className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"
-                  href="#"
-                >
-                  Produkter
-                </a>
-              </Link>
-            </li>
-            <li
-              id="mobile-li"
-              className="w-full p-4 border-t border-b border-gray-400 border-solid rounded"
-            >
-              <Link href="/kategorier">
-                <a
-                  className="inline-block px-4 py-2 no-underline hover:text-black hover:underline"
-                  href="#"
-                >
-                  Kategorier
-                </a>
-              </Link>
-            </li>
+            {LINKS.map(({ id, title, href }) => (
+              <li
+                key={id}
+                id="mobile-li"
+                className="w-full p-4 border-t border-gray-400 border-solid rounded"
+              >
+                <Link href={href}>
+                  <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
+                    {title}
+                  </a>
+                </Link>
+              </li>
+            ))}
           </ul>
         </animated.div>
       )}

utils/constants/LINKS.js

@@ -0,0 +1,20 @@
+//exports.default = [
+const LINKS = [
+  {
+    id: 0,
+    title: 'Hjem',
+    href: '/',
+  },
+  {
+    id: 1,
+    title: 'Produkter',
+    href: '/produkter',
+  },
+  {
+    id: 2,
+    title: 'Kategorier',
+    href: '/kategorier',
+  },
+];
+
+export default LINKS;