From d68d94553d68614b775e036be59ba850a07574b6 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Mon, 20 Jul 2026 23:31:05 +0200 Subject: [PATCH] Fale w navbarze --- src/back/routes/common/navbar.css | 115 ++++++++++++++++++++++++++++++ src/back/routes/common/navbar.ts | 25 ++++++- src/icons/hamburger-close.svg | 67 +++++++++++++++++ src/icons/hamburger.svg | 69 ++++++++++++++++++ src/main.css | 21 ------ 5 files changed, 274 insertions(+), 23 deletions(-) create mode 100644 src/back/routes/common/navbar.css create mode 100644 src/icons/hamburger-close.svg create mode 100644 src/icons/hamburger.svg diff --git a/src/back/routes/common/navbar.css b/src/back/routes/common/navbar.css new file mode 100644 index 0000000..a7d15c5 --- /dev/null +++ b/src/back/routes/common/navbar.css @@ -0,0 +1,115 @@ +.nav-logo { + display: flex; + align-items: center; +} + +nav { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + + ul.desktop-menu { + display: flex; + gap: 8px; + padding-left: 0; + + li { + list-style: none; + } + } + + .hamburger-menu__icon { + cursor: pointer; + + svg * { + fill: var(--color-brand-accent) !important; + } + + &:hover { + transform: scale(1.1); + } + } + + .hamburger-menu-toggle { + display: none; + anchor-name: --hamburger-toggle; + + input { + display: none; + } + + .hamburger-menu__open-icon { + display: block; + anchor-name: --my-anchor; + } + + .hamburger-menu__close-icon { + display: none; + } + } + + .hamburger-menu { + display: none; + } + + @media (max-width: 1000px) { + .hamburger-menu-toggle { + display: flex; + align-items: center; + } + + ul.desktop-menu { + display: none; + } + + .hamburger-menu { + position: fixed; + position-anchor: --my-anchor; + top: calc(anchor(top) - 2px); + right: calc(anchor(right) - 14px); + display: flex; + opacity: 0; + transition: opacity 50ms; + pointer-events: none; + box-shadow: -3px 3px var(--color-brand-canvas-07); + background-color: var(--color-brand-canvas); + flex-flow: column; + padding: 12px; + padding-top: 2px; + align-items: flex-end; + + ul { + display: flex !important; + margin: 0; + padding: 0; + + flex-flow: column; + align-items: stretch; + justify-content: stretch; + width: 50%; + width: fit-content; + row-gap: 12px; + + li { + list-style: none; + + a { + margin: 0; + width: 100%; + } + } + } + } + + &:has(#hamburger-menu-toggle-checkbox:checked) { + .hamburger-menu__close-icon { + display: block; + } + + .hamburger-menu { + opacity: 1; + pointer-events: all; + } + } + } +} diff --git a/src/back/routes/common/navbar.ts b/src/back/routes/common/navbar.ts index d10cc0f..e03ac50 100644 --- a/src/back/routes/common/navbar.ts +++ b/src/back/routes/common/navbar.ts @@ -1,5 +1,6 @@ import type { Context } from "koa"; import { button } from "src/back/elements/button.js"; +import { icon } from "src/back/icons.js"; import { tempstream } from "tempstream"; import type { FlatTemplatable } from "tempstream"; import { breadcrumbs } from "./breadcrumbs.js"; @@ -26,7 +27,7 @@ export async function default_navbar(ctx: Context): Promise { ) .join("\n"); - return /* HTML */ tempstream`