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 { 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<FlatTemplatable> {
|
||||
)
|
||||
.join("\n");
|
||||
|
||||
return /* HTML */ tempstream`<nav>
|
||||
return tempstream /* HTML */ `<nav>
|
||||
<a href="/" class="nav-logo">
|
||||
<img
|
||||
src="/assets/logo"
|
||||
@ -36,9 +37,29 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
|
||||
/>
|
||||
${ctx.$app.manifest.name}
|
||||
</a>
|
||||
<ul>
|
||||
<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>
|
||||
${linksHTML}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
${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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user