1 files changed, 50 insertions, 0 deletions
diff --git a/src/webapp-old/src/components/carbon-extras/HeaderPanelToggle.svelte b/src/webapp-old/src/components/carbon-extras/HeaderPanelToggle.svelte
new file mode 100644
index 0000000..f7303ac
--- /dev/null
+++ b/src/webapp-old/src/components/carbon-extras/HeaderPanelToggle.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    import {ToggleSkeleton} from "carbon-components-svelte";
+    import {createEventDispatcher, onMount} from "svelte";
+
+    const dispatch = createEventDispatcher();
+    export let toggled = false;
+    export let size = "sm";
+
+    let toggle_id;
+
+    onMount(() => {
+        //@ts-ignore
+        document.getElementById(toggle_id).checked = toggled;
+    });
+
+    function handle_click(e) {
+        if (e.target.classList.contains("bx--toggle")) {
+            //@ts-ignore
+            document.getElementById(toggle_id).checked = !toggled;
+            dispatch("toggle");
+        }
+    }
+</script>
+<style lang="scss">
+  .bx--switcher__item-toggle {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.28572;
+    letter-spacing: 0.16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 2rem;
+    padding: 0.375rem 1rem;
+    color: #c6c6c6;
+    text-decoration: none;
+  }
+</style>
+<li class="bx--switcher__item">
+    <div class="bx--switcher__item-toggle">
+        <div style="display: flex;">
+            <slot/>
+        </div>
+        <ToggleSkeleton size="{size}"
+                        on:click={handle_click}
+                        bind:id={toggle_id}
+                        style="flex: initial !important;"
+                        {toggled}/>
+    </div>
+</li>