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"
@@ -9,7 +11,7 @@
     import { checkMobile, isAndroidOriOS } from "$lib/utils/Mobile"
     import { createEventDispatcher, onDestroy, onMount } from "svelte"
     import { get } from "svelte/store"
-    import { Keyboard } from "@capacitor/keyboard"
+    import { afterNavigate, onNavigate } from "$app/navigation"
     import type { PluginListenerHandle } from "@capacitor/core"
 
     export let routes: NavRoute[] = []
@@ -58,7 +60,6 @@
                 // Avoid keyboard when navigate to chat preview list
             }
         }
-
         dispatch("navigate", route.to.toString())
     }
 
@@ -69,18 +70,50 @@
         if (route.to === Route.Settings) return true
     }
 
+    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)
+
     let mobileKeyboardListener01: PluginListenerHandle | undefined
     let mobileKeyboardListener02: PluginListenerHandle | undefined
-    $: isKeyboardOpened = false
 
     onMount(async () => {
-        mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", () => {
-            isKeyboardOpened = true
-        })
-
-        mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
-            isKeyboardOpened = false
-        })
+        if (isAndroidOriOS()) {
+            mobileKeyboardListener01 = await Keyboard.addListener("keyboardWillShow", () => {
+                showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), null, true)
+            })
+
+            mobileKeyboardListener02 = await Keyboard.addListener("keyboardWillHide", () => {
+                showBottomNavBar = checkIfCanShowBottomNavBar(get(UIStore.state.sidebarOpen), null, false)
+            })
+        }
     })
 
     // Clean up subscriptions when component is destroyed
@@ -99,10 +132,8 @@
     $: settings = SettingsStore.state
 </script>
 
-{#if !isKeyboardOpened}
-    <div class="content"></div>
-
-    <div class="navigation {vertical ? 'vertical' : 'horizontal'} {icons ? 'icons' : ''}">
+{#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
@@ -125,12 +156,6 @@
 {/if}
 
 <style lang="scss">
-    .content {
-        height: 60px;
-        pointer-events: none;
-        background: transparent;
-        border: none;
-    }
     .navigation {
         display: inline-flex;
         gap: var(--gap);
@@ -141,7 +166,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 } from "$app/navigation"
+    import { routes } from "$lib/defaults/routes"
     import { fetchDeviceInfo, isAndroid, isAndroidOriOS, isiOSMobile } from "$lib/utils/Mobile"
     import { Keyboard, KeyboardResize } from "@capacitor/keyboard"
     import { changeSafeAreaColorsOnAndroid } from "$lib/plugins/safeAreaColorAndroid"
@@ -306,6 +309,8 @@
         buildStyle()
         changeSafeAreaColors()
     })
+
+    $: activeRoute = getRoute($page.route.id!)
 </script>
 
 {#if isLocaleSet}
@@ -338,6 +343,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

@@ -40,9 +40,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"
-    import { Keyboard } from "@capacitor/keyboard"
 
     enum Permission {
         UNDEFINED,
@@ -630,9 +627,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">
@@ -1054,9 +1048,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 {