diff --git a/web/src/components/general/Logo.tsx b/web/src/components/general/Logo.tsx index c6a1a49..1d83414 100644 --- a/web/src/components/general/Logo.tsx +++ b/web/src/components/general/Logo.tsx @@ -58,3 +58,28 @@ export const Logo = () => { ); }; + +export const LogoIcon = ({ face }: { face?: "left" | "right" }) => { + return ( +
+ + + + + + +
+ ); +}; diff --git a/web/src/components/general/logo.module.scss b/web/src/components/general/logo.module.scss index 4d339fd..0f70ce5 100644 --- a/web/src/components/general/logo.module.scss +++ b/web/src/components/general/logo.module.scss @@ -10,4 +10,17 @@ svg { width: 100%; } +} + +.logoIcon { + color: currentColor; + width: 3rem; + + svg { + width: 100%; + } + + &.right { + transform: scaleX(-1); + } } \ No newline at end of file diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx index 4cb5512..8e076fc 100644 --- a/web/src/components/layout/Header.tsx +++ b/web/src/components/layout/Header.tsx @@ -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 = () => { > - +
+ + +
); diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss index a02f272..47b0011 100644 --- a/web/src/components/layout/header.module.scss +++ b/web/src/components/layout/header.module.scss @@ -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 {