initial commit

src/lib/SLayout.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { RiInformationLine, RiMenu3Line, RiShieldLine } from "svelte-remixicon";
+
+let  { children, title, left, right } = $props();
+</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">{@render left()}</div>
+  <div class="layout-content">{@render children()}</div>
+  <div class="layout-right">{@render right()}</div>
+ 
+  <div class="layout-licon" onclick={() => {}}><RiMenu3Line /></div>
+  <div class="layout-ricon" onclick={() => {}}><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";
+    margin: 1em 2em;
+}
+
+.layout-left { grid-area: left; }
+.layout-right { grid-area: right; }
+.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: 240px auto 240px;
+  }
+
+  .layout-licon, .layout-ricon { display: none; }
+}
+
+@media (min-width: 960px) {
+  .layout {
+    grid-template-columns: 270px auto 270px;
+  }
+}
+
+@media (min-width: 1080px) {
+  .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;
+  }
+
+  .layout-left, .layout-right { display: none; }
+}
+
+
+</style>