Fale w navbarze
This commit is contained in:
parent
de3b45dfed
commit
d68d94553d
115
src/back/routes/common/navbar.css
Normal file
115
src/back/routes/common/navbar.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,6 @@
|
|||||||
import type { Context } from "koa";
|
import type { Context } from "koa";
|
||||||
import { button } from "src/back/elements/button.js";
|
import { button } from "src/back/elements/button.js";
|
||||||
|
import { icon } from "src/back/icons.js";
|
||||||
import { tempstream } from "tempstream";
|
import { tempstream } from "tempstream";
|
||||||
import type { FlatTemplatable } from "tempstream";
|
import type { FlatTemplatable } from "tempstream";
|
||||||
import { breadcrumbs } from "./breadcrumbs.js";
|
import { breadcrumbs } from "./breadcrumbs.js";
|
||||||
@ -26,7 +27,7 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
|
|||||||
)
|
)
|
||||||
.join("\n");
|
.join("\n");
|
||||||
|
|
||||||
return /* HTML */ tempstream`<nav>
|
return tempstream /* HTML */ `<nav>
|
||||||
<a href="/" class="nav-logo">
|
<a href="/" class="nav-logo">
|
||||||
<img
|
<img
|
||||||
src="/assets/logo"
|
src="/assets/logo"
|
||||||
@ -36,9 +37,29 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
|
|||||||
/>
|
/>
|
||||||
${ctx.$app.manifest.name}
|
${ctx.$app.manifest.name}
|
||||||
</a>
|
</a>
|
||||||
|
<ul class="desktop-menu">
|
||||||
|
${linksHTML}
|
||||||
|
</ul>
|
||||||
|
<div class="hamburger-menu-toggle">
|
||||||
|
<input type="checkbox" id="hamburger-menu-toggle-checkbox" />
|
||||||
|
<label
|
||||||
|
for="hamburger-menu-toggle-checkbox"
|
||||||
|
class="hamburger-menu__icon hamburger-menu__open-icon"
|
||||||
|
>
|
||||||
|
${icon("hamburger")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="hamburger-menu">
|
||||||
|
<label
|
||||||
|
for="hamburger-menu-toggle-checkbox"
|
||||||
|
class="hamburger-menu__icon hamburger-menu__close-icon"
|
||||||
|
>
|
||||||
|
${icon("hamburger-close")}
|
||||||
|
</label>
|
||||||
<ul>
|
<ul>
|
||||||
${linksHTML}
|
${linksHTML}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
${breadcrumbs(ctx)} `;
|
${breadcrumbs(ctx)} `;
|
||||||
}
|
}
|
||||||
|
|||||||
67
src/icons/hamburger-close.svg
Normal file
67
src/icons/hamburger-close.svg
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
id="icon"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="hamburger-close.svg"
|
||||||
|
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="7.6390567"
|
||||||
|
inkscape:cx="9.6870599"
|
||||||
|
inkscape:cy="26.377602"
|
||||||
|
inkscape:window-width="1536"
|
||||||
|
inkscape:window-height="832"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g2" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<style
|
||||||
|
id="style1">
|
||||||
|
.cls-1 {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-0.33652353,-1.2228587)">
|
||||||
|
<g
|
||||||
|
id="g2"
|
||||||
|
transform="translate(0,1.89814)">
|
||||||
|
<rect
|
||||||
|
id="rect1"
|
||||||
|
width="23.110205"
|
||||||
|
height="3.0114162"
|
||||||
|
x="10.832777"
|
||||||
|
y="-2.2211621"
|
||||||
|
inkscape:transform-center-x="-8.1456912"
|
||||||
|
transform="rotate(45)"
|
||||||
|
inkscape:transform-center-y="8.1456912" />
|
||||||
|
<rect
|
||||||
|
id="use2"
|
||||||
|
width="23.110205"
|
||||||
|
height="3.0114162"
|
||||||
|
x="-12.270555"
|
||||||
|
y="-23.893587"
|
||||||
|
inkscape:transform-center-x="-7.9605633"
|
||||||
|
transform="rotate(135)"
|
||||||
|
inkscape:transform-center-y="-7.960561" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
69
src/icons/hamburger.svg
Normal file
69
src/icons/hamburger.svg
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
id="icon"
|
||||||
|
width="32"
|
||||||
|
height="32"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="hamburger.svg"
|
||||||
|
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="7.6390567"
|
||||||
|
inkscape:cx="9.6870599"
|
||||||
|
inkscape:cy="26.377602"
|
||||||
|
inkscape:window-width="1536"
|
||||||
|
inkscape:window-height="832"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g1" />
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<style
|
||||||
|
id="style1">
|
||||||
|
.cls-1 {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(-0.33652353,-1.2228587)">
|
||||||
|
<g
|
||||||
|
id="g2"
|
||||||
|
transform="translate(0,1.89814)">
|
||||||
|
<rect
|
||||||
|
style=""
|
||||||
|
id="rect1"
|
||||||
|
width="23.110205"
|
||||||
|
height="3.0114162"
|
||||||
|
x="4.7814212"
|
||||||
|
y="8.0485344" />
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#rect1"
|
||||||
|
id="use1"
|
||||||
|
transform="translate(0,5.7704762)" />
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#use1"
|
||||||
|
id="use2"
|
||||||
|
transform="translate(0,5.7704762)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
21
src/main.css
21
src/main.css
@ -98,27 +98,6 @@ body {
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.jdd-editor {
|
body.jdd-editor {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user