Merge pull request #2836 from appwrite/fix-remove-navbar-during-onboarding-animation

fix: remove navbar during onboarding animation

Author: HarshMN2345

src/lib/layout/shell.svelte

@@ -5,8 +5,9 @@
     import { activeHeaderAlert } from '$routes/(console)/store';
     import { onMount, setContext } from 'svelte';
     import { writable } from 'svelte/store';
-    import { showSubNavigation } from '$lib/stores/layout';
+    import { showSubNavigation, showOnboardingAnimation } from '$lib/stores/layout';
     import { organization, organizationList } from '$lib/stores/organization';
+
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { isCloud } from '$lib/system';
@@ -176,7 +177,8 @@
 
     $: subNavigation = $page.data.subNavigation;
 
-    $: shouldRenderSidebar = !$isNewWizardStatusOpen && showSideNavigation;
+    $: shouldRenderSidebar =
+        !$isNewWizardStatusOpen && showSideNavigation && !$showOnboardingAnimation;
     $: hasSidebarSpace = shouldRenderSidebar && !$isTabletViewport && !!selectedProject;
 
     $: {
@@ -203,9 +205,9 @@
     class:is-open={$showSubNavigation}
     class:u-hide={$wizard.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
-    class:no-header={!showHeader}
+    class:no-header={!showHeader || $showOnboardingAnimation}
     style:--p-side-size={sideSize}>
-    {#if showHeader}
+    {#if showHeader && !$showOnboardingAnimation}
         <Navbar {...navbarProps} bind:sideBarIsOpen={$isSidebarOpen} bind:showAccountMenu />
     {/if}
 
@@ -220,7 +222,9 @@
             bind:state />
     {/if}
 
-    <SideNavigation bind:subNavigation />
+    {#if !$showOnboardingAnimation}
+        <SideNavigation bind:subNavigation />
+    {/if}
 
     <div
         class="content"

src/lib/stores/layout.ts

@@ -27,3 +27,4 @@ export function updateLayout(args: updateLayoutArguments) {
 }
 
 export const showSubNavigation = writable(false);
+export const showOnboardingAnimation = writable(false);

src/routes/(console)/onboarding/create-project/+page.svelte

@@ -8,12 +8,13 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
+    import { base, resolve } from '$app/paths';
     import { addNotification } from '$lib/stores/notifications';
     import CreateProject from '$lib/layout/createProject.svelte';
     import { loadAvailableRegions } from '$routes/(console)/regions';
     import { regions as regionsStore } from '$lib/stores/organization';
     import { user } from '$lib/stores/user';
+    import { showOnboardingAnimation } from '$lib/stores/layout';
 
     let isLoading = false;
     let startAnimation = false;
@@ -57,10 +58,17 @@
             });
 
             startAnimation = true;
+            showOnboardingAnimation.set(true);
 
             setTimeout(async () => {
                 await invalidate(Dependencies.ACCOUNT);
-                goto(`${base}/project-${project.region ?? 'default'}-${project.$id}`);
+                await goto(
+                    resolve('/(console)/project-[region]-[project]', {
+                        region: project.region ?? 'default',
+                        project: project.$id
+                    })
+                );
+                showOnboardingAnimation.set(false);
             }, 3000);
         } catch (e) {
             trackError(e, Submit.ProjectCreate);