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

menu icons, animations and color variable updates

Browse Source
This commit is contained in:
elisejakob
2024-05-21 00:16:32 +02:00
parent 963987278a
commit e5819d9000
8 changed files with 161 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,7 @@ export const Header = () => {
aria-label="Vis meny"
onClick={toggleMenu}
>
<span className={styles.menuIcon}></span>
<MenuIcon showMenu={showMenu} />
</button>
<div className={styles.fullMenu}>
<LogoIcon face="right" />
@ -152,3 +152,70 @@ export const Header = () => {
</header>
);
};
export const MenuIcon = ({ showMenu }: { showMenu: boolean }) => {
return (
<div className={styles.menuIcon}>
{showMenu ? (
<svg
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
fill="var(--color-menu-text)"
/>
<rect
x="101.964"
y="80.8135"
width="177.657"
height="29.9116"
transform="rotate(45 101.964 80.8135)"
fill="var(--color-menu-background)"
/>
<rect
x="227.586"
y="101.964"
width="177.657"
height="29.9116"
transform="rotate(135 227.586 101.964)"
fill="var(--color-menu-background)"
/>
</svg>
) : (
<svg
viewBox="0 0 309 309"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M154.2 308.4C239.362 308.4 308.4 239.362 308.4 154.2C308.4 69.0377 239.362 0 154.2 0C69.0377 0 0 69.0377 0 154.2C0 239.362 69.0377 308.4 154.2 308.4Z"
fill="var(--color-text)"
/>
<rect
x="65.3716"
y="139.244"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
<rect
x="65.3716"
y="199.244"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
<rect
x="65.3716"
y="79.2444"
width="177.657"
height="29.9116"
fill="var(--color-background)"
/>
</svg>
)}
</div>
);
};