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

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

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

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