Fix CheckBoxList SVG icons + Move docs source

2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
--- a/src/docs/components/Sidebar.svelte
+++ b/src/docs/components/Sidebar.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+
+    import IconMenu from 'virtual:icons/lucide/menu';
+
+    const components = Object.keys(import.meta.glob('../../routes/components/**'))
+        .map((it) => it.replace('../../routes/components/', '').replace('.md', ''))
+        .sort();
+
+    const classes = Object.keys(import.meta.glob('../../routes/classes/**'))
+        .map((it) => it.replace('../../routes/classes/', '').replace('.md', ''))
+        .sort();
+
+    let slideIn = false;
+
+    $: if ($page.url.pathname) {
+        slideIn = false;
+    }
+</script>
+
+<nav class="sidebar" class:slideIn>
+    <div class="sidebar__content">
+        <div class="section">
+            <span class="section__title">Getting started</span>
+            <a href="/" class="section__link">Introduction</a>
+            <a href="/getting-started/configure" class="section__link">Configure</a>
+            <a href="/getting-started/icons" class="section__link">Using Icons</a>
+            <!-- <a href="/getting-started/css" class="section__link">Writing CSS</a> -->
+            <a href="/getting-started/illustrations" class="section__link">Illustrations</a>
+            <a href="/getting-started/utils" class="section__link">Built-in utilities</a>
+            <a href="/getting-started/generator" class="section__link">Generator plugin</a>
+        </div>
+
+        <div class="section">
+            <span class="section__title">Components</span>
+            {#each components as component}
+                <a href="/components/{component}" class="section__link">{component}</a>
+            {/each}
+        </div>
+
+        <div class="section">
+            <span class="section__title">Classes</span>
+            {#each classes as page}
+                <a href="/classes/{page}" class="section__link">{page}</a>
+            {/each}
+        </div>
+    </div>
+
+    <button class="sidebar__toggle" on:click={() => (slideIn = !slideIn)}>
+        <IconMenu />
+    </button>
+</nav>
+
+<style lang="postcss">
+    :root {
+        --sidebar-color: hsl(220, 15%, 40%);
+        --title-color: hsl(216, 10%, 80%);
+        --link-color: hsl(216, 10%, 90%);
+        --scrollbar-thumb-color: hsl(216, 10%, 70%);
+    }
+
+    .sidebar {
+        background-color: var(--sidebar-color);
+        color: var(--title-color);
+        width: var(--sidebar-width);
+        max-width: 70vw;
+        position: fixed;
+        left: -100%;
+        top: 0;
+        z-index: 5;
+        transition: left 0.2s ease-in-out;
+        box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
+
+        @media (--md) {
+            left: 0;
+        }
+
+        &__content {
+            mask-image: linear-gradient(
+                to bottom,
+                transparent,
+                hsla(0, 0%, 0%, 1) 5% 95%,
+                transparent
+            );
+            padding: 88px 32px 32px;
+            height: 100vh;
+            max-height: 100vh;
+            overflow-y: auto;
+            grid-gap: 40px;
+            display: flex;
+            flex-direction: column;
+
+            .section {
+                display: flex;
+                flex-direction: column;
+                grid-gap: 0.5rem;
+
+                &__title {
+                    text-transform: uppercase;
+                    font-size: 12px;
+                }
+
+                &__link {
+                    color: var(--link-color);
+                    text-decoration: none;
+
+                    &:hover {
+                        color: white;
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+
+        &__toggle {
+            position: fixed;
+            left: 16px;
+            bottom: 16px;
+            padding: 8px;
+            aspect-ratio: 1 / 1;
+            background-color: var(--accent-color);
+            z-index: 20;
+            border-radius: var(--rounded);
+            color: white;
+            box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+            transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
+
+            :global(.icon) {
+                width: 32px;
+                height: auto;
+            }
+
+            @media (--md) {
+                visibility: hidden;
+            }
+        }
+
+        &.slideIn {
+            left: 0;
+
+            .sidebar__toggle {
+                left: calc(32px + min(70vw, var(--sidebar-width)));
+            }
+        }
+
+        scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: var(--sidebar-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar-thumb-color);
+            border-radius: 999px;
+            border: 3px solid var(--sidebar-color);
+        }
+    }
+</style>