119 lines
2.6 KiB
Svelte
119 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { RiInformationLine, RiMenu3Line, RiShieldLine } from "svelte-remixicon";
|
|
|
|
let { children, title, left, right } = $props();
|
|
|
|
let mobiLeftActive = $state(false);
|
|
let mobiRightActive = $state(false);
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="layout">
|
|
<div class="layout-title">{title}</div>
|
|
<div class="layout-left" class:active={mobiLeftActive}>{@render left()}</div>
|
|
<div class="layout-content">{@render children()}</div>
|
|
<div class="layout-right" class:active={mobiRightActive}>{@render right()}</div>
|
|
|
|
<div class="layout-licon" onclick={() => {mobiLeftActive = !mobiLeftActive;}}><RiMenu3Line /></div>
|
|
<div class="layout-ricon" onclick={() => {mobiRightActive = !mobiRightActive;}}><RiInformationLine /></div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 300px auto 300px;
|
|
grid-template-rows: 2em auto;
|
|
grid-template-areas:
|
|
". title ."
|
|
"left center right";
|
|
padding: 1em 2em;
|
|
position: relative;
|
|
}
|
|
|
|
.layout-left { grid-area: left; padding-inline-end: 1em; }
|
|
.layout-right { grid-area: right; padding-inline-start: 1em; }
|
|
.layout-content { grid-area: center; }
|
|
.layout-title { grid-area: title; text-align: center; font-size: 1.4em; }
|
|
|
|
|
|
@media (min-width: 800px) {
|
|
.layout {
|
|
grid-template-columns: 180px auto 180px;
|
|
}
|
|
|
|
.layout-licon, .layout-ricon { display: none; }
|
|
|
|
}
|
|
@media (min-width: 800px) and (max-width: 959px) {
|
|
.layout-left, .layout-right {
|
|
font-size: smaller;
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: 960px) {
|
|
.layout {
|
|
grid-template-columns: 240px auto 240px;
|
|
}
|
|
|
|
.layout-licon, .layout-ricon { display: none; }
|
|
}
|
|
|
|
@media (min-width: 1080px) {
|
|
.layout {
|
|
grid-template-columns: 270px auto 270px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.layout {
|
|
grid-template-columns: 300px auto 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.layout {
|
|
grid-template-columns: 330px auto 330px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 799px) {
|
|
.layout {
|
|
grid-template-areas:
|
|
"licon title ricon"
|
|
"center center center";
|
|
|
|
grid-template-columns: 2em auto 2em;
|
|
|
|
padding: 1em .5em;
|
|
}
|
|
|
|
.layout-left, .layout-right { display: none; }
|
|
|
|
.layout-left.active, .layout-right.active {
|
|
display: block;
|
|
position: absolute;
|
|
top: 2.5em;
|
|
width: 80%;
|
|
min-height: calc(100vh - 6em);
|
|
background-color: var(--canvas);
|
|
z-index: 10;
|
|
}
|
|
|
|
.layout-left.active {
|
|
left: 0;
|
|
}
|
|
.layout-right.active {
|
|
right: 0;
|
|
}
|
|
|
|
.layout-content {
|
|
font-size: .9em;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</style>
|