edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add happy lil pig to expanded menu

Browse Source
This commit is contained in:
elisejakob
2024-05-14 21:28:29 +02:00
parent 08b2e5387d
commit ba93e7e783
4 changed files with 108 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/general/Logo.tsx
View File

File diff suppressed because one or more lines are too long

13
web/src/components/general/logo.module.scss
View File

@ -11,3 +11,16 @@
width: 100%;
}
}
.logoIcon {
color: currentColor;
width: 3rem;
svg {
width: 100%;
}
&.right {
transform: scaleX(-1);
}
}

121
web/src/components/layout/Header.tsx
View File

@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import styles from "./header.module.scss";
import { Logo } from "../general/Logo";
import { Logo, LogoIcon } from "@/components/general/Logo";
export const Header = () => {
const [showMenu, setShowMenu] = useState(false);
@ -87,64 +87,67 @@ export const Header = () => {
>
<span className={styles.menuIcon}></span>
</button>
<ul className={styles.fullMenu}>
<li className={styles.menuItemLarge}>
<Link
href="/arrangementer"
data-active={pathname === "/arrangementer"}
>
Arrangementer
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/" data-active={pathname === "/praktisk"}>
Praktisk info
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/utleie" data-active={pathname === "/utleie"}>
Utleie
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/" data-active={pathname === "/medlem"}>
Bli medlem
</Link>
</li>
<li className={styles.divider}>
<Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
Siste nytt
</Link>
</li>
<li>
<Link href="/" data-active={pathname === "/om"}>
Om oss
</Link>
</li>
<li>
<Link href="/kontakt" data-active={pathname === "/kontakt"}>
Kontakt
</Link>
</li>
<li>
<Link href="/" data-active={pathname === "/frivillig"}>
Bli frivillig
</Link>
</li>
<li className={styles.search}>
<label>
<p>Søk</p>
<input type="text" />
</label>
</li>
<li className={styles.galtinn}>
<Link href="/">Mitt medlemskap &rarr;</Link>
</li>
<li>
{/* TODO: skal trolig ikke være så synlig ved lansering */}
<Link href="/lokaler">Lokaler*</Link>
</li>
</ul>
<div className={styles.fullMenu}>
<LogoIcon face="right" />
<ul>
<li className={styles.menuItemLarge}>
<Link
href="/arrangementer"
data-active={pathname === "/arrangementer"}
>
Arrangementer
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/" data-active={pathname === "/praktisk"}>
Praktisk info
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/utleie" data-active={pathname === "/utleie"}>
Utleie
</Link>
</li>
<li className={styles.menuItemLarge}>
<Link href="/" data-active={pathname === "/medlem"}>
Bli medlem
</Link>
</li>
<li className={styles.divider}>
<Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
Siste nytt
</Link>
</li>
<li>
<Link href="/" data-active={pathname === "/om"}>
Om oss
</Link>
</li>
<li>
<Link href="/kontakt" data-active={pathname === "/kontakt"}>
Kontakt
</Link>
</li>
<li>
<Link href="/" data-active={pathname === "/frivillig"}>
Bli frivillig
</Link>
</li>
<li className={styles.search}>
<label>
<p>Søk</p>
<input type="text" />
</label>
</li>
<li className={styles.galtinn}>
<Link href="/">Mitt medlemskap &rarr;</Link>
</li>
<li>
{/* TODO: skal trolig ikke være så synlig ved lansering */}
<Link href="/lokaler">Lokaler*</Link>
</li>
</ul>
</div>
</nav>
</header>
);

12
web/src/components/layout/header.module.scss
View File

@ -84,12 +84,16 @@
background: var(--color-chateauBlue);
color: var(--color-betongGray);
padding: var(--spacing-sitepadding);
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1.4rem;
transition: all var(--transition-easing);
ul {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 1.4rem;
padding: var(--spacing-sitepadding) 0;
}
}
.menuItemLarge {