fix(Navigation): Improve navigation using bottom nav bar on mobile

src/lib/enums/index.ts

@@ -90,7 +90,7 @@ export const enum EmojiFont {
     Fluent = "Fluent",
 }
 
-export const enum Route {
+export enum Route {
     Home = "/",
     Chat = "/chat",
     Files = "/files",
@@ -101,6 +101,10 @@ export const enum Route {
     Pre = "/pre",
 }
 
+export function getRoute(value: string): Route {
+    return value.startsWith("/settings") ? Route.Settings : Object.values(Route).find(route => route === value) || Route.Home
+}
+
 export const enum FilesItemKind {
     File,
     Folder,

src/lib/layouts/BottomNavBarMobile.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { Keyboard } from "@capacitor/keyboard"
+    import { page } from "$app/stores"
     import { Button, Icon, Text } from "$lib/elements"
     import { Appearance, CommunitySettingsRoute, Route, SettingsRoute } from "$lib/enums"
     import { VoiceRTCInstance } from "$lib/media/Voice"
@@ -7,8 +9,9 @@
     import { UIStore } from "$lib/state/ui"
     import type { FriendRequest, NavRoute } from "$lib/types"
     import { checkMobile, isAndroidOriOS } from "$lib/utils/Mobile"
-    import { createEventDispatcher, onDestroy } from "svelte"
+    import { createEventDispatcher, onDestroy, onMount } from "svelte"
     import { get } from "svelte/store"
+    import { afterNavigate, onNavigate } from "$app/navigation"
 
     export let routes: NavRoute[] = []
     export let activeRoute: Route | SettingsRoute | CommunitySettingsRoute = Route.Home
@@ -56,7 +59,6 @@
                 // Avoid keyboard when navigate to chat preview list
             }
         }
-
         dispatch("navigate", route.to.toString())
     }
 
@@ -67,6 +69,47 @@
         if (route.to === Route.Settings) return true
     }
 
