style: remove icon in docs menu (#340)

Replace repetitive icon with letters in doc menu.

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/docs/components/DocsIconMenu.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { DEFAULT_ICON_SIZE } from "$lib/constants/constants";
+  import { menuCollapsed } from "$lib";
+  import { fade } from "svelte/transition";
+
+  export let text: string;
+</script>
+
+{#if $menuCollapsed}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={DEFAULT_ICON_SIZE}
+    viewBox="0 0 24 24"
+    width={DEFAULT_ICON_SIZE}
+    fill="currentColor"
+    in:fade><text x="4" y="20">{text}</text></svg
+  >
+{/if}
+
+<style lang="scss">
+  text {
+    font-size: var(--font-size-h3);
+    font-weight: bold;
+  }
+</style>

src/docs/components/DocsMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import MenuItem from "$lib/components/MenuItem.svelte";
-  import IconLaunchpad from "$lib/icons/IconLaunchpad.svelte";
+  import DocsIconMenu from "$docs/components/DocsIconMenu.svelte";
 
   let pathname: string;
   $: ({
@@ -10,38 +10,38 @@
 </script>
 
 <MenuItem href="/" selected={pathname === "/"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="H" slot="icon" />
   Home</MenuItem
 >
 <MenuItem href="/start" selected={pathname === "/start"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="G" slot="icon" />
   Getting Started
 </MenuItem>
 <MenuItem
   href="/components"
   selected={pathname.startsWith("/components")}
   on:click
 >
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="C" slot="icon" />
   Components
 </MenuItem>
 <MenuItem
   href="/utility-classes"
   selected={pathname.startsWith("/utility-classes")}
   on:click
 >
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="U" slot="icon" />
   Utility Classes
 </MenuItem>
 <MenuItem href="/styling" selected={pathname.startsWith("/styling")} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="S" slot="icon" />
   Styling
 </MenuItem>
 <MenuItem href="/icons" selected={pathname.startsWith("/icons")} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="I" slot="icon" />
   Icons
 </MenuItem>
 <MenuItem href="/resources" selected={pathname === "/resources"} on:click>
-  <IconLaunchpad slot="icon" />
+  <DocsIconMenu text="R" slot="icon" />
   Resources
 </MenuItem>