Merge pull request #2383 from appwrite/org-popover

eslint.config.js

@@ -32,7 +32,9 @@ export default ts.config(
             'svelte/no-at-html-tags': 'off',
             'svelte/no-useless-mustaches': 'off',
             'svelte/no-reactive-reassign': 'off',
-            'svelte/no-reactive-literals': 'off'
+            'svelte/no-reactive-literals': 'off',
+            // TODO: @itznotabug, this requires a big refactor!
+            'svelte/no-navigation-without-resolve': 'off'
         }
     },
     {

src/lib/components/breadcrumbs.svelte

@@ -18,14 +18,15 @@
     import { BottomSheet } from '$lib/components';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { isCloud } from '$lib/system';
-    import { goto } from '$app/navigation';
+    import { goto, beforeNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { currentPlan, newOrgModal, organization } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { type Models, Query } from '@appwrite.io/console';
+    import { ID, type Models, Query } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
     import { page } from '$app/state';
     import { BillingPlan } from '$lib/constants';
+    import { onDestroy } from 'svelte';
 
     type Organization = {
         name: string;
@@ -34,11 +35,13 @@
         isSelected: boolean;
     };
 
+    const menubarBuilder = createMenubar();
     const {
         elements: { menubar },
         builders: { createMenu }
-    } = createMenubar();
+    } = menubarBuilder;
 
+    const orgMenuBuilder = createMenu();
     const {
         elements: {
             trigger: triggerOrganizations,
@@ -46,8 +49,9 @@
             item: itemOrganizations,
             separator: separatorOrganizations
         },
-        builders: { createSubmenu: createSubmenuOrganizations, createMenuRadioGroup }
-    } = createMenu();
+        builders: { createSubmenu: createSubmenuOrganizations, createMenuRadioGroup },
+        states: orgMenuStates
+    } = orgMenuBuilder;
 
     const {
         elements: { radioGroup: radioGroupOrganizations }
@@ -57,14 +61,16 @@
         elements: { subMenu: subMenuOrganizations, subTrigger: subTriggerOrganizations }
     } = createSubmenuOrganizations();
 
+    const projectsMenuBuilder = createMenu();
     const {
         elements: {
             trigger: triggerProjects,
             menu: menuProjects,
             item: itemProjects,
             separator: separatorProjects
-        }
-    } = createMenu();
+        },
+        states: projectsMenuStates
+    } = projectsMenuBuilder;
 
     let isLoadingProjects = false;
     let loadedProjects: Models.ProjectList = { total: 0, projects: [] };
@@ -76,6 +82,23 @@
     let organisationBottomSheetOpen = false;
     let projectsBottomSheet: Promise<SheetMenu | null> = null;
 
+    function closeAllMenus() {
+        if (orgMenuStates?.open) {
+            orgMenuStates.open.set(false);
+        }
+
+        if (projectsMenuStates?.open) {
+            projectsMenuStates.open.set(false);
+        }
+
+        projectsBottomSheetOpen = false;
+        organisationBottomSheetOpen = false;
+    }
+
+    beforeNavigate(closeAllMenus);
+
+    onDestroy(closeAllMenus);
+
     function createOrg() {
         trackEvent(Click.OrganizationClickCreate, { source: 'breadcrumbs' });
         if (isCloud) {
@@ -212,7 +235,7 @@
             ? $currentPlan.name
             : selectedOrg?.tierName; // fallback
 
-    $: derivedKey = `${selectedOrg?.$id}-${currentProject?.$id}`;
+    $: derivedKey = `${selectedOrg?.$id}-${currentProject?.$id}-${ID.unique()}`;
 
     $: organizationId = currentProject?.teamId;
 

src/lib/components/sidebar.svelte

@@ -138,7 +138,7 @@
                 <Tooltip placement="right" disabled={state !== 'icons'}>
                     <a
                         class="progress-card"
-                        href={`/console/project-${project.region}-${project.$id}/get-started`}
+                        href={`/console/project-${project?.region}-${project?.$id}/get-started`}
                         on:click={() => {
                             trackEvent('click_menu_get_started');
                             sideBarIsOpen = false;

src/lib/layout/shell.svelte

@@ -205,7 +205,7 @@
         <Navbar {...navbarProps} bind:sideBarIsOpen={$isSidebarOpen} bind:showAccountMenu />
     {/if}
 
-    {#if !$isNewWizardStatusOpen}
+    {#if !$isNewWizardStatusOpen && isProjectPage}
         <Sidebar
             project={selectedProject}
             progressCard={getProgressCard()}