ismailforgejo
/
nordicstorium
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix footer & navbar

This commit is contained in:
ismail 2026-02-02 23:31:51 +01:00
parent 7c32116b28
commit 34c2390e21
2 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Navbar.tsx
View File

@ -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 */}
<a href="/">HEM</a>
<Link href="/" prefetch={true}>HEM</Link>
</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 */}
<a href="/" className="logo-link">
<Link href="/" className="logo-link" prefetch={true}>
<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">

46
src/styles/components/Footer.css
View File

@ -40,10 +40,10 @@
color: var(--footer-text);
text-decoration: none;
transition: color 0.3s ease;
display: inline-block;
padding: 0.5rem 0.25rem;
display: inline-flex;
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);