Upgrade all packages and improve navbar design

components/Header/Navbar.component.jsx

@@ -13,10 +13,7 @@ const Navbar = () => {
   return (
     <header>
       <nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
-        <div
-          id="navbar-div"
-          className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "
-        >
+        <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0">
           <Hamburger />
           <div
             className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
@@ -25,14 +22,14 @@ const Navbar = () => {
             <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
               <li>
                 <Link href="/produkter">
-                  <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
+                  <a className="inline-block py-2 pr-4 no-underline hover:text-black hover:underline">
                     Produkter
                   </a>
                 </Link>
               </li>
               <li>
                 <Link href="/kategorier">
-                  <a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
+                  <a className="inline-block py-2 pr-4 no-underline hover:text-black hover:underline">
                     Kategorier
                   </a>
                 </Link>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-woocommerce",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Nextjs WooCommerce webshop",
   "main": "index.js",
   "scripts": {
@@ -12,24 +12,26 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@apollo/client": "^3.2.5",
-    "@types/react": "^16.9.55",
-    "algoliasearch": "^4.5.1",
+    "@apollo/client": "^3.3.6",
+    "@types/react": "^17.0.0",
+    "algoliasearch": "^4.8.3",
+    "autoprefixer": "^10.1.0",
     "graphql": "^15.4.0",
-    "next": "^10.0.0",
+    "next": "^10.0.3",
     "node-fetch": "^2.6.1",
     "nprogress": "^0.2.0",
+    "postcss": "^8.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^6.9.6",
+    "react-hook-form": "^6.13.0",
     "react-instantsearch-dom": "^6.8.2",
     "react-spring": "^8.0.27",
-    "styled-components": "^5.2.0",
-    "uuid": "^8.3.1"
+    "styled-components": "^5.2.1",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.11.1",
+    "babel-plugin-styled-components": "^1.12.0",
     "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^1.9.6"
+    "tailwindcss": "^2.0.2"
   }
 }

postcss.config.js

@@ -1,4 +1,7 @@
 module.exports = {
-    plugins: ['tailwindcss', 'postcss-preset-env'],
-  }
-
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+  // plugins: ['tailwindcss', 'postcss-preset-env'],
+};

postcss.config.js.example

@@ -0,0 +1,4 @@
+module.exports = {
+    plugins: ['tailwindcss', 'postcss-preset-env'],
+  }
+

styles/index.css

@@ -38,22 +38,6 @@
  display: none;
 }
 
-/* Fix for annoying CSS bug with NavBar moving slightly on front page only */
-
-@media only screen and (min-width: 1600px) {
-  #navbar-div {
-    margin-left: 330px;
-  }
-}
-
-@media only screen and (max-width: 769px) {
-  #navbar-div {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-/* End fix */
-
 .ais-SearchBox-reset {
   margin-left: 10px;
 }

tailwind.config.js

@@ -1,12 +1,11 @@
 module.exports = {
   purge: ['./components/**/*.jsx', './pages/**/*.js'],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
-  variants: {},
-  plugins: [],
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
+  variants: {
+    extend: {},
   },
-};
+  plugins: [],
+}

tailwind.config.js.example

@@ -0,0 +1,12 @@
+module.exports = {
+  purge: ['./components/**/*.jsx', './pages/**/*.js'],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+};