147 lines
3.8 KiB
Plaintext
147 lines
3.8 KiB
Plaintext
<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;
|
|
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.exec {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
dialog.exec > div {
|
|
color: var(--light-gray);
|
|
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.exec > 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="2.4rem" viewBox="0 -960 960 960" width="2.4rem">
|
|
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
|
|
</svg>
|
|
</tesoft-button>
|
|
</div>
|
|
</nav>
|
|
|
|
<dialog class="small-menu" closedby="any">
|
|
<div></div>
|
|
</dialog>
|
|
|
|
<dialog class="exec" closedby="any">
|
|
<div>
|
|
<tesoft-input>
|
|
<svg slot="left" xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960"
|
|
width="2.4rem">
|
|
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
|
|
</svg>
|
|
</tesoft-input>
|
|
<div class="results">
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<script src="/src/components/nav.ts" type="module"></script>
|
|
{% includeOnce 'components/button.njk' %}
|
|
{% includeOnce 'components/input.njk' %}
|