diff --git a/eslint.config.js b/eslint.config.js index 05ce3e85f..32ef292d0 100644 --- a/eslint.config.js +++ b/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' } }, { diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte index 0a38e714c..c5354036f 100644 --- a/src/lib/components/breadcrumbs.svelte +++ b/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 = 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; diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte index 325eb8bd5..bb6f0d02c 100644 --- a/src/lib/components/sidebar.svelte +++ b/src/lib/components/sidebar.svelte @@ -138,7 +138,7 @@ { trackEvent('click_menu_get_started'); sideBarIsOpen = false; diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte index bfc06264f..5f76c05f2 100644 --- a/src/lib/layout/shell.svelte +++ b/src/lib/layout/shell.svelte @@ -205,7 +205,7 @@ {/if} - {#if !$isNewWizardStatusOpen} + {#if !$isNewWizardStatusOpen && isProjectPage}