Merge branch 'mgn-dv' of https://github.com/appwrite/console into mgn-dv

src/lib/components/studio/sidebarOrganization.svelte

@@ -2,11 +2,13 @@
     import { ActionMenu, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
     import type { Organization } from '$lib/stores/organization';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
 
     export let organization: Organization;
+    export let isOpen = !($isTabletViewport || $isSmallViewport);
 </script>
 
-<nav>
+<nav class:isOpen>
     <Layout.Stack>
         <Typography.Text color="--fgcolor-neutral-tertiary">{organization.name}</Typography.Text>
 
@@ -25,13 +27,53 @@
     </Layout.Stack>
 </nav>
 
+<button
+    type="button"
+    class="overlay-button"
+    aria-label="Close sidebar"
+    class:overlay={isOpen}
+    on:click={() => {
+        isOpen = false;
+    }}></button>
+
 <style>
     nav {
         position: fixed;
         left: 0;
         top: 48px;
         width: 200px;
+        transform: translateX(-200px);
         height: calc(100vh - 48px);
         padding: var(--space-4) var(--space-8) var(--space-8) var(--space-8);
+        transition: transform 0.3s ease-in-out;
+        background-color: var(--bgcolor-neutral-default);
+        z-index: 10;
+    }
+
+    .isOpen {
+        transform: translateX(0);
+    }
+
+    .overlay {
+        background-color: rgba(0, 0, 0, 0.4);
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: #56565c1a;
+        backdrop-filter: blur(5px);
+        transition:
+            backdrop-filter 0.5s ease-in-out,
+            background-color 0.35s ease-in-out;
+        z-index: 1;
+        margin-top: 0 !important;
+    }
+
+    .overlay-button {
+        margin-top: calc(-1 * var(--space-6));
+        @media (min-width: 1024px) {
+            display: none;
+        }
     }
 </style>

src/lib/components/studio/sidebarProject.svelte

@@ -13,6 +13,7 @@
 
     export let project;
     export let showChat;
+    export let isOpen = true;
 </script>
 
 <nav style:--icon-fill="var(--fgcolor-neutral-tertiary)">

src/lib/layout/shellStudio.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
     import { AvatarInitials, Breadcrumbs } from '$lib/components/index.js';
-    import { Avatar, Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Avatar,
+        Divider,
+        Layout,
+        Card,
+        Typography,
+        Icon,
+        Button
+    } from '@appwrite.io/pink-svelte';
     import { page } from '$app/stores';
     import { organization, organizationList } from '$lib/stores/organization';
     import { user } from '$lib/stores/user';
@@ -11,10 +19,12 @@
     import { tierToPlan } from '$lib/stores/billing.js';
     import type { NavbarProject } from '$lib/components/navbar.svelte';
     import Chat from '$lib/components/chat/chat.svelte';
+    import { IconMenuAlt4 } from '@appwrite.io/pink-icons-svelte';
 
     $: hasProjectSidebar = $page.url.pathname.startsWith('/studio/project');
 
     export let loadedProjects: Array<NavbarProject> = [];
+    let showSideNavigation = false;
 
     $: organizations = $organizationList.teams.map((org) => {
         const billingPlan = org['billingPlan'];
@@ -65,7 +75,20 @@
     <Layout.Stack>
         <header>
             <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Breadcrumbs {organizations} />
+                <Layout.Stack direction="row" alignItems="center" gap="none">
+                    <div class="only-mobile-tablet">
+                        <Button.Button
+                            variant="secondary"
+                            size="xs"
+                            on:click={() => {
+                                showSideNavigation = !showSideNavigation;
+                            }}
+                            ><Icon
+                                icon={IconMenuAlt4}
+                                color="--fgcolor-neutral-tertiary" /></Button.Button>
+                    </div>
+                    <Breadcrumbs {organizations} />
+                </Layout.Stack>
                 <AvatarInitials name={$user?.name ?? ''} size="s" />
             </Layout.Stack>
         </header>
@@ -96,7 +119,9 @@
         {#if hasProjectSidebar}
             <SidebarProject project={$page.data.project} bind:showChat />
         {:else}
-            <SidebarOrganization organization={$page.data.organization} />
+            <SidebarOrganization
+                organization={$page.data.organization}
+                bind:isOpen={showSideNavigation} />
         {/if}
     </Layout.Stack>
 </main>
@@ -112,18 +137,30 @@
         top: 0;
         width: 100%;
         padding: var(--space-4);
+        z-index: 10;
+        background-color: var(--bgcolor-neutral-default);
     }
 
     .studio-content {
         min-height: calc(100vh - 48px);
         margin-top: 48px;
-        width: calc(100vw - 200px);
-        margin-left: 200px;
+        width: 100vw;
+
         padding-right: var(--space-4);
+        padding-left: var(--space-4);
+
+        @media (min-width: 1024px) {
+            width: calc(100vw - 200px);
+            margin-left: 200px;
+            padding-left: 0;
+        }
 
         &.project-sidebar {
             width: calc(100vw - 52px);
-            margin-left: 52px;
+
+            @media (min-width: 1024px) {
+                margin-left: 52px;
+            }
         }
     }
 
@@ -159,4 +196,10 @@
             opacity: 1;
         }
     }
+
+    @media (min-width: 1024px) {
+        .only-mobile-tablet {
+            display: none;
+        }
+    }
 </style>