+    if (isAndroidOriOS()) {
+        Keyboard.addListener("keyboardWillShow", () => {
+            showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), null, true)
+        })
+
+        Keyboard.addListener("keyboardWillHide", () => {
+            showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), null, false)
+        })
+    }
+
+    UIStore.state.sidebarOpen.subscribe(open => {
+        showBottomNavBar = checkIfCanShowBottomNavBar(open, null, false)
+    })
+
+    onNavigate(async e => {
+        const routeId = e.to?.route.id
+        showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), routeId, false)
+    })
+
+    function checkIfCanShowBottomNavBar(sidebarOpen: boolean, routeId: string | null | undefined, isMobileKeyboardOpened: boolean): boolean {
+        let currentRoute = routeId ?? $page.route.id
+
+        if (isAndroidOriOS() && !isMobileKeyboardOpened) {
+            if (currentRoute === "/chat" && sidebarOpen) {
+                return true
+            }
+            if (currentRoute === "/friends") {
+                return true
+            }
+            if (currentRoute?.includes("/settings")) {
+                return true
+            }
+            if (currentRoute === "/files") {
+                return true
+            }
+        }
+        return false
+    }
+
+    $: showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), null, false)
+
     // Clean up subscriptions when component is destroyed
     onDestroy(() => {
         setTimeout(() => {
@@ -81,36 +124,30 @@
     $: settings = SettingsStore.state
 </script>
 
-<div class="content"></div>
-
-<div class="navigation {vertical ? 'vertical' : 'horizontal'} {icons ? 'icons' : ''}">
-    {#each routes as route}
-        <div class="navigation-control {!icons ? 'fill' : ''}">
-            <Button
-                hook="button-{route.name}"
-                badge={badgeCounts[route.to]}
-                fill={!icons}
-                tooltip={route.name}
-                icon={icons}
-                outline={activeRoute !== route.to && !icons}
-                appearance={activeRoute === route.to ? Appearance.Primary : Appearance.Alt}
-                on:click={() => handleNavigate(route)}>
-                <Icon alt={activeRoute === route.to} icon={route.icon} />
-                {#if !icons}
-                    <Text appearance={activeRoute !== route.to ? Appearance.Default : Appearance.Alt}>{route.name}</Text>
-                {/if}
-            </Button>
-        </div>
-    {/each}
-</div>
+{#if showBottomNavBar}
+    <div id="bottom-nav-bar-mobile" class="navigation {vertical ? 'vertical' : 'horizontal'} {icons ? 'icons' : ''}">
+        {#each routes as route}
+            <div class="navigation-control {!icons ? 'fill' : ''}">
+                <Button
+                    hook="button-{route.name}"
+                    badge={badgeCounts[route.to]}
+                    fill={!icons}
+                    tooltip={route.name}
+                    icon={icons}
+                    outline={activeRoute !== route.to && !icons}
+                    appearance={activeRoute === route.to ? Appearance.Primary : Appearance.Alt}
+                    on:click={() => handleNavigate(route)}>
+                    <Icon alt={activeRoute === route.to} icon={route.icon} />
+                    {#if !icons}
+                        <Text appearance={activeRoute !== route.to ? Appearance.Default : Appearance.Alt}>{route.name}</Text>
+                    {/if}
+                </Button>
+            </div>
+        {/each}
+    </div>
+{/if}
 
 <style lang="scss">
-    .content {
-        height: 60px;
-        pointer-events: none;
-        background: transparent;
-        border: none;
-    }
     .navigation {
         display: inline-flex;
         gap: var(--gap);
@@ -121,7 +158,7 @@
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         z-index: 1000;
-        position: fixed;
+        position: sticky;
         bottom: 0;
         left: 0;
         right: 0;

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
     import GamepadListener from "$lib/components/ui/GamepadListener.svelte"
     import KeyboardListener from "$lib/components/ui/KeyboardListener.svelte"
     import { playSound, Sounds } from "$lib/components/utils/SoundHandler"
-    import { EmojiFont, KeybindAction, KeybindState } from "$lib/enums"
+    import { EmojiFont, getRoute, KeybindAction, KeybindState, Route } from "$lib/enums"
     import { VoiceRTCInstance } from "$lib/media/Voice"
     import { SettingsStore } from "$lib/state"
     import { checkIfUserIsLogged } from "$lib/state/auth"
@@ -28,6 +28,9 @@
     import Market from "$lib/components/market/Market.svelte"
     import { swipe } from "$lib/components/ui/Swipe"
     import { ScreenOrientation } from "@capacitor/screen-orientation"
+    import BottomNavBarMobile from "$lib/layouts/BottomNavBarMobile.svelte"
+    import { goto, onNavigate } from "$app/navigation"
+    import { routes } from "$lib/defaults/routes"
     import { fetchDeviceInfo, isAndroid, isAndroidOriOS } from "$lib/utils/Mobile"
     import { changeSafeAreaColorsOnAndroid } from "$lib/plugins/safeAreaColorAndroid"
 
@@ -289,7 +292,7 @@
 
     onMount(async () => {
         await fetchDeviceInfo()
-        if (await isAndroidOriOS()) {
+        if (isAndroidOriOS()) {
             lockOrientation()
         }
 
@@ -298,6 +301,8 @@
         buildStyle()
         changeSafeAreaColors()
     })
+
+    $: activeRoute = getRoute($page.route.id!)
 </script>
 
 {#if isLocaleSet}
@@ -324,6 +329,14 @@
         <Market on:close={() => UIStore.toggleMarket()} />
         <InstallBanner />
         <slot></slot>
+        <BottomNavBarMobile
+            icons
+            routes={routes}
+            activeRoute={activeRoute}
+            on:navigate={e => {
+                activeRoute = e.detail
+                goto(e.detail)
+            }} />
     </div>
 {:else}
     <CircularProgressIndicator />

src/routes/chat/+page.svelte

@@ -55,8 +55,6 @@
     import ShareFile from "$lib/components/files/ShareFile.svelte"
     import { ToastMessage } from "$lib/state/ui/toast"
     import AddMembers from "$lib/components/group/AddMembers.svelte"
-    import { routes } from "$lib/defaults/routes"
-    import BottomNavBarMobile from "$lib/layouts/BottomNavBarMobile.svelte"
 
     enum Permission {
         UNDEFINED,
@@ -644,9 +642,6 @@
                 <ChatPreview slot="content" let:open on:contextmenu={open} chat={chat} loading={loading} cta={$activeChat === chat} />
             </ContextMenu>
         {/each}
-        {#if isAndroidOriOS()}
-            <BottomNavBarMobile icons routes={routes} activeRoute={Route.Chat} on:navigate={e => goto(e.detail)} />
-        {/if}
     </Sidebar>
 
     <div class="content">
@@ -1068,9 +1063,6 @@
         </div>
     {/if}
 </div>
-{#if isAndroidOriOS() && $activeChat.users.length === 0}
-    <BottomNavBarMobile icons routes={routes} activeRoute={Route.Chat} on:navigate={e => goto(e.detail)} />
-{/if}
 
 <style lang="scss">
     #page {

src/routes/files/+page.svelte

@@ -25,9 +25,6 @@
     import { Store } from "$lib/state/Store"
     import path from "path"
     import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
-    import { routes } from "$lib/defaults/routes"
-    import { isAndroidOriOS } from "$lib/utils/Mobile"
-    import BottomNavBarMobile from "$lib/layouts/BottomNavBarMobile.svelte"
 
     export let browseFilesForChatMode: boolean = false
 
@@ -809,9 +806,6 @@
         </div>
     </div>
 </div>
-{#if isAndroidOriOS()}
-    <BottomNavBarMobile icons routes={routes} activeRoute={Route.Files} on:navigate={e => goto(e.detail)} />
-{/if}
 
 <style lang="scss">
     #page {

src/routes/friends/+page.svelte

@@ -20,9 +20,7 @@
     import { CommonInputRules } from "$lib/utils/CommonInputRules"
     import CreateGroup from "$lib/components/group/CreateGroup.svelte"
     import { onDestroy } from "svelte"
-    import { isAndroidOriOS } from "$lib/utils/Mobile"
-    import { routes } from "$lib/defaults/routes"
-    import BottomNavBarMobile from "$lib/layouts/BottomNavBarMobile.svelte"
+
     import { Clipboard } from "@capacitor/clipboard"
 
     let loading: boolean = false
@@ -464,9 +462,6 @@
         </Modal>
     {/if}
 </div>
-{#if isAndroidOriOS()}
-    <BottomNavBarMobile icons routes={routes} activeRoute={Route.Friends} on:navigate={e => goto(e.detail)} />
-{/if}
 
 <style lang="scss">
     #page {

src/routes/settings/+layout.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation"
     import { page } from "$app/stores"
-    import { routes } from "$lib/defaults/routes"
     import { Route, SettingsRoute, Shape } from "$lib/enums"
-    import BottomNavBarMobile from "$lib/layouts/BottomNavBarMobile.svelte"
 
     import Navigation from "$lib/layouts/Navigation.svelte"
     import Sidebar from "$lib/layouts/Sidebar.svelte"
@@ -208,9 +206,6 @@
         </div>
     </div>
 </div>
-{#if isAndroidOriOS()}
-    <BottomNavBarMobile icons routes={routes} activeRoute={Route.Settings} on:navigate={e => goto(e.detail)} />
-{/if}
 
 <style lang="scss">
     #settings {