Update mobile sidebar

appwrite · Jan 15, 2025 · 1298bf4 · 1298bf4
1 parent 30a574e
commit 1298bf4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
@@ -2,7 +2,7 @@
     import { Navbar, Icon, Layout, Link, Tooltip } from '@appwrite.io/pink-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
-    import { IconBell, IconMenuAlt4, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { IconMenuAlt4, IconSearch } from '@appwrite.io/pink-icons-svelte';
     import { DropList, Support, BreadcrumbsConsole } from '$lib/components';
     import { Feedback } from '$lib/components/feedback';
     import { feedback } from '$lib/stores/feedback';

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
@@ -22,6 +22,7 @@
         IconSearch,
         IconUserGroup
     } from '@appwrite.io/pink-icons-svelte';
+    import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -31,12 +32,14 @@
             title: string;
             percentage: number;
         };
+        sideBarIsOpen: boolean;
     };
 
     export let state: $$Props['state'] = 'closed';
     export let project: $$Props['project'];
     export let avatar: $$Props['avatar'];
     export let progressCard: $$Props['progressCard'];
+    export let sideBarIsOpen: boolean;
 
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth' },
@@ -53,10 +56,14 @@
         <div slot="top">
             <div class="only-mobile top">
                 <div class="icons">
-                    <Link.Button variant="quiet-muted"
-                        ><div class="icon"><Icon icon={IconSearch} /></div></Link.Button>
-                    <Link.Button variant="quiet-muted"
-                        ><div class="icon"><Icon icon={IconBell} /></div></Link.Button>
+                    <Link.Button
+                        variant="quiet-muted"
+                        on:click={() => {
+                            toggleCommandCenter();
+                            state = 'closed';
+                            sideBarIsOpen = false;
+                        }}>
+                        <div class="icon"><Icon icon={IconSearch} /></div></Link.Button>
                 </div>
                 <Link.Button><img src={avatar} alt={'Avatar'} class="avatar" /></Link.Button>
             </div>
@@ -364,5 +371,6 @@
 
     .divider {
         margin-block: var(--space-2, 4px);
+        width: 100%;
     }
 </style>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
@@ -84,6 +84,7 @@
         <Sidebar
             project={projects.find((project) => project.isSelected)}
             avatar={navbarProps.avatar}
+            bind:sideBarIsOpen
             bind:state />
     {/if}