From 49d8ef4dfa8da63c2b4115a245cb57d37244d86a Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 1 Oct 2024 09:07:02 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Sidebar=20in=20Sheet=20exampl?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/helpers.js          |  3 +++
 src/pages/sidebar.astro | 31 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/helpers.js b/src/helpers.js
index 1a7202f..6a115b3 100644
--- 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
index 93eca3d..996a64b 100644
--- 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>