add happy lil pig to expanded menu
This commit is contained in:
File diff suppressed because one or more lines are too long
@ -11,3 +11,16 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logoIcon {
|
||||||
|
color: currentColor;
|
||||||
|
width: 3rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
}
|
@ -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,7 +87,9 @@ export const Header = () => {
|
|||||||
>
|
>
|
||||||
<span className={styles.menuIcon}></span>
|
<span className={styles.menuIcon}></span>
|
||||||
</button>
|
</button>
|
||||||
<ul className={styles.fullMenu}>
|
<div className={styles.fullMenu}>
|
||||||
|
<LogoIcon face="right" />
|
||||||
|
<ul>
|
||||||
<li className={styles.menuItemLarge}>
|
<li className={styles.menuItemLarge}>
|
||||||
<Link
|
<Link
|
||||||
href="/arrangementer"
|
href="/arrangementer"
|
||||||
@ -145,6 +147,7 @@ export const Header = () => {
|
|||||||
<Link href="/lokaler">Lokaler*</Link>
|
<Link href="/lokaler">Lokaler*</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
transition: all var(--transition-easing);
|
||||||
|
|
||||||
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
|
padding: var(--spacing-sitepadding) 0;
|
||||||
transition: all var(--transition-easing);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menuItemLarge {
|
.menuItemLarge {
|
||||||
|
Reference in New Issue
Block a user