docs: Improve example component + Fix sidebar on mobile

src/routes/components/Avatar.md

@@ -1,6 +1,6 @@
 Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Avatar } from "omorphia";
 </script>

src/routes/components/Badge.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Badge } from "omorphia";
 </script>

src/routes/components/Button.md

@@ -6,12 +6,12 @@
     import IconDownload from 'virtual:icons/heroicons-outline/download'
 </script>
 
-<Button color="primary"><IconDownload /> Download</Button>
+<Button color="raised"><IconDownload /> Download</Button>
 ```
 
-### Group example
+### Color variants example
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Button } from "omorphia";
     import IconDownload from 'virtual:icons/heroicons-outline/download'
@@ -26,6 +26,20 @@
     <Button color="danger-light">Light danger button</Button>
     <Button color="transparent">Transparent button</Button>
     <Button disabled>Disabled button</Button>
+</div>
+```
+
+### With icons example
+
+```svelte example raised
+<script lang="ts">
+    import { Button } from "omorphia";
+    import IconDownload from 'virtual:icons/heroicons-outline/download'
+    import IconHeart from 'virtual:icons/heroicons-outline/heart'
+</script>
+
+<div class="button-group">
     <Button color="primary"><IconDownload /></Button>
+    <Button><IconHeart /> Follow mod </Button>
 </div>
 ```

src/routes/components/Checkbox.md

@@ -1,6 +1,6 @@
 ### Text-only Example
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Checkbox } from "omorphia";
 </script>
@@ -10,7 +10,7 @@
 
 ### Text with Icon Example
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Checkbox } from "omorphia";
     import IconCarrot from 'virtual:icons/lucide/carrot'

src/routes/components/CheckboxList.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { CheckboxList } from "omorphia";
     import IconSquare from 'virtual:icons/lucide/square'

src/routes/components/CheckboxVirtualList.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { CheckboxVirtualList } from "omorphia";
     import IconStar from 'virtual:icons/heroicons-outline/star'

src/routes/components/Chips.md

@@ -1,6 +1,6 @@
 ### Simple example
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Chips } from "omorphia";
 </script>
@@ -20,7 +20,7 @@
 
 ### Force an option to be selected with `neverEmpty`
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Chips } from "omorphia";
 

src/routes/components/FormField.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { FormField } from "omorphia";
     import { TextInput } from "omorphia";

src/routes/components/NavRow.md

@@ -1,6 +1,6 @@
 `NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { NavRow } from "omorphia";
 </script>

src/routes/components/Select.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Select } from "omorphia";
     

src/routes/components/TextInput.md

@@ -1,4 +1,4 @@
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { TextInput } from "omorphia";
 </script>