terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

add nav bar

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:31:13 +02:00
parent 19a23409da
commit 126fde7151
5 changed files with 257 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/nav.njk
+150
View File
@@ -0,0 +1,150 @@
<template id="tesoft-nav-template">
<style>
@import "/src/styles/default.css";
:host {
display: block;
}
nav {
background-color: var(--dark-gray);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: var(--small-padding);
}
nav > div {
align-items: center;
background-color: var(--gray);
border-radius: 0.5rem;
display: grid;
gap: 1rem;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto;
padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding);
}
.logo {
padding-right: var(--medium-padding);
}
slot {
display: grid;
gap: var(--small-padding);
grid-auto-columns: 14rem;
grid-auto-flow: column;
grid-template-rows: 4rem;
justify-content: start;
}
tesoft-button.small-menu {
display: none;
}
tesoft-button.small-menu::part(children) {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
width: 100%;
}
tesoft-button.small-menu span {
grid-column-start: 1;
grid-column-end: 3;
grid-row: 1;
}
tesoft-button.small-menu svg {
grid-column: 2;
grid-row: 1;
}
dialog {
background-color: var(--gray);
border-style: none;
border-radius: var(--button-border-radius);
}
dialog.small-menu tesoft-button {
width: 100%;
}
dialog.search {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
dialog.search > div {
display: grid;
gap: var(--medium-padding);
grid-template-columns: 1fr;
grid-template-rows: auto auto;
padding: var(--medium-padding);
width: 90vw;
}
::backdrop {
background-color: #222831D1;
}
@media (max-width: 480px) {
slot {
display: none;
}
tesoft-button.small-menu {
display: unset;
}
}
@media (min-width: 860px) {
dialog.search > div {
width: 80rem;
}
}
</style>
<nav>
<div>
<img class="logo" src="/public/assets/logo.svg">
<slot>
</slot>
<tesoft-button class="small-menu">
<span></span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
</svg>
</tesoft-button>
<tesoft-button class="search">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</tesoft-button>
</div>
</nav>
<dialog class="small-menu" closedby="any">
<div></div>
</dialog>
<dialog class="search" closedby="any">
<div>
<tesoft-input>
<svg slot="left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
</svg>
</tesoft-input>
<div class="results">
<!-- TODO -->
</div>
</div>
</dialog>
</template>
<script src="/src/components/nav.ts" type="module"></script>
{% includeOnce 'components/button.njk' %}
{% includeOnce 'components/input.njk' %}