✨ Add Sidebar in Sheet example

Frontendland · Oct 1, 2024 · 49d8ef4 · 49d8ef4
1 parent 1df316e
commit 49d8ef4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/src/helpers.js b/src/helpers.js
@@ -7,11 +7,13 @@ export const getSections = ({
     return [
         {
             title: `Astro ${title}`,
+            type: 'astro',
             component: components[0],
             ...(props && props)
         },
         ...(components[1] ? [{
             title: `Svelte ${title}`,
+            type: 'svelte',
             component: components[1],
             ...(showSubTitle && {
                 subTitle: 'For interactive examples, visit <a href="/svelte">Svelte Playground</a>'
@@ -20,6 +22,7 @@ export const getSections = ({
         }] : []),
         ...(components[2] ? [{
             title: `React ${title}`,
+            type: 'react',
             component: components[2],
             ...(showSubTitle && {
                 subTitle: 'For interactive examples, visit <a href="/react">React Playground</a>'

diff --git a/src/pages/sidebar.astro b/src/pages/sidebar.astro
@@ -2,6 +2,8 @@
 import ComponentWrapper from '@static/ComponentWrapper.astro'
 import Layout from '@static/Layout.astro'
 
+import Button from '@components/Button/Button.astro'
+import Sheet from '@components/Sheet/Sheet.astro'
 import AstroSidebar from '@components/Sidebar/Sidebar.astro'
 import SvelteSidebar from '@components/Sidebar/Sidebar.svelte'
 import ReactSidebar from '@components/Sidebar/Sidebar.tsx'
@@ -69,6 +71,35 @@ const sections = getSections({
             <ComponentWrapper title="Sidebar with icons & states">
                 <section.component groups={itemGroupsWithIcons} />
             </ComponentWrapper>
+
+            {section.type === 'astro' && (
+                <ComponentWrapper title="Sidebar sheet">
+                    <Button theme="secondary" id="open-sidebar">
+                        Open Sidebar
+                    </Button>
+                    <Sheet
+                        id="sidebar"
+                        position="left"
+                    >
+                        <section.component groups={itemGroupsWithIcons} />
+                    </Sheet>
+                </ComponentWrapper>
+            )}
         </div>
     ))}
 </Layout>
+
+<style>
+    #sidebar {
+        width: 300px;
+    }
+</style>
+
+<script>
+    import { modal } from '@utils/modal'
+
+    modal({
+        trigger: '#open-sidebar',
+        modal: '#sidebar'
+    })
+</script>