fix footer & navbar

src/components/Navbar.tsx

@@ -43,8 +43,7 @@ export default function Navbar() {
 
           <ul className="nav-links desktop-links">
             <li className={pathname === "/" ? "current-menu-item" : ""}>
-              {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+              <Link href="/" prefetch={true}>HEM</Link>
-              <a href="/">HEM</a>
             </li>
             <li className={pathname === "/products" ? "current-menu-item" : ""}>
               <Link href="/products" prefetch={true}>PRODUKTER</Link>
@@ -61,10 +60,8 @@ export default function Navbar() {
           </ul>
         </div>
 
-        {/* Center: Logo Only */}
         <div className="nav-center">
-          {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+          <Link href="/" className="logo-link" prefetch={true}>
-          <a href="/" className="logo-link">
             <Image
               src={logo}
               alt="Logo"
@@ -73,7 +70,7 @@ export default function Navbar() {
               className="logo"
               priority
             />
-          </a>
+          </Link>
         </div>
 
         {/* Right side: profile + theme toggle */}
@@ -87,11 +84,15 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b
   const [isOpen, setIsOpen] = useState(false);
   const { unreadCount } = useNotification();
   const { theme, setTheme, resolvedTheme } = useTheme();
+
+  // Start with true to match SSR, then update after mount based on consent
   const [showThemeToggle, setShowThemeToggle] = useState(true);
+  const [consentChecked, setConsentChecked] = useState(false);
 
   // Determine profile destination safely to avoid hydration mismatch
   const profileHref = isMounted && isAuthenticated ? "/me" : "/login";
 
+  // Check consent after mount to avoid hydration mismatch
   useEffect(() => {
     const checkConsent = () => {
       const saved = localStorage.getItem("cookie_consent");
@@ -100,13 +101,17 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b
           const parsed = JSON.parse(saved);
           if (parsed.functional === false) {
             setShowThemeToggle(false);
-            return;
+          } else {
+            setShowThemeToggle(true);
           }
         } catch (e) {
           console.error("Failed to parse cookie consent", e);
+          setShowThemeToggle(true);
         }
+      } else {
+        setShowThemeToggle(true);
       }
-      setShowThemeToggle(true);
+      setConsentChecked(true);
     };
 
     checkConsent();
@@ -114,6 +119,9 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b
     return () => window.removeEventListener("cookie-consent-updated", checkConsent);
   }, []);
 
+  // Only show toggle if: mounted, consent checked, and consent is granted
+  const shouldShowToggle = isMounted && consentChecked && showThemeToggle;
+
   useEffect(() => {
     if (theme && typeof window !== "undefined") {
       document.cookie = `theme=${theme}; path=/; max-age=31536000`; // 1-year expiry
@@ -168,7 +176,7 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b
         </div>
 
         {/* Theme toggle (Always visible) */}
-        {showThemeToggle && (
+        {shouldShowToggle && (
           <div className="theme-toggle flex">
             <label className="flex items-center cursor-pointer">
               <div className="relative">
@@ -239,7 +247,7 @@ function NavbarClientExtras({ isAuthenticated, isMounted }: { isAuthenticated: b
               </div>
 
               {/* Mobile Theme Toggle */}
-              {showThemeToggle && (
+              {shouldShowToggle && (
                 <div className="flex items-center justify-between">
                   <span className="text-[var(--nav-text)] font-semibold uppercase tracking-wider">Tema</span>
                   <div className="theme-toggle">

src/styles/components/Footer.css

@@ -40,10 +40,10 @@
   color: var(--footer-text);
   text-decoration: none;
   transition: color 0.3s ease;
-  display: inline-block;
+  display: inline-flex;
-  padding: 0.5rem 0.25rem;
+  align-items: center;
+  justify-content: center;
   min-height: 44px;
-  min-width: 44px;
 }
 
 .footer__item a:hover {
@@ -54,15 +54,17 @@
 .footer__link-button {
   background: none;
   border: none;
-  padding: 0.5rem 0.25rem;
+  padding: 0;
   font-family: 'Montserrat', sans-serif;
   font-size: inherit;
   color: var(--footer-text);
   text-decoration: none;
   cursor: pointer;
   transition: color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   min-height: 44px;
-  min-width: 44px;
 }
 
 .footer__link-button:hover {
@@ -74,16 +76,16 @@
   font-family: 'Montserrat', sans-serif;
   font-size: clamp(0.75rem, 2vw, 0.85rem);
   color: var(--footer-contact-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
 }
 
 .footer__contact a {
   color: var(--footer-contact-text);
   text-decoration: none;
   transition: color 0.3s ease;
-  display: inline-block;
-  padding: 0.5rem 0.25rem;
-  min-height: 44px;
-  min-width: 44px;
 }
 
 .footer__contact a:hover {
@@ -123,23 +125,11 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
-    gap: 1rem 0;
+    gap: 0;
     text-align: center;
-    position: relative;
   }
 
-  /* Centered vertical divider using pseudo-element */
+
-  .footer__content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 2px;
-    height: calc(100% - 3rem);
-    /* Stop before copyright */
-    background: rgba(0, 0, 0, 0.1);
-  }
 
   .footer__links {
     flex-direction: column;
@@ -147,6 +137,8 @@
     justify-content: flex-start;
     padding-right: 1rem;
     margin-bottom: 0;
+    gap: 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
   }
 
   .footer__contact-details {
@@ -156,6 +148,7 @@
     padding-left: 1rem;
     text-align: center;
     margin-bottom: 0;
+    gap: 0;
   }
 
   .footer__copyright {
@@ -163,7 +156,7 @@
     width: 100%;
     text-align: center;
     padding-top: 1rem;
-    border-top: 2px solid rgba(0, 0, 0, 0.05);
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
   }
 
   /* Reset text alignments to center */
@@ -184,11 +177,6 @@
     padding: 0 clamp(0.5rem, 1.5vw, 0.75rem);
   }
 
-  .footer__links,
-  .footer__contact-details {
-    gap: 0.4rem;
-  }
-
   .footer__item,
   .footer__contact {
     font-size: clamp(0.65rem, 1.6vw, 0.75rem);