feat: add component to toggle glossary

src/lib/components/features/calendar-month-select.svelte

@@ -25,7 +25,7 @@
   <select
     id="month-select"
     bind:value={selectedMonth}
-    class="inline-block border-2 border-white rounded-lg bg-primary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed appearance-none"
+    class="inline-block border-2 border-white rounded-lg bg-tint text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each months as month}
       <option value={month.value}>{month.label}</option>

src/lib/components/features/calendar-type-select.svelte

@@ -14,7 +14,7 @@
   <select
     id="type-select"
     bind:value={selectedType}
-    class="inline-block border-2 border-white rounded-lg bg-primary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed appearance-none"
+    class="inline-block border-2 border-white rounded-lg bg-tint text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each types as type}
       <option value={type.value}>{type.label}</option>

src/lib/components/features/calendar-year-select.svelte

@@ -9,7 +9,7 @@
   <select
     id="year-select"
     bind:value={selectedYear}
-    class="inline-block border-2 border-white rounded-lg bg-primary text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed appearance-none"
+    class="inline-block border-2 border-white rounded-lg bg-tint text-black/70 py-2 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer leading-relaxed"
   >
     {#each years as year}
       <option value={year}>{year}</option>

src/lib/components/features/glossary-toggle.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  let isOpen = false;
+
+  function toggleSidebar() {
+    isOpen = !isOpen;
+  }
+</script>
+
+<div class="fixed left-0 top-1/2 -translate-y-1/2 flex z-50">
+  <div class="relative">
+    <div
+      class="flex transition-transform duration-300 ease-in-out"
+      class:translate-x-0={isOpen}
+      class:-translate-x-[calc(100%-2.5rem)]={!isOpen}
+    >
+      <div
+        class="w-90 relative shadow-lg p-3 rounded-r-lg h-[50vh] w-[50vh] overflow-y-auto"
+      >
+        <div
+          class="absolute top-1/2 -translate-y-1/2 transition-opacity duration-300 right-4 z-20"
+          class:opacity-0={isOpen}
+          class:opacity-100={!isOpen}
+        >
+          <span
+            class="block -rotate-180 font-medium text-black/70"
+            style="writing-mode: vertical-rl;"
+          >
+            GLOSSAR
+          </span>
+        </div>
+
+        <div
+          class="absolute inset-0 bg-primary transition-opacity duration-300 rounded-r-lg"
+          class:opacity-99={isOpen}
+          class:opacity-100={!isOpen}
+        ></div>
+
+        <div
+          class="flex flex-col justify-center relative z-10 transition-opacity duration-300 h-full"
+          class:opacity-0={!isOpen}
+          class:opacity-100={isOpen}
+        >
+          <div class="p-4">
+            <table class="w-full">
+              <tbody>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">1 WT</td>
+                  <td class="py-2">1. Werktag im Monat (nach BDEW)</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">3LWT</td>
+                  <td class="py-2">3. letzter Werktag im Monat (nach BDEW)</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">MaBiS</td>
+                  <td class="py-2"
+                    >Marktregeln für die Durchführung der Bilanzkreisabrechnung
+                    Strom</td
+                  >
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">GPKE</td>
+                  <td class="py-2"
+                    >Geschäftsprozesse zur Kundenbelieferung mit Elektrizität</td
+                  >
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">GeLi Gas</td>
+                  <td class="py-2">Geschäftsprozesse Lieferantenwechsel Gas</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">KOV</td>
+                  <td class="py-2">Kooperationsvereinbarung Gas</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">BKV</td>
+                  <td class="py-2">Bilanzkreisverantwortlicher</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">MGV</td>
+                  <td class="py-2">Marktgebietsverantwortlicher</td>
+                </tr>
+                <tr>
+                  <td class="py-2 pr-4 align-top font-medium">ÜNB</td>
+                  <td class="py-2">Übertragungsnetzbetreiber</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <button
+        on:click={toggleSidebar}
+        class="absolute top-1/2 -translate-y-1/2 -right-5 bg-tint rounded-full p-1 hover:scale-110 transition-transform duration-200"
+      >
+        {#if isOpen}
+          <!-- toggle off -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-circle-chevron-left"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="m14 16-4-4 4-4" />
+          </svg>
+        {:else}
+          <!-- toggle on -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-circle-chevron-right"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="m10 8 4 4-4 4" />
+          </svg>
+        {/if}
+      </button>
+    </div>
+  </div>
+</div>

src/lib/components/index.ts

@@ -17,3 +17,4 @@ export { default as CalendarTable } from "$lib/components/features/calendar-tabl
 export { default as CalendarTypeSelect } from "$lib/components/features/calendar-type-select.svelte";
 export { default as CalendarYearSelect } from "$lib/components/features/calendar-year-select.svelte";
 export { default as DownloadButton } from "$lib/components/features/download-button.svelte";
+export { default as GlossaryToggle } from "$lib/components/features/glossary-toggle.svelte";

src/routes/fristenkalender/+page.svelte

@@ -4,7 +4,7 @@
   import { goto } from "$app/navigation";
   import { base } from "$app/paths";
   import { page } from "$app/stores";
-  import { DownloadButton, Header } from "$lib/components";
+  import { DownloadButton, GlossaryToggle, Header } from "$lib/components";
   import CalendarTable from "$lib/components/features/calendar-table.svelte";
   import type { MonthValue } from "$lib/types/calendar-month";
   import type { TypeValue } from "$lib/types/calendar-type";
@@ -82,7 +82,7 @@
   }
 </script>
 
-<div class="flex flex-col h-full bg-tint">
+<div class="flex flex-col h-full bg-tint relative">
   <Header bind:selectedYear bind:selectedMonth bind:selectedType />
   <div class="flex flex-row justify-between">
     <div class="flex flex-col px-24 py-12">
@@ -103,4 +103,5 @@
   <div class="flex-1 min-h-0 px-24 pb-1">
     <CalendarTable {selectedYear} {selectedMonth} {selectedType} />
   </div>
+  <GlossaryToggle />
 </div>