From 250abd6b16cd139a1052d5a21f52df0e073db886 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 15:35:28 +0600
Subject: [PATCH 01/11] feat(nav): responsive side rail (landscape) + bottom
 nav (portrait) with hamburger overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace NavBar with orientation-aware navigation per spec:

- Desktop/landscape: collapsible side rail (72px rail ↔ 256px expanded, persisted) with all nav items, search, theme, PWA install, auth

- Mobile/portrait: bottom nav with 4 core items (Home, Forum, Chat, AI) + top-left hamburger for overflow (Blogs, Support, About, Join, Donate) + Search + Notifications

- Auth-aware: guest Login vs authed Profile/Admin, admin link, etc.

- Frees footer space: Footer hidden on portrait (bottom nav occupies), visible on landscape; reduces top bar clutter

- TypeScript: navigation.ts (NavItem types), useOrientation.ts (matchMedia orientation), Vue SFC <script setup lang=ts> + lucide-vue-next icons

- Bridging: ResponsiveNavigation.vue orchestrates orientation switch, AppLayout now uses new shell
---
 .../js/components/navigation/BottomNav.vue    |  57 +++
 .../components/navigation/OverflowDrawer.vue  | 334 ++++++++++++++++++
 .../navigation/ResponsiveNavigation.vue       |  56 +++
 .../js/components/navigation/SideRail.vue     | 276 +++++++++++++++
 resources/js/layouts/AppLayout.vue            |  81 ++++-
 resources/js/lib/navigation.ts                |  94 +++++
 resources/js/lib/useOrientation.ts            |  66 ++++
 7 files changed, 956 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/components/navigation/BottomNav.vue
 create mode 100644 resources/js/components/navigation/OverflowDrawer.vue
 create mode 100644 resources/js/components/navigation/ResponsiveNavigation.vue
 create mode 100644 resources/js/components/navigation/SideRail.vue
 create mode 100644 resources/js/lib/navigation.ts
 create mode 100644 resources/js/lib/useOrientation.ts

diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
new file mode 100644
index 00000000..21798d0c
--- /dev/null
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+import { primaryNavItems } from '@/lib/navigation';
+
+const page = usePage();
+const currentUrl = computed(() => String(page.url));
+
+const homeHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+                return '/ssc';
+            }
+        } catch {}
+    }
+
+    return currentUrl.value.startsWith('/ssc') ? '/ssc' : '/';
+});
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+</script>
+
+<template>
+    <nav
+        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl landscape:hidden dark:border-gray-800 dark:bg-gray-950/95"
+        aria-label="Bottom navigation"
+    >
+        <div
+            class="mx-auto flex max-w-7xl items-center justify-around px-2 py-1"
+        >
+            <Link
+                v-for="item in primaryNavItems"
+                :key="item.href"
+                :href="item.href === '/' ? homeHref : item.href"
+                :class="[
+                    'flex flex-col items-center gap-1 rounded-xl px-3 py-1.5 text-[11px] font-medium transition-colors',
+                    isActive(item.href, item.match)
+                        ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                        : 'text-slate-500 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100',
+                ]"
+            >
+                <component :is="item.icon" class="h-5 w-5" />
+                <span class="leading-none">{{ item.label }}</span>
+            </Link>
+        </div>
+    </nav>
+</template>
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
new file mode 100644
index 00000000..8248ccc9
--- /dev/null
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import {
+    Download,
+    LayoutDashboard,
+    LogIn,
+    LogOut,
+    Menu,
+    Monitor,
+    Moon,
+    Search,
+    Sun,
+    X,
+    Home,
+} from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+
+import AppLogo from '@/components/AppLogo.vue';
+import AuthModal from '@/components/AuthModal.vue';
+import NotificationDropdown from '@/components/NotificationDropdown.vue';
+import { overflowNavItems } from '@/lib/navigation';
+import { useDarkMode } from '@/lib/useDarkMode';
+import { usePwa } from '@/lib/usePwa';
+
+const props = defineProps<{ open: boolean }>();
+const emit = defineEmits<{
+    (e: 'update:open', v: boolean): void;
+    (e: 'close'): void;
+}>();
+
+const page = usePage();
+const user = computed(
+    () => page.props.auth?.user as App.Data.UserData | undefined,
+);
+const canAccessAdmin = computed(() =>
+    Boolean(page.props.auth?.can_access_admin),
+);
+const isAdminRoute = computed(() => String(page.url).startsWith('/admin'));
+const currentUrl = computed(() => String(page.url));
+
+const { theme, setTheme } = useDarkMode();
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
+const canInstallApp = computed(
+    () => !isInstalled.value && Boolean(deferredPrompt.value),
+);
+
+const showAuthModal = ref(false);
+const authModalMessage = ref('');
+
+const close = () => {
+    emit('update:open', false);
+    emit('close');
+};
+
+const handleInstallApp = async () => {
+    await promptInstall();
+    close();
+};
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+
+watch(
+    () => props.open,
+    (v) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        document.body.style.overflow = v ? 'hidden' : '';
+    },
+);
+</script>
+
+<template>
+    <div>
+        <!-- Top bar hamburger (portrait only) -->
+        <div
+            class="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-xl landscape:hidden dark:border-gray-800 dark:bg-gray-950/80"
+        >
+            <button
+                type="button"
+                @click="emit('update:open', true)"
+                class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+                aria-label="Open navigation menu"
+            >
+                <Menu class="h-5 w-5" />
+            </button>
+            <AppLogo />
+            <div class="ml-auto flex items-center gap-2">
+                <button
+                    type="button"
+                    @click="
+                        () => {
+                            if (!user) {
+                                authModalMessage = 'Please login to search';
+                                showAuthModal = true;
+                                return;
+                            }
+                            window.dispatchEvent(
+                                new CustomEvent('hscstack:trigger-search'),
+                            );
+                        }
+                    "
+                    class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                    aria-label="Search"
+                >
+                    <Search class="h-5 w-5" />
+                </button>
+                <NotificationDropdown v-if="user" />
+            </div>
+        </div>
+
+        <AuthModal
+            v-model="showAuthModal"
+            title="Sign in required"
+            :message="authModalMessage"
+        />
+
+        <!-- Drawer -->
+        <Teleport to="body">
+            <div v-if="open" class="fixed inset-0 z-50 flex landscape:hidden">
+                <div
+                    class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
+                    @click="close"
+                />
+                <Transition
+                    appear
+                    enter-active-class="transition-transform duration-300"
+                    enter-from-class="-translate-x-full"
+                    enter-to-class="translate-x-0"
+                    leave-active-class="transition-transform duration-200"
+                    leave-from-class="translate-x-0"
+                    leave-to-class="-translate-x-full"
+                >
+                    <aside
+                        class="relative flex h-full w-[86%] max-w-xs flex-col bg-white shadow-2xl dark:bg-gray-950"
+                    >
+                        <div
+                            class="flex items-center justify-between border-b border-slate-100 p-4 dark:border-gray-800"
+                        >
+                            <AppLogo />
+                            <button
+                                @click="close"
+                                class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-gray-800"
+                                aria-label="Close menu"
+                            >
+                                <X class="h-4 w-4" />
+                            </button>
+                        </div>
+
+                        <div class="flex-1 overflow-y-auto p-4">
+                            <!-- User -->
+                            <div
+                                v-if="user"
+                                class="mb-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-3 dark:border-gray-800 dark:bg-gray-900"
+                            >
+                                <img
+                                    v-if="user.image_url"
+                                    :src="user.image_url"
+                                    :alt="user.name"
+                                    class="h-10 w-10 rounded-full object-cover"
+                                />
+                                <span
+                                    v-else
+                                    class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-sm font-bold text-white"
+                                    >{{
+                                        user.name.charAt(0).toUpperCase()
+                                    }}</span
+                                >
+                                <div class="min-w-0">
+                                    <p
+                                        class="truncate text-sm font-semibold text-slate-900 dark:text-gray-100"
+                                    >
+                                        {{ user.name }}
+                                    </p>
+                                    <p class="truncate text-xs text-slate-500">
+                                        {{ user.email }}
+                                    </p>
+                                </div>
+                            </div>
+                            <Link
+                                v-else
+                                href="/login"
+                                @click="close"
+                                class="mb-4 flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold text-white"
+                            >
+                                <LogIn class="h-4 w-4" /> Sign in
+                            </Link>
+
+                            <!-- Overflow items -->
+                            <p
+                                class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase"
+                            >
+                                More
+                            </p>
+                            <nav class="space-y-1">
+                                <Link
+                                    v-for="item in overflowNavItems"
+                                    :key="item.href"
+                                    :href="item.href"
+                                    @click="close"
+                                    :class="[
+                                        'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium',
+                                        isActive(item.href, item.match)
+                                            ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                                            : 'text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                                    ]"
+                                >
+                                    <component
+                                        :is="item.icon"
+                                        class="h-5 w-5"
+                                    />
+                                    <span>{{ item.label }}</span>
+                                </Link>
+                            </nav>
+
+                            <!-- Install -->
+                            <button
+                                v-if="canInstallApp"
+                                type="button"
+                                @click="handleInstallApp"
+                                class="mt-4 flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
+                            >
+                                <Download class="h-5 w-5" /> Install App
+                            </button>
+
+                            <!-- Admin / Profile -->
+                            <div
+                                v-if="user"
+                                class="mt-6 space-y-1 border-t border-slate-100 pt-4 dark:border-gray-800"
+                            >
+                                <Link
+                                    :href="
+                                        user.username
+                                            ? `/u/${user.username}`
+                                            : '/profile'
+                                    "
+                                    @click="close"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
+                                >
+                                    <Home class="h-4 w-4" /> Profile
+                                </Link>
+                                <Link
+                                    v-if="canAccessAdmin"
+                                    :href="isAdminRoute ? '/' : '/admin'"
+                                    @click="close"
+                                    class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
+                                >
+                                    <LayoutDashboard class="h-4 w-4" />
+                                    {{ isAdminRoute ? 'Home' : 'Staff Panel' }}
+                                </Link>
+                                <Link
+                                    href="/logout"
+                                    method="post"
+                                    as="button"
+                                    class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40"
+                                >
+                                    <LogOut class="h-4 w-4" /> Sign out
+                                </Link>
+                            </div>
+
+                            <!-- Theme -->
+                            <div class="mt-6">
+                                <p
+                                    class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase"
+                                >
+                                    Appearance
+                                </p>
+                                <div
+                                    class="grid grid-cols-3 gap-1 rounded-xl bg-slate-100 p-1 dark:bg-gray-900"
+                                >
+                                    <button
+                                        type="button"
+                                        @click="setTheme('light')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'light'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><Sun class="h-3.5 w-3.5" />
+                                            Light</span
+                                        >
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="setTheme('dark')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'dark'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><Moon class="h-3.5 w-3.5" />
+                                            Dark</span
+                                        >
+                                    </button>
+                                    <button
+                                        type="button"
+                                        @click="setTheme('system')"
+                                        :class="[
+                                            'rounded-lg py-2 text-xs font-semibold',
+                                            theme === 'system'
+                                                ? 'bg-white shadow dark:bg-gray-800'
+                                                : 'text-slate-500',
+                                        ]"
+                                    >
+                                        <span
+                                            class="flex items-center justify-center gap-1"
+                                            ><Monitor class="h-3.5 w-3.5" />
+                                            System</span
+                                        >
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </aside>
+                </Transition>
+            </div>
+        </Teleport>
+    </div>
+</template>
diff --git a/resources/js/components/navigation/ResponsiveNavigation.vue b/resources/js/components/navigation/ResponsiveNavigation.vue
new file mode 100644
index 00000000..e8a91be5
--- /dev/null
+++ b/resources/js/components/navigation/ResponsiveNavigation.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { useOrientation } from '@/lib/useOrientation';
+
+import BottomNav from './BottomNav.vue';
+import OverflowDrawer from './OverflowDrawer.vue';
+import SideRail from './SideRail.vue';
+
+const { isLandscape } = useOrientation();
+
+const railCollapsed = ref<boolean>(false);
+
+// Persist rail state
+if (typeof window !== 'undefined') {
+    try {
+        const saved = localStorage.getItem('rail_collapsed');
+
+        if (saved !== null) {
+            railCollapsed.value = saved === 'true';
+        }
+    } catch {}
+}
+
+watch(railCollapsed, (v) => {
+    try {
+        localStorage.setItem('rail_collapsed', String(v));
+    } catch {}
+});
+
+const toggleRail = () => {
+    railCollapsed.value = !railCollapsed.value;
+};
+
+const drawerOpen = ref(false);
+</script>
+
+<template>
+    <div>
+        <!-- Landscape: Side rail -->
+        <SideRail
+            v-if="isLandscape"
+            :collapsed="railCollapsed"
+            @toggle="toggleRail"
+        />
+
+        <!-- Portrait: Top hamburger + drawer + bottom nav -->
+        <OverflowDrawer
+            v-if="!isLandscape"
+            :open="drawerOpen"
+            @update:open="drawerOpen = $event"
+            @close="drawerOpen = false"
+        />
+        <BottomNav v-if="!isLandscape" />
+    </div>
+</template>
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
new file mode 100644
index 00000000..7efe7402
--- /dev/null
+++ b/resources/js/components/navigation/SideRail.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import {
+    ChevronLeft,
+    ChevronRight,
+    Download,
+    LayoutDashboard,
+    LogIn,
+    Monitor,
+    Moon,
+    Search,
+    Sun,
+} from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+
+import AppLogo from '@/components/AppLogo.vue';
+import AuthModal from '@/components/AuthModal.vue';
+import NotificationDropdown from '@/components/NotificationDropdown.vue';
+import { allNavItems } from '@/lib/navigation';
+import { useDarkMode } from '@/lib/useDarkMode';
+import { usePwa } from '@/lib/usePwa';
+
+type Props = {
+    collapsed: boolean;
+};
+
+defineProps<Props>();
+const emit = defineEmits<{ (e: 'toggle'): void }>();
+
+const page = usePage();
+const user = computed(
+    () => page.props.auth?.user as App.Data.UserData | undefined,
+);
+const canAccessAdmin = computed(() =>
+    Boolean(page.props.auth?.can_access_admin),
+);
+const isAdminRoute = computed(() => String(page.url).startsWith('/admin'));
+const currentUrl = computed(() => String(page.url));
+
+const { theme, toggle } = useDarkMode();
+const { deferredPrompt, isInstalled, promptInstall } = usePwa();
+const canInstallApp = computed(
+    () => !isInstalled.value && Boolean(deferredPrompt.value),
+);
+const handleInstallApp = async () => {
+    await promptInstall();
+};
+
+const homeHref = computed(() => {
+    if (typeof window !== 'undefined') {
+        try {
+            const pref = localStorage.getItem('preferred_course');
+
+            if (pref === 'ssc') {
+                return '/ssc';
+            }
+        } catch {}
+    }
+
+    return currentUrl.value.startsWith('/ssc') ? '/ssc' : '/';
+});
+
+const isActive = (href: string, match?: (url: string) => boolean) => {
+    if (match) {
+        return match(currentUrl.value);
+    }
+
+    return currentUrl.value.startsWith(href);
+};
+
+// Search gate
+const showAuthModal = ref(false);
+const authModalMessage = ref('');
+
+const triggerSearch = () => {
+    if (!user.value) {
+        authModalMessage.value =
+            'অনুগ্রহ করে বিষয় ও কনটেন্ট সার্চ করতে প্রথমে লগইন করুন।';
+        showAuthModal.value = true;
+
+        return;
+    }
+
+    // Focus is handled by globalSearchQuery watchers in pages; just set flag via store
+    // For rail, we dispatch a custom event that Home pages listen to
+    window.dispatchEvent(new CustomEvent('hscstack:trigger-search'));
+};
+
+// Persist collapsed is handled by parent
+</script>
+
+<template>
+    <aside
+        :class="[
+            'hidden flex-col border-r bg-white/80 backdrop-blur-xl transition-all duration-300 dark:border-gray-800 dark:bg-gray-950/80',
+            'portrait:hidden landscape:flex',
+            collapsed ? 'w-[72px]' : 'w-[256px]',
+        ]"
+        aria-label="Side navigation"
+    >
+        <!-- Header: Logo + Collapse toggle -->
+        <div
+            class="flex h-16 shrink-0 items-center border-b border-slate-100 px-3 dark:border-gray-800"
+            :class="collapsed ? 'justify-center' : 'justify-between'"
+        >
+            <AppLogo v-if="!collapsed" />
+            <div
+                v-else
+                class="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-600 text-white"
+            >
+                <span class="text-xs font-black">H</span>
+            </div>
+            <button
+                type="button"
+                @click="emit('toggle')"
+                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+                :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            >
+                <ChevronRight v-if="collapsed" class="h-4 w-4" />
+                <ChevronLeft v-else class="h-4 w-4" />
+            </button>
+        </div>
+
+        <!-- Scrollable nav -->
+        <div class="flex flex-1 flex-col overflow-y-auto py-3">
+            <!-- Primary + Overflow combined for desktop rail -->
+            <nav class="space-y-1 px-2">
+                <Link
+                    v-for="item in allNavItems"
+                    :key="item.href"
+                    :href="item.href === '/' ? homeHref : item.href"
+                    :class="[
+                        'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors',
+                        isActive(item.href, item.match)
+                            ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
+                            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-gray-100',
+                        collapsed ? 'justify-center' : '',
+                    ]"
+                    :title="collapsed ? item.label : undefined"
+                >
+                    <component :is="item.icon" class="h-5 w-5 shrink-0" />
+                    <span v-if="!collapsed" class="truncate">{{
+                        item.label
+                    }}</span>
+                </Link>
+            </nav>
+
+            <!-- PWA Install -->
+            <div v-if="canInstallApp" class="mt-4 px-2">
+                <button
+                    type="button"
+                    @click="handleInstallApp"
+                    :class="[
+                        'flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 hover:bg-indigo-100 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300',
+                        collapsed ? 'justify-center' : '',
+                    ]"
+                >
+                    <Download class="h-5 w-5 shrink-0" />
+                    <span v-if="!collapsed">Install App</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Footer controls -->
+        <div class="border-t border-slate-100 p-2 dark:border-gray-800">
+            <div class="space-y-1">
+                <!-- Search -->
+                <button
+                    type="button"
+                    @click="triggerSearch"
+                    :class="[
+                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                        collapsed ? 'justify-center' : '',
+                    ]"
+                >
+                    <Search class="h-5 w-5 shrink-0" />
+                    <span v-if="!collapsed">Search</span>
+                </button>
+
+                <!-- Theme -->
+                <button
+                    type="button"
+                    @click="toggle"
+                    :class="[
+                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                        collapsed ? 'justify-center' : '',
+                    ]"
+                >
+                    <Monitor
+                        v-if="theme === 'system'"
+                        class="h-5 w-5 shrink-0"
+                    />
+                    <Sun
+                        v-else-if="theme === 'light'"
+                        class="h-5 w-5 shrink-0"
+                    />
+                    <Moon v-else class="h-5 w-5 shrink-0" />
+                    <span v-if="!collapsed" class="capitalize">{{
+                        theme
+                    }}</span>
+                </button>
+
+                <!-- Notifications -->
+                <div
+                    v-if="user"
+                    :class="[
+                        'flex',
+                        collapsed ? 'justify-center px-0' : 'px-3 py-1',
+                    ]"
+                >
+                    <NotificationDropdown />
+                </div>
+
+                <!-- Auth -->
+                <div :class="collapsed ? 'px-0' : 'px-2 pt-2'">
+                    <Link
+                        v-if="!user"
+                        href="/login"
+                        :class="[
+                            'flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-3 py-2.5 text-sm font-bold text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900',
+                            collapsed ? 'px-2' : '',
+                        ]"
+                    >
+                        <LogIn class="h-4 w-4 shrink-0" />
+                        <span v-if="!collapsed">Login</span>
+                    </Link>
+                    <div
+                        v-else
+                        :class="[
+                            'flex items-center gap-3 rounded-xl border bg-slate-50 px-3 py-2.5 dark:border-gray-800 dark:bg-gray-900',
+                            collapsed ? 'justify-center' : 'justify-between',
+                        ]"
+                    >
+                        <div class="flex min-w-0 items-center gap-2">
+                            <img
+                                v-if="user.image_url"
+                                :src="user.image_url"
+                                :alt="user.name"
+                                class="h-8 w-8 rounded-full object-cover"
+                            />
+                            <span
+                                v-else
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white"
+                                >{{ user.name.charAt(0).toUpperCase() }}</span
+                            >
+                            <div v-if="!collapsed" class="min-w-0">
+                                <p
+                                    class="truncate text-xs font-semibold text-slate-900 dark:text-gray-100"
+                                >
+                                    {{ user.name }}
+                                </p>
+                                <p class="truncate text-[11px] text-slate-500">
+                                    {{ user.email }}
+                                </p>
+                            </div>
+                        </div>
+                        <Link
+                            v-if="!collapsed && canAccessAdmin"
+                            :href="isAdminRoute ? '/' : '/admin'"
+                            class="shrink-0 rounded-lg p-1.5 text-slate-500 hover:bg-white dark:hover:bg-gray-800"
+                            :title="isAdminRoute ? 'Home' : 'Staff Panel'"
+                        >
+                            <LayoutDashboard class="h-4 w-4" />
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <AuthModal
+            v-model="showAuthModal"
+            title="Sign in required"
+            :message="authModalMessage"
+        />
+    </aside>
+</template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 6abd825f..77a8a795 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,9 +1,40 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+
 import FloatingShareBar from '@/components/FloatingShareBar.vue';
 import Footer from '@/components/Footer.vue';
 import LoadingSpinner from '@/components/LoadingSpinner.vue';
-import NavBar from '@/components/NavBar.vue';
+import BottomNav from '@/components/navigation/BottomNav.vue';
+import OverflowDrawer from '@/components/navigation/OverflowDrawer.vue';
+import SideRail from '@/components/navigation/SideRail.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
+import { useOrientation } from '@/lib/useOrientation';
+
+const { isLandscape, isHydrated } = useOrientation();
+
+const railCollapsed = ref(false);
+
+if (typeof window !== 'undefined') {
+    try {
+        const saved = localStorage.getItem('rail_collapsed');
+
+        if (saved !== null) {
+            railCollapsed.value = saved === 'true';
+        }
+    } catch {}
+}
+
+watch(railCollapsed, (v) => {
+    try {
+        localStorage.setItem('rail_collapsed', String(v));
+    } catch {}
+});
+
+const toggleRail = () => {
+    railCollapsed.value = !railCollapsed.value;
+};
+
+const drawerOpen = ref(false);
 </script>
 
 <template>
@@ -15,7 +46,6 @@ import ToastNotification from '@/components/ToastNotification.vue';
             <div
                 class="absolute -top-[30%] left-1/2 h-[900px] w-[1200px] -translate-x-1/2 rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.18)_0%,rgba(165,180,252,0.05)_50%,transparent_70%)] blur-[120px] dark:bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.06)_0%,rgba(165,180,252,0.02)_50%,transparent_70%)]"
             ></div>
-
             <div
                 class="absolute top-[20%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.15)_0%,transparent_65%)] blur-[100px] dark:bg-[radial-gradient(circle_at_center,rgba(56,189,248,0.05)_0%,transparent_65%)]"
             ></div>
@@ -24,13 +54,48 @@ import ToastNotification from '@/components/ToastNotification.vue';
             ></div>
         </div>
 
-        <div class="relative z-10 flex min-h-screen flex-col">
-            <NavBar />
-            <main class="min-h-[calc(100vh-4rem)] flex-1">
-                <slot />
-            </main>
-            <Footer v-if="$page.component !== 'Chat/Index'" />
+        <!-- Orientation-aware shell: landscape = side rail, portrait = bottom nav + top hamburger -->
+        <div class="relative z-10 flex min-h-screen">
+            <!-- Landscape side rail (desktop) -->
+            <SideRail
+                v-if="isHydrated ? isLandscape : true"
+                :collapsed="railCollapsed"
+                class="hidden landscape:flex"
+                @toggle="toggleRail"
+            />
+
+            <div class="flex min-h-screen flex-1 flex-col">
+                <!-- Portrait top bar + hamburger (mobile) -->
+                <OverflowDrawer
+                    :open="drawerOpen"
+                    class="landscape:hidden"
+                    @update:open="drawerOpen = $event"
+                    @close="drawerOpen = false"
+                />
+
+                <main
+                    :class="[
+                        'flex-1',
+                        isHydrated && !isLandscape
+                            ? 'pb-16'
+                            : 'min-h-[calc(100vh-4rem)]',
+                    ]"
+                >
+                    <slot />
+                </main>
+
+                <!-- Footer: hidden on portrait to free space (bottom nav occupies footer area) -->
+                <Footer
+                    v-if="
+                        $page.component !== 'Chat/Index' &&
+                        (isHydrated ? isLandscape : true)
+                    "
+                    class="hidden landscape:block"
+                />
+            </div>
         </div>
+
+        <BottomNav v-if="isHydrated ? !isLandscape : false" />
         <FloatingShareBar />
         <ToastNotification />
     </div>
diff --git a/resources/js/lib/navigation.ts b/resources/js/lib/navigation.ts
new file mode 100644
index 00000000..4859a787
--- /dev/null
+++ b/resources/js/lib/navigation.ts
@@ -0,0 +1,94 @@
+import {
+    BookOpen,
+    HeartHandshake,
+    Home,
+    Info,
+    LifeBuoy,
+    MessageCircle,
+    MessageSquare,
+    Sparkles,
+    Users,
+} from 'lucide-vue-next';
+import type { Component } from 'vue';
+
+export type NavItem = {
+    label: string;
+    labelBn?: string;
+    href: string;
+    icon: Component;
+    match: (url: string) => boolean;
+    showInBottom?: boolean;
+};
+
+export const primaryNavItems: NavItem[] = [
+    {
+        label: 'Home',
+        href: '/',
+        icon: Home,
+        match: (url) =>
+            url === '/' ||
+            url.startsWith('/?') ||
+            url === '/ssc' ||
+            url.startsWith('/ssc?'),
+        showInBottom: true,
+    },
+    {
+        label: 'Forum',
+        href: '/forum',
+        icon: MessageSquare,
+        match: (url) => url.startsWith('/forum'),
+        showInBottom: true,
+    },
+    {
+        label: 'Chat',
+        labelBn: 'Global Chat',
+        href: '/chat',
+        icon: MessageCircle,
+        match: (url) => url.startsWith('/chat'),
+        showInBottom: true,
+    },
+    {
+        label: 'AI',
+        labelBn: 'HSCStack AI',
+        href: '/ai',
+        icon: Sparkles,
+        match: (url) => url.startsWith('/ai'),
+        showInBottom: true,
+    },
+];
+
+export const overflowNavItems: NavItem[] = [
+    {
+        label: 'Blogs',
+        href: '/blogs',
+        icon: BookOpen,
+        match: (url) => url.startsWith('/blogs'),
+    },
+    {
+        label: 'Support',
+        href: '/support',
+        icon: LifeBuoy,
+        match: (url) => url.startsWith('/support'),
+    },
+    {
+        label: 'About',
+        href: '/about-us',
+        icon: Info,
+        match: (url) => url.startsWith('/about-us'),
+    },
+    {
+        label: 'Join',
+        labelBn: 'Join Team',
+        href: '/join',
+        icon: Users,
+        match: (url) => url.startsWith('/join'),
+    },
+    {
+        label: 'Donate',
+        href: '/donate',
+        icon: HeartHandshake,
+        match: (url) => url.startsWith('/donate'),
+    },
+];
+
+export const allNavItems: NavItem[] = [...primaryNavItems, ...overflowNavItems];
diff --git a/resources/js/lib/useOrientation.ts b/resources/js/lib/useOrientation.ts
new file mode 100644
index 00000000..56239882
--- /dev/null
+++ b/resources/js/lib/useOrientation.ts
@@ -0,0 +1,66 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export type Orientation = 'landscape' | 'portrait';
+
+export function useOrientation() {
+    const isLandscape = ref<boolean>(false);
+    const isPortrait = ref<boolean>(true);
+    const isHydrated = ref<boolean>(false);
+
+    let mql: MediaQueryList | null = null;
+
+    const update = () => {
+        if (mql) {
+            isLandscape.value = mql.matches;
+            isPortrait.value = !mql.matches;
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            isLandscape.value = window.innerWidth > window.innerHeight;
+            isPortrait.value = !isLandscape.value;
+        }
+    };
+
+    const handler = () => update();
+
+    onMounted(() => {
+        isHydrated.value = true;
+
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        mql = window.matchMedia('(orientation: landscape)');
+        update();
+
+        // Modern browsers
+        if (mql.addEventListener) {
+            mql.addEventListener('change', handler);
+        } else {
+            // Safari fallback
+            mql.addListener(handler);
+        }
+
+        window.addEventListener('resize', handler);
+    });
+
+    onBeforeUnmount(() => {
+        if (!mql) {
+            return;
+        }
+
+        if (mql.removeEventListener) {
+            mql.removeEventListener('change', handler);
+        } else {
+            mql.removeListener(handler);
+        }
+
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', handler);
+        }
+    });
+
+    return { isLandscape, isPortrait, isHydrated };
+}

From 387a9b1f297eb20d2386961f6166c02e19fb5cd2 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 16:05:16 +0600
Subject: [PATCH 02/11] feat(nav): Material Symbols Rounded filled wght 300 +
 mobile bottom nav customization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch icons from lucide-vue-next to Material Symbols Rounded SVGs (filled, weight 300, rounded) via MaterialIcon component and Google Fonts import in app.css.

Add mobile bottom nav customization (3-5 items, Home pinned first, Account pinned last) with drag-drop reorder, localStorage persistence (hscstack:bottom-nav:v1), available pool move to hamburger drawer. Profile settings UI via BottomNavCustomizer.

Fix siderail styling: polished desktop rail (280px expanded, 72px collapsed, shadow, active states) and YT-style bottom nav (YT/YT Music). No footer on mobile (free space) — AppLayout now uses useBreakpoint(1024) + orientation (mobile OR portrait → bottom nav, desktop+landscape → side rail).
---
 resources/css/app.css                         |  23 ++
 .../js/components/navigation/BottomNav.vue    |  50 +++-
 .../navigation/BottomNavCustomizer.vue        | 264 ++++++++++++++++++
 .../components/navigation/OverflowDrawer.vue  |  78 +++---
 .../js/components/navigation/SideRail.vue     | 107 +++----
 resources/js/components/ui/MaterialIcon.vue   |  36 +++
 resources/js/layouts/AppLayout.vue            |  41 +--
 resources/js/lib/navigation.ts                |  34 +--
 resources/js/lib/useBottomNavCustomization.ts | 199 +++++++++++++
 resources/js/lib/useBreakpoint.ts             |  62 ++++
 resources/js/pages/Profile.vue                |   5 +
 11 files changed, 766 insertions(+), 133 deletions(-)
 create mode 100644 resources/js/components/navigation/BottomNavCustomizer.vue
 create mode 100644 resources/js/components/ui/MaterialIcon.vue
 create mode 100644 resources/js/lib/useBottomNavCustomization.ts
 create mode 100644 resources/js/lib/useBreakpoint.ts

diff --git a/resources/css/app.css b/resources/css/app.css
index 4a43fd9e..803c4899 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300,1,0&display=swap');
 @import 'tailwindcss';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -146,3 +147,25 @@
 .dark .text-green-700 {
     color: rgb(134 239 172);
 }
+
+/* Material Symbols Rounded — filled, wght 300, rounded */
+.material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings:
+        'FILL' 1,
+        'wght' 300,
+        'GRAD' 0,
+        'opsz' 24;
+}
diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
index 21798d0c..b94f8446 100644
--- a/resources/js/components/navigation/BottomNav.vue
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -2,11 +2,14 @@
 import { Link, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
 
-import { primaryNavItems } from '@/lib/navigation';
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
 
 const page = usePage();
 const currentUrl = computed(() => String(page.url));
 
+const { bottomNavItems } = useBottomNavCustomization();
+
 const homeHref = computed(() => {
     if (typeof window !== 'undefined') {
         try {
@@ -28,29 +31,56 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
 
     return currentUrl.value.startsWith(href);
 };
+
+const resolvedHref = (item: { href: string }) => {
+    if (item.href === '/') {
+        return homeHref.value;
+    }
+
+    return item.href;
+};
 </script>
 
 <template>
+    <!-- YT / YT Music style: full-width bottom bar, icon above label, active filled -->
     <nav
-        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl landscape:hidden dark:border-gray-800 dark:bg-gray-950/95"
+        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white pb-[env(safe-area-inset-bottom)] dark:border-gray-800 dark:bg-gray-900"
         aria-label="Bottom navigation"
     >
         <div
-            class="mx-auto flex max-w-7xl items-center justify-around px-2 py-1"
+            class="mx-auto flex max-w-lg items-center justify-around px-1 py-1"
         >
             <Link
-                v-for="item in primaryNavItems"
+                v-for="item in bottomNavItems"
                 :key="item.href"
-                :href="item.href === '/' ? homeHref : item.href"
+                :href="resolvedHref(item)"
                 :class="[
-                    'flex flex-col items-center gap-1 rounded-xl px-3 py-1.5 text-[11px] font-medium transition-colors',
+                    'flex min-w-0 flex-1 flex-col items-center gap-0.5 rounded-xl px-2 py-1.5 transition-colors',
                     isActive(item.href, item.match)
-                        ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
-                        : 'text-slate-500 hover:text-slate-900 dark:text-gray-400 dark:hover:text-gray-100',
+                        ? 'text-slate-900 dark:text-white'
+                        : 'text-slate-500 dark:text-gray-400',
                 ]"
             >
-                <component :is="item.icon" class="h-5 w-5" />
-                <span class="leading-none">{{ item.label }}</span>
+                <MaterialIcon
+                    :name="item.icon"
+                    :size="24"
+                    :filled="isActive(item.href, item.match)"
+                    :weight="300"
+                    :class="[
+                        isActive(item.href, item.match)
+                            ? 'text-slate-900 dark:text-white'
+                            : 'text-slate-500 dark:text-gray-400',
+                    ]"
+                />
+                <span
+                    :class="[
+                        'text-[10px] leading-none tracking-wide',
+                        isActive(item.href, item.match)
+                            ? 'font-bold'
+                            : 'font-medium',
+                    ]"
+                    >{{ item.label }}</span
+                >
             </Link>
         </div>
     </nav>
diff --git a/resources/js/components/navigation/BottomNavCustomizer.vue b/resources/js/components/navigation/BottomNavCustomizer.vue
new file mode 100644
index 00000000..346e2607
--- /dev/null
+++ b/resources/js/components/navigation/BottomNavCustomizer.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
+
+const {
+    bottomNavItems,
+    availableItems,
+    homeItem,
+    accountItem,
+    middleHrefs,
+    canAdd,
+    canRemove,
+    addItem,
+    removeItem,
+    reorder,
+    reset,
+    MIN_TOTAL,
+    MAX_TOTAL,
+} = useBottomNavCustomization();
+
+const dragIndex = ref<number | null>(null);
+
+const onDragStart = (index: number, e: DragEvent) => {
+    dragIndex.value = index;
+
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', String(index));
+    }
+};
+
+const onDragOver = (e: DragEvent) => {
+    e.preventDefault();
+
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'move';
+    }
+};
+
+const onDrop = (targetIndex: number, e: DragEvent) => {
+    e.preventDefault();
+    const from = dragIndex.value;
+
+    if (from === null || from === targetIndex) {
+        dragIndex.value = null;
+
+        return;
+    }
+
+    reorder(from, targetIndex);
+    dragIndex.value = null;
+};
+
+const onDragEnd = () => {
+    dragIndex.value = null;
+};
+
+const handleAdd = (href: string) => {
+    if (!canAdd.value) {
+        return;
+    }
+
+    addItem(href);
+};
+
+const handleRemove = (href: string) => {
+    if (!canRemove.value) {
+        return;
+    }
+
+    removeItem(href);
+};
+</script>
+
+<template>
+    <div
+        class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900"
+    >
+        <div class="mb-6">
+            <h3
+                class="text-base font-semibold text-slate-900 dark:text-gray-100"
+            >
+                Bottom navigation
+            </h3>
+            <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">
+                Customize your mobile bottom bar (3–5 items). Home and Account
+                are pinned — drag the middle items to reorder. Changes save
+                automatically to this device.
+            </p>
+            <p class="mt-2 text-xs font-medium">
+                <span
+                    :class="
+                        bottomNavItems.length < MIN_TOTAL ||
+                        bottomNavItems.length > MAX_TOTAL
+                            ? 'text-amber-600'
+                            : 'text-slate-500 dark:text-gray-400'
+                    "
+                >
+                    {{ bottomNavItems.length }} / {{ MAX_TOTAL }} items
+                </span>
+                <span class="mx-2 text-slate-300">·</span>
+                <button
+                    type="button"
+                    @click="reset"
+                    class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
+                >
+                    <MaterialIcon name="restart_alt" :size="14" /> Reset
+                </button>
+            </p>
+        </div>
+
+        <!-- Current bottom bar (pinned + draggable middle) -->
+        <div>
+            <p
+                class="mb-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+            >
+                Bottom bar — drag middle to reorder
+            </p>
+            <ul class="space-y-2">
+                <!-- Home pinned -->
+                <li
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800/60"
+                >
+                    <MaterialIcon
+                        name="lock"
+                        :size="16"
+                        class="shrink-0 text-slate-400"
+                    />
+                    <MaterialIcon
+                        :name="homeItem.icon"
+                        :size="20"
+                        class="shrink-0 text-slate-700 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-semibold text-slate-900 dark:text-gray-100"
+                        >{{ homeItem.label }}</span
+                    >
+                    <span
+                        class="rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-bold text-white dark:bg-white dark:text-slate-900"
+                        >Pinned first</span
+                    >
+                </li>
+
+                <!-- Middle draggable -->
+                <li
+                    v-for="(href, idx) in middleHrefs"
+                    :key="href"
+                    draggable="true"
+                    @dragstart="onDragStart(idx, $event)"
+                    @dragover="onDragOver"
+                    @drop="onDrop(idx, $event)"
+                    @dragend="onDragEnd"
+                    :class="[
+                        'flex items-center gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm transition dark:bg-gray-800',
+                        dragIndex === idx
+                            ? 'border-indigo-300 ring-2 ring-indigo-200 dark:border-indigo-700'
+                            : 'border-slate-200 dark:border-gray-700',
+                    ]"
+                >
+                    <MaterialIcon
+                        name="drag_indicator"
+                        :size="16"
+                        class="shrink-0 cursor-grab text-slate-400 active:cursor-grabbing"
+                    />
+                    <MaterialIcon
+                        :name="bottomNavItems[idx + 1]?.icon ?? 'help'"
+                        :size="20"
+                        class="shrink-0 text-slate-600 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-medium text-slate-800 dark:text-gray-200"
+                        >{{ bottomNavItems[idx + 1]?.label }}</span
+                    >
+                    <button
+                        type="button"
+                        @click="handleRemove(href)"
+                        :disabled="!canRemove"
+                        class="flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-30 dark:hover:bg-rose-950/40"
+                        aria-label="Remove from bottom bar"
+                    >
+                        <MaterialIcon name="close" :size="16" />
+                    </button>
+                </li>
+
+                <!-- Account pinned last -->
+                <li
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800/60"
+                >
+                    <MaterialIcon
+                        name="lock"
+                        :size="16"
+                        class="shrink-0 text-slate-400"
+                    />
+                    <MaterialIcon
+                        :name="accountItem.icon"
+                        :size="20"
+                        class="shrink-0 text-slate-700 dark:text-gray-300"
+                    />
+                    <span
+                        class="flex-1 text-sm font-semibold text-slate-900 dark:text-gray-100"
+                        >{{ accountItem.label }}</span
+                    >
+                    <span
+                        class="rounded-full bg-slate-900 px-2 py-0.5 text-[10px] font-bold text-white dark:bg-white dark:text-slate-900"
+                        >Pinned last</span
+                    >
+                </li>
+            </ul>
+            <p
+                v-if="!canRemove"
+                class="mt-2 text-[11px] text-amber-600 dark:text-amber-400"
+            >
+                Minimum {{ MIN_TOTAL }} items — remove disabled.
+            </p>
+            <p
+                v-if="!canAdd"
+                class="mt-2 text-[11px] text-amber-600 dark:text-amber-400"
+            >
+                Maximum {{ MAX_TOTAL }} items — add disabled.
+            </p>
+        </div>
+
+        <!-- Available pool -->
+        <div class="mt-6">
+            <p
+                class="mb-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+            >
+                More items — tap to add to bottom bar
+            </p>
+            <div
+                v-if="availableItems.length === 0"
+                class="rounded-xl border border-dashed border-slate-200 p-4 text-center text-xs text-slate-500 dark:border-gray-700 dark:text-gray-400"
+            >
+                All items are already in your bottom bar.
+            </div>
+            <div v-else class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                <button
+                    v-for="item in availableItems"
+                    :key="item.href"
+                    type="button"
+                    @click="handleAdd(item.href)"
+                    :disabled="!canAdd"
+                    class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-left text-sm font-medium transition hover:bg-slate-50 disabled:opacity-40 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/60"
+                >
+                    <MaterialIcon
+                        :name="item.icon"
+                        :size="20"
+                        class="shrink-0 text-slate-500"
+                    />
+                    <span class="flex-1 text-slate-700 dark:text-gray-300">{{
+                        item.label
+                    }}</span>
+                    <MaterialIcon
+                        name="add"
+                        :size="16"
+                        class="shrink-0 text-indigo-600 dark:text-indigo-400"
+                    />
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
index 8248ccc9..4bf8d43b 100644
--- a/resources/js/components/navigation/OverflowDrawer.vue
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -1,24 +1,12 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import {
-    Download,
-    LayoutDashboard,
-    LogIn,
-    LogOut,
-    Menu,
-    Monitor,
-    Moon,
-    Search,
-    Sun,
-    X,
-    Home,
-} from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
 import AuthModal from '@/components/AuthModal.vue';
 import NotificationDropdown from '@/components/NotificationDropdown.vue';
-import { overflowNavItems } from '@/lib/navigation';
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
+import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
 import { useDarkMode } from '@/lib/useDarkMode';
 import { usePwa } from '@/lib/usePwa';
 
@@ -43,6 +31,7 @@ const { deferredPrompt, isInstalled, promptInstall } = usePwa();
 const canInstallApp = computed(
     () => !isInstalled.value && Boolean(deferredPrompt.value),
 );
+const { availableItems } = useBottomNavCustomization();
 
 const showAuthModal = ref(false);
 const authModalMessage = ref('');
@@ -79,9 +68,9 @@ watch(
 
 <template>
     <div>
-        <!-- Top bar hamburger (portrait only) -->
+        <!-- Top bar hamburger (mobile) -->
         <div
-            class="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-xl landscape:hidden dark:border-gray-800 dark:bg-gray-950/80"
+            class="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-xl dark:border-gray-800 dark:bg-gray-950/80"
         >
             <button
                 type="button"
@@ -89,7 +78,7 @@ watch(
                 class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
                 aria-label="Open navigation menu"
             >
-                <Menu class="h-5 w-5" />
+                <MaterialIcon name="menu" :size="20" />
             </button>
             <AppLogo />
             <div class="ml-auto flex items-center gap-2">
@@ -110,7 +99,7 @@ watch(
                     class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-800"
                     aria-label="Search"
                 >
-                    <Search class="h-5 w-5" />
+                    <MaterialIcon name="search" :size="20" />
                 </button>
                 <NotificationDropdown v-if="user" />
             </div>
@@ -124,7 +113,7 @@ watch(
 
         <!-- Drawer -->
         <Teleport to="body">
-            <div v-if="open" class="fixed inset-0 z-50 flex landscape:hidden">
+            <div v-if="open" class="fixed inset-0 z-50 flex">
                 <div
                     class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
                     @click="close"
@@ -150,7 +139,7 @@ watch(
                                 class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-gray-800"
                                 aria-label="Close menu"
                             >
-                                <X class="h-4 w-4" />
+                                <MaterialIcon name="close" :size="20" />
                             </button>
                         </div>
 
@@ -190,18 +179,18 @@ watch(
                                 @click="close"
                                 class="mb-4 flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold text-white"
                             >
-                                <LogIn class="h-4 w-4" /> Sign in
+                                <MaterialIcon name="login" :size="18" /> Sign in
                             </Link>
 
-                            <!-- Overflow items -->
+                            <!-- Overflow items (rest not in bottom nav) -->
                             <p
-                                class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase"
+                                class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
                             >
                                 More
                             </p>
                             <nav class="space-y-1">
                                 <Link
-                                    v-for="item in overflowNavItems"
+                                    v-for="item in availableItems"
                                     :key="item.href"
                                     :href="item.href"
                                     @click="close"
@@ -212,12 +201,19 @@ watch(
                                             : 'text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
                                     ]"
                                 >
-                                    <component
-                                        :is="item.icon"
-                                        class="h-5 w-5"
+                                    <MaterialIcon
+                                        :name="item.icon"
+                                        :size="20"
                                     />
                                     <span>{{ item.label }}</span>
                                 </Link>
+                                <p
+                                    v-if="availableItems.length === 0"
+                                    class="px-3 py-2 text-xs text-slate-500 dark:text-gray-400"
+                                >
+                                    All items are in your bottom bar. Customize
+                                    in Profile → Bottom navigation.
+                                </p>
                             </nav>
 
                             <!-- Install -->
@@ -227,7 +223,8 @@ watch(
                                 @click="handleInstallApp"
                                 class="mt-4 flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
                             >
-                                <Download class="h-5 w-5" /> Install App
+                                <MaterialIcon name="download" :size="20" />
+                                Install App
                             </button>
 
                             <!-- Admin / Profile -->
@@ -244,7 +241,8 @@ watch(
                                     @click="close"
                                     class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
                                 >
-                                    <Home class="h-4 w-4" /> Profile
+                                    <MaterialIcon name="person" :size="18" />
+                                    Profile
                                 </Link>
                                 <Link
                                     v-if="canAccessAdmin"
@@ -252,7 +250,7 @@ watch(
                                     @click="close"
                                     class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
                                 >
-                                    <LayoutDashboard class="h-4 w-4" />
+                                    <MaterialIcon name="dashboard" :size="18" />
                                     {{ isAdminRoute ? 'Home' : 'Staff Panel' }}
                                 </Link>
                                 <Link
@@ -261,14 +259,15 @@ watch(
                                     as="button"
                                     class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40"
                                 >
-                                    <LogOut class="h-4 w-4" /> Sign out
+                                    <MaterialIcon name="logout" :size="18" />
+                                    Sign out
                                 </Link>
                             </div>
 
                             <!-- Theme -->
                             <div class="mt-6">
                                 <p
-                                    class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase"
+                                    class="mb-2 px-2 text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
                                 >
                                     Appearance
                                 </p>
@@ -287,7 +286,10 @@ watch(
                                     >
                                         <span
                                             class="flex items-center justify-center gap-1"
-                                            ><Sun class="h-3.5 w-3.5" />
+                                            ><MaterialIcon
+                                                name="light_mode"
+                                                :size="16"
+                                            />
                                             Light</span
                                         >
                                     </button>
@@ -303,7 +305,10 @@ watch(
                                     >
                                         <span
                                             class="flex items-center justify-center gap-1"
-                                            ><Moon class="h-3.5 w-3.5" />
+                                            ><MaterialIcon
+                                                name="dark_mode"
+                                                :size="16"
+                                            />
                                             Dark</span
                                         >
                                     </button>
@@ -319,7 +324,10 @@ watch(
                                     >
                                         <span
                                             class="flex items-center justify-center gap-1"
-                                            ><Monitor class="h-3.5 w-3.5" />
+                                            ><MaterialIcon
+                                                name="computer"
+                                                :size="16"
+                                            />
                                             System</span
                                         >
                                     </button>
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 7efe7402..97eecf90 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -1,21 +1,11 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import {
-    ChevronLeft,
-    ChevronRight,
-    Download,
-    LayoutDashboard,
-    LogIn,
-    Monitor,
-    Moon,
-    Search,
-    Sun,
-} from 'lucide-vue-next';
 import { computed, ref } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
 import AuthModal from '@/components/AuthModal.vue';
 import NotificationDropdown from '@/components/NotificationDropdown.vue';
+import MaterialIcon from '@/components/ui/MaterialIcon.vue';
 import { allNavItems } from '@/lib/navigation';
 import { useDarkMode } from '@/lib/useDarkMode';
 import { usePwa } from '@/lib/usePwa';
@@ -81,8 +71,6 @@ const triggerSearch = () => {
         return;
     }
 
-    // Focus is handled by globalSearchQuery watchers in pages; just set flag via store
-    // For rail, we dispatch a custom event that Home pages listen to
     window.dispatchEvent(new CustomEvent('hscstack:trigger-search'));
 };
 
@@ -92,37 +80,46 @@ const triggerSearch = () => {
 <template>
     <aside
         :class="[
-            'hidden flex-col border-r bg-white/80 backdrop-blur-xl transition-all duration-300 dark:border-gray-800 dark:bg-gray-950/80',
-            'portrait:hidden landscape:flex',
-            collapsed ? 'w-[72px]' : 'w-[256px]',
+            'flex shrink-0 flex-col bg-white shadow-[4px_0_24px_rgba(0,0,0,0.04)] transition-all duration-300 dark:bg-gray-900',
+            'sticky top-0 h-screen border-r border-slate-200/70 dark:border-gray-800',
+            collapsed ? 'w-[72px]' : 'w-[280px]',
         ]"
         aria-label="Side navigation"
     >
         <!-- Header: Logo + Collapse toggle -->
         <div
-            class="flex h-16 shrink-0 items-center border-b border-slate-100 px-3 dark:border-gray-800"
-            :class="collapsed ? 'justify-center' : 'justify-between'"
+            class="flex h-16 shrink-0 items-center border-b border-slate-100 bg-white px-3 dark:border-gray-800 dark:bg-gray-900"
+            :class="collapsed ? 'justify-center gap-0' : 'justify-between'"
         >
             <AppLogo v-if="!collapsed" />
             <div
                 v-else
-                class="flex h-8 w-8 items-center justify-center rounded-xl bg-indigo-600 text-white"
+                class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 text-white shadow-sm"
             >
                 <span class="text-xs font-black">H</span>
             </div>
             <button
                 type="button"
                 @click="emit('toggle')"
-                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300"
+                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-600 hover:bg-white hover:text-slate-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                 :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
             >
-                <ChevronRight v-if="collapsed" class="h-4 w-4" />
-                <ChevronLeft v-else class="h-4 w-4" />
+                <MaterialIcon
+                    :name="collapsed ? 'chevron_right' : 'chevron_left'"
+                    :size="20"
+                />
             </button>
         </div>
 
         <!-- Scrollable nav -->
-        <div class="flex flex-1 flex-col overflow-y-auto py-3">
+        <div class="flex flex-1 flex-col overflow-y-auto py-4">
+            <div v-if="!collapsed" class="px-4 pb-2">
+                <p
+                    class="text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                >
+                    Navigation
+                </p>
+            </div>
             <!-- Primary + Overflow combined for desktop rail -->
             <nav class="space-y-1 px-2">
                 <Link
@@ -130,15 +127,28 @@ const triggerSearch = () => {
                     :key="item.href"
                     :href="item.href === '/' ? homeHref : item.href"
                     :class="[
-                        'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors',
+                        'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all',
                         isActive(item.href, item.match)
-                            ? 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400'
-                            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-gray-100',
-                        collapsed ? 'justify-center' : '',
+                            ? 'bg-slate-900 text-white shadow-sm dark:bg-white dark:text-slate-900'
+                            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100',
+                        collapsed
+                            ? 'justify-center'
+                            : isActive(item.href, item.match)
+                              ? 'shadow-sm'
+                              : '',
                     ]"
                     :title="collapsed ? item.label : undefined"
                 >
-                    <component :is="item.icon" class="h-5 w-5 shrink-0" />
+                    <MaterialIcon
+                        :name="item.icon"
+                        :size="20"
+                        :class="[
+                            'shrink-0 transition-colors',
+                            isActive(item.href, item.match)
+                                ? 'text-white dark:text-slate-900'
+                                : 'text-slate-500 group-hover:text-slate-900 dark:text-gray-500',
+                        ]"
+                    />
                     <span v-if="!collapsed" class="truncate">{{
                         item.label
                     }}</span>
@@ -146,16 +156,18 @@ const triggerSearch = () => {
             </nav>
 
             <!-- PWA Install -->
-            <div v-if="canInstallApp" class="mt-4 px-2">
+            <div v-if="canInstallApp" class="mt-6 px-2">
                 <button
                     type="button"
                     @click="handleInstallApp"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 hover:bg-indigo-100 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300',
-                        collapsed ? 'justify-center' : '',
+                        'flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-sm font-bold shadow-sm transition-colors',
+                        collapsed
+                            ? 'justify-center border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
+                            : 'border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900 dark:hover:bg-gray-100',
                     ]"
                 >
-                    <Download class="h-5 w-5 shrink-0" />
+                    <MaterialIcon name="download" :size="18" />
                     <span v-if="!collapsed">Install App</span>
                 </button>
             </div>
@@ -169,11 +181,11 @@ const triggerSearch = () => {
                     type="button"
                     @click="triggerSearch"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
-                    <Search class="h-5 w-5 shrink-0" />
+                    <MaterialIcon name="search" :size="20" />
                     <span v-if="!collapsed">Search</span>
                 </button>
 
@@ -182,19 +194,20 @@ const triggerSearch = () => {
                     type="button"
                     @click="toggle"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900',
+                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
-                    <Monitor
-                        v-if="theme === 'system'"
-                        class="h-5 w-5 shrink-0"
-                    />
-                    <Sun
-                        v-else-if="theme === 'light'"
-                        class="h-5 w-5 shrink-0"
+                    <MaterialIcon
+                        :name="
+                            theme === 'system'
+                                ? 'computer'
+                                : theme === 'light'
+                                  ? 'light_mode'
+                                  : 'dark_mode'
+                        "
+                        :size="20"
                     />
-                    <Moon v-else class="h-5 w-5 shrink-0" />
                     <span v-if="!collapsed" class="capitalize">{{
                         theme
                     }}</span>
@@ -221,13 +234,13 @@ const triggerSearch = () => {
                             collapsed ? 'px-2' : '',
                         ]"
                     >
-                        <LogIn class="h-4 w-4 shrink-0" />
+                        <MaterialIcon name="login" :size="18" />
                         <span v-if="!collapsed">Login</span>
                     </Link>
                     <div
                         v-else
                         :class="[
-                            'flex items-center gap-3 rounded-xl border bg-slate-50 px-3 py-2.5 dark:border-gray-800 dark:bg-gray-900',
+                            'flex items-center gap-3 rounded-xl border bg-slate-50 px-3 py-2.5 dark:border-gray-800 dark:bg-gray-800',
                             collapsed ? 'justify-center' : 'justify-between',
                         ]"
                     >
@@ -257,10 +270,10 @@ const triggerSearch = () => {
                         <Link
                             v-if="!collapsed && canAccessAdmin"
                             :href="isAdminRoute ? '/' : '/admin'"
-                            class="shrink-0 rounded-lg p-1.5 text-slate-500 hover:bg-white dark:hover:bg-gray-800"
+                            class="shrink-0 rounded-lg p-1.5 text-slate-500 hover:bg-white dark:hover:bg-gray-700"
                             :title="isAdminRoute ? 'Home' : 'Staff Panel'"
                         >
-                            <LayoutDashboard class="h-4 w-4" />
+                            <MaterialIcon name="dashboard" :size="18" />
                         </Link>
                     </div>
                 </div>
diff --git a/resources/js/components/ui/MaterialIcon.vue b/resources/js/components/ui/MaterialIcon.vue
new file mode 100644
index 00000000..da081f77
--- /dev/null
+++ b/resources/js/components/ui/MaterialIcon.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Material Symbols Rounded — SVG-based via font glyphs
+ * Uses Google Material Symbols Rounded font with FILL=1, wght=300, GRAD=0, opsz=24
+ * Rendered as <span> with font-variation-settings — vector (SVG) glyphs, filled, weight 300
+ * Bridging: allows TypeScript usage in Vue SFCs without importing individual SVG files
+ */
+type Props = {
+    name: string;
+    filled?: boolean;
+    weight?: number;
+    opsz?: number;
+    size?: number | string;
+    class?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+    filled: true,
+    weight: 300,
+    opsz: 24,
+    size: 24,
+});
+</script>
+
+<template>
+    <span
+        class="material-symbols-rounded select-none"
+        :class="($props.class as string)"
+        :style="{
+            fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${opsz}`,
+            fontSize: typeof size === 'number' ? `${size}px` : (size as string),
+        }"
+        aria-hidden="true"
+        >{{ name }}</span
+    >
+</template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 77a8a795..fc5fdedb 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import FloatingShareBar from '@/components/FloatingShareBar.vue';
 import Footer from '@/components/Footer.vue';
@@ -8,9 +8,21 @@ import BottomNav from '@/components/navigation/BottomNav.vue';
 import OverflowDrawer from '@/components/navigation/OverflowDrawer.vue';
 import SideRail from '@/components/navigation/SideRail.vue';
 import ToastNotification from '@/components/ToastNotification.vue';
+import { useBreakpoint } from '@/lib/useBreakpoint';
 import { useOrientation } from '@/lib/useOrientation';
 
-const { isLandscape, isHydrated } = useOrientation();
+const { isLandscape, isHydrated: orientationHydrated } = useOrientation();
+const { isMobile, isHydrated: breakpointHydrated } = useBreakpoint(1024);
+const isHydrated = computed(
+    () => orientationHydrated.value && breakpointHydrated.value,
+);
+// Mobile OR portrait → bottom nav; Desktop + landscape → side rail (keeps spec: "mobile or portrait")
+const showSideRail = computed(() =>
+    isHydrated.value ? !isMobile.value && isLandscape.value : true,
+);
+const showBottomNav = computed(() =>
+    isHydrated.value ? isMobile.value || !isLandscape.value : false,
+);
 
 const railCollapsed = ref(false);
 
@@ -54,21 +66,20 @@ const drawerOpen = ref(false);
             ></div>
         </div>
 
-        <!-- Orientation-aware shell: landscape = side rail, portrait = bottom nav + top hamburger -->
+        <!-- Responsive shell: desktop + landscape = side rail; mobile OR portrait = bottom nav + top hamburger -->
         <div class="relative z-10 flex min-h-screen">
-            <!-- Landscape side rail (desktop) -->
+            <!-- Desktop side rail -->
             <SideRail
-                v-if="isHydrated ? isLandscape : true"
+                v-if="showSideRail"
                 :collapsed="railCollapsed"
-                class="hidden landscape:flex"
                 @toggle="toggleRail"
             />
 
             <div class="flex min-h-screen flex-1 flex-col">
-                <!-- Portrait top bar + hamburger (mobile) -->
+                <!-- Mobile top bar + hamburger -->
                 <OverflowDrawer
+                    v-if="showBottomNav"
                     :open="drawerOpen"
-                    class="landscape:hidden"
                     @update:open="drawerOpen = $event"
                     @close="drawerOpen = false"
                 />
@@ -76,26 +87,20 @@ const drawerOpen = ref(false);
                 <main
                     :class="[
                         'flex-1',
-                        isHydrated && !isLandscape
-                            ? 'pb-16'
-                            : 'min-h-[calc(100vh-4rem)]',
+                        showBottomNav ? 'pb-16' : 'min-h-[calc(100vh-4rem)]',
                     ]"
                 >
                     <slot />
                 </main>
 
-                <!-- Footer: hidden on portrait to free space (bottom nav occupies footer area) -->
+                <!-- Footer: hidden on mobile (frees space, bottom nav occupies) -->
                 <Footer
-                    v-if="
-                        $page.component !== 'Chat/Index' &&
-                        (isHydrated ? isLandscape : true)
-                    "
-                    class="hidden landscape:block"
+                    v-if="$page.component !== 'Chat/Index' && !showBottomNav"
                 />
             </div>
         </div>
 
-        <BottomNav v-if="isHydrated ? !isLandscape : false" />
+        <BottomNav v-if="showBottomNav" />
         <FloatingShareBar />
         <ToastNotification />
     </div>
diff --git a/resources/js/lib/navigation.ts b/resources/js/lib/navigation.ts
index 4859a787..e57b42b9 100644
--- a/resources/js/lib/navigation.ts
+++ b/resources/js/lib/navigation.ts
@@ -1,21 +1,9 @@
-import {
-    BookOpen,
-    HeartHandshake,
-    Home,
-    Info,
-    LifeBuoy,
-    MessageCircle,
-    MessageSquare,
-    Sparkles,
-    Users,
-} from 'lucide-vue-next';
-import type { Component } from 'vue';
-
 export type NavItem = {
     label: string;
     labelBn?: string;
     href: string;
-    icon: Component;
+    /** Material Symbols Rounded name — rendered via MaterialIcon (filled, wght 300) */
+    icon: string;
     match: (url: string) => boolean;
     showInBottom?: boolean;
 };
@@ -24,7 +12,7 @@ export const primaryNavItems: NavItem[] = [
     {
         label: 'Home',
         href: '/',
-        icon: Home,
+        icon: 'home',
         match: (url) =>
             url === '/' ||
             url.startsWith('/?') ||
@@ -35,7 +23,7 @@ export const primaryNavItems: NavItem[] = [
     {
         label: 'Forum',
         href: '/forum',
-        icon: MessageSquare,
+        icon: 'forum',
         match: (url) => url.startsWith('/forum'),
         showInBottom: true,
     },
@@ -43,7 +31,7 @@ export const primaryNavItems: NavItem[] = [
         label: 'Chat',
         labelBn: 'Global Chat',
         href: '/chat',
-        icon: MessageCircle,
+        icon: 'chat',
         match: (url) => url.startsWith('/chat'),
         showInBottom: true,
     },
@@ -51,7 +39,7 @@ export const primaryNavItems: NavItem[] = [
         label: 'AI',
         labelBn: 'HSCStack AI',
         href: '/ai',
-        icon: Sparkles,
+        icon: 'smart_toy',
         match: (url) => url.startsWith('/ai'),
         showInBottom: true,
     },
@@ -61,32 +49,32 @@ export const overflowNavItems: NavItem[] = [
     {
         label: 'Blogs',
         href: '/blogs',
-        icon: BookOpen,
+        icon: 'menu_book',
         match: (url) => url.startsWith('/blogs'),
     },
     {
         label: 'Support',
         href: '/support',
-        icon: LifeBuoy,
+        icon: 'help',
         match: (url) => url.startsWith('/support'),
     },
     {
         label: 'About',
         href: '/about-us',
-        icon: Info,
+        icon: 'info',
         match: (url) => url.startsWith('/about-us'),
     },
     {
         label: 'Join',
         labelBn: 'Join Team',
         href: '/join',
-        icon: Users,
+        icon: 'group_add',
         match: (url) => url.startsWith('/join'),
     },
     {
         label: 'Donate',
         href: '/donate',
-        icon: HeartHandshake,
+        icon: 'volunteer_activism',
         match: (url) => url.startsWith('/donate'),
     },
 ];
diff --git a/resources/js/lib/useBottomNavCustomization.ts b/resources/js/lib/useBottomNavCustomization.ts
new file mode 100644
index 00000000..5ec712fb
--- /dev/null
+++ b/resources/js/lib/useBottomNavCustomization.ts
@@ -0,0 +1,199 @@
+import { usePage } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+
+import { allNavItems } from '@/lib/navigation';
+import type { NavItem } from '@/lib/navigation';
+
+const STORAGE_KEY = 'hscstack:bottom-nav:v1';
+const MIN_TOTAL = 3;
+const MAX_TOTAL = 5;
+
+// Home is always first, Account is always last
+const HOME_HREF = '/';
+const CUSTOMIZABLE_POOL: NavItem[] = allNavItems.filter(
+    (i) => i.href !== HOME_HREF,
+);
+
+const DEFAULT_MIDDLE_HREFS = ['/forum', '/chat', '/ai']; // 3 middle → 5 total with Home+Account
+
+function isValidHref(href: string): boolean {
+    return CUSTOMIZABLE_POOL.some((i) => i.href === href);
+}
+
+function loadStored(): string[] | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+
+        if (!raw) {
+            return null;
+        }
+
+        const parsed = JSON.parse(raw) as unknown;
+
+        if (!Array.isArray(parsed)) {
+            return null;
+        }
+
+        const filtered = (parsed as string[]).filter(isValidHref);
+        // Dedupe
+        const deduped = [...new Set(filtered)];
+
+        if (deduped.length < MIN_TOTAL - 2 || deduped.length > MAX_TOTAL - 2) {
+            return null;
+        }
+
+        return deduped;
+    } catch {
+        return null;
+    }
+}
+
+function persist(hrefs: string[]) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(hrefs));
+    } catch {}
+}
+
+export function useBottomNavCustomization() {
+    const page = usePage();
+    const user = computed(
+        () => page.props.auth?.user as App.Data.UserData | undefined,
+    );
+
+    const middleHrefs = ref<string[]>(
+        loadStored() ?? [...DEFAULT_MIDDLE_HREFS],
+    );
+
+    // Persist on change
+    watch(middleHrefs, (v) => persist(v), { deep: true });
+
+    const homeItem = computed<NavItem>(
+        () => allNavItems.find((i) => i.href === HOME_HREF)!,
+    );
+
+    const accountItem = computed<NavItem>(() => {
+        if (user.value) {
+            const href = user.value.username
+                ? `/u/${user.value.username}`
+                : '/profile';
+
+            return {
+                label: 'Account',
+                href,
+                icon: 'person',
+                match: (url: string) =>
+                    url.startsWith('/u/') || url.startsWith('/profile'),
+            };
+        }
+
+        return {
+            label: 'Login',
+            href: '/login',
+            icon: 'login',
+            match: (url: string) => url.startsWith('/login'),
+        };
+    });
+
+    const middleItems = computed<NavItem[]>(() => {
+        return middleHrefs.value
+            .map((href) => CUSTOMIZABLE_POOL.find((i) => i.href === href))
+            .filter((i): i is NavItem => Boolean(i));
+    });
+
+    const bottomNavItems = computed<NavItem[]>(() => {
+        return [homeItem.value, ...middleItems.value, accountItem.value];
+    });
+
+    const availableItems = computed<NavItem[]>(() => {
+        const used = new Set(middleHrefs.value);
+
+        return CUSTOMIZABLE_POOL.filter((i) => !used.has(i.href));
+    });
+
+    const canAdd = computed(() => bottomNavItems.value.length < MAX_TOTAL);
+    const canRemove = computed(() => bottomNavItems.value.length > MIN_TOTAL);
+
+    const addItem = (href: string) => {
+        if (!canAdd.value) {
+            return;
+        }
+
+        if (!isValidHref(href)) {
+            return;
+        }
+
+        if (middleHrefs.value.includes(href)) {
+            return;
+        }
+
+        middleHrefs.value = [...middleHrefs.value, href];
+    };
+
+    const removeItem = (href: string) => {
+        if (!canRemove.value) {
+            return;
+        }
+
+        if (homeItem.value.href === href) {
+            return;
+        }
+
+        if (accountItem.value.href === href) {
+            return;
+        }
+
+        middleHrefs.value = middleHrefs.value.filter((h) => h !== href);
+    };
+
+    const reorder = (fromIndex: number, toIndex: number) => {
+        // from/to are indices within middleHrefs (0 .. middle-1)
+        if (fromIndex < 0 || toIndex < 0) {
+            return;
+        }
+
+        if (
+            fromIndex >= middleHrefs.value.length ||
+            toIndex >= middleHrefs.value.length
+        ) {
+            return;
+        }
+
+        const copy = [...middleHrefs.value];
+        const [moved] = copy.splice(fromIndex, 1);
+        copy.splice(toIndex, 0, moved);
+        middleHrefs.value = copy;
+    };
+
+    const reset = () => {
+        middleHrefs.value = [...DEFAULT_MIDDLE_HREFS];
+    };
+
+    return {
+        // constants
+        MIN_TOTAL,
+        MAX_TOTAL,
+        // state
+        middleHrefs,
+        bottomNavItems,
+        availableItems,
+        homeItem,
+        accountItem,
+        canAdd,
+        canRemove,
+        // actions
+        addItem,
+        removeItem,
+        reorder,
+        reset,
+        // for customizer UI
+        customizablePool: CUSTOMIZABLE_POOL,
+    };
+}
diff --git a/resources/js/lib/useBreakpoint.ts b/resources/js/lib/useBreakpoint.ts
new file mode 100644
index 00000000..c542ba90
--- /dev/null
+++ b/resources/js/lib/useBreakpoint.ts
@@ -0,0 +1,62 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export function useBreakpoint(breakpointPx = 1024) {
+    const isMobile = ref(false);
+    const isDesktop = ref(true);
+    const isHydrated = ref(false);
+
+    let mql: MediaQueryList | null = null;
+
+    const update = () => {
+        if (mql) {
+            isMobile.value = mql.matches;
+            isDesktop.value = !mql.matches;
+
+            return;
+        }
+
+        if (typeof window !== 'undefined') {
+            isMobile.value = window.innerWidth < breakpointPx;
+            isDesktop.value = !isMobile.value;
+        }
+    };
+
+    const handler = () => update();
+
+    onMounted(() => {
+        isHydrated.value = true;
+
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        mql = window.matchMedia(`(max-width: ${breakpointPx - 1}px)`);
+        update();
+
+        if (mql.addEventListener) {
+            mql.addEventListener('change', handler);
+        } else {
+            mql.addListener(handler);
+        }
+
+        window.addEventListener('resize', handler);
+    });
+
+    onBeforeUnmount(() => {
+        if (!mql) {
+            return;
+        }
+
+        if (mql.removeEventListener) {
+            mql.removeEventListener('change', handler);
+        } else {
+            mql.removeListener(handler);
+        }
+
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', handler);
+        }
+    });
+
+    return { isMobile, isDesktop, isHydrated };
+}
diff --git a/resources/js/pages/Profile.vue b/resources/js/pages/Profile.vue
index c908ab55..d3fa2b7b 100644
--- a/resources/js/pages/Profile.vue
+++ b/resources/js/pages/Profile.vue
@@ -15,6 +15,8 @@ import {
 import { computed, ref } from 'vue';
 import { compressImage } from '@/lib/imageCompression';
 
+import BottomNavCustomizer from '@/components/navigation/BottomNavCustomizer.vue';
+
 const props = defineProps({
     user: Object,
 });
@@ -640,6 +642,9 @@ const submitForm = () => {
                 </transition>
             </div>
 
+            <!-- Bottom Navigation Customization (Mobile) -->
+            <BottomNavCustomizer />
+
             <!-- Support Center Link -->
             <div
                 class="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-xs sm:flex-row sm:items-center dark:border-gray-700 dark:bg-gray-900"

From 31a2e6bf4160e5691a6efdb3fe671a79e5d5b5ca Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 16:09:15 +0600
Subject: [PATCH 03/11] fix(nav): polish desktop siderail colors and hover
 effects

- Desktop rail now bg-white/dark slate-900 with subtle shadow, border-slate-200/60. Active uses indigo-50/ring-indigo-100 (light) and indigo-500/10 (dark) with dot indicator instead of harsh slate-900.

- Hover: consistent hover:bg-slate-100 / dark hover:bg-slate-800 with 150ms ease, group hover for icons, shadow-sm on hover.

- Header toggle, PWA button, search/theme, auth card all refined for better contrast and polish.
---
 .../js/components/navigation/SideRail.vue     | 83 ++++++++++---------
 1 file changed, 45 insertions(+), 38 deletions(-)

diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 97eecf90..5914e8c4 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -80,42 +80,42 @@ const triggerSearch = () => {
 <template>
     <aside
         :class="[
-            'flex shrink-0 flex-col bg-white shadow-[4px_0_24px_rgba(0,0,0,0.04)] transition-all duration-300 dark:bg-gray-900',
-            'sticky top-0 h-screen border-r border-slate-200/70 dark:border-gray-800',
+            'flex shrink-0 flex-col bg-white transition-all duration-300 dark:bg-slate-900',
+            'sticky top-0 h-screen border-r border-slate-200/60 shadow-[1px_0_3px_rgba(0,0,0,0.02),4px_0_16px_rgba(0,0,0,0.03)] dark:border-slate-800/60 dark:shadow-none',
             collapsed ? 'w-[72px]' : 'w-[280px]',
         ]"
         aria-label="Side navigation"
     >
         <!-- Header: Logo + Collapse toggle -->
         <div
-            class="flex h-16 shrink-0 items-center border-b border-slate-100 bg-white px-3 dark:border-gray-800 dark:bg-gray-900"
+            class="flex h-16 shrink-0 items-center border-b border-slate-100 bg-white px-3 dark:border-slate-800 dark:bg-slate-900"
             :class="collapsed ? 'justify-center gap-0' : 'justify-between'"
         >
             <AppLogo v-if="!collapsed" />
             <div
                 v-else
-                class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 text-white shadow-sm"
+                class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 text-white shadow-sm ring-1 ring-indigo-600/20"
             >
                 <span class="text-xs font-black">H</span>
             </div>
             <button
                 type="button"
                 @click="emit('toggle')"
-                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-600 hover:bg-white hover:text-slate-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                class="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm transition-all duration-150 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 hover:shadow dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-100"
                 :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
             >
                 <MaterialIcon
                     :name="collapsed ? 'chevron_right' : 'chevron_left'"
-                    :size="20"
+                    :size="18"
                 />
             </button>
         </div>
 
         <!-- Scrollable nav -->
         <div class="flex flex-1 flex-col overflow-y-auto py-4">
-            <div v-if="!collapsed" class="px-4 pb-2">
+            <div v-if="!collapsed" class="px-4 pb-3">
                 <p
-                    class="text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-gray-500"
+                    class="text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-slate-500"
                 >
                     Navigation
                 </p>
@@ -127,15 +127,11 @@ const triggerSearch = () => {
                     :key="item.href"
                     :href="item.href === '/' ? homeHref : item.href"
                     :class="[
-                        'group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all',
+                        'group flex items-center gap-3 rounded-lg px-3 py-[9px] text-[13px] font-semibold transition-all duration-150 ease-out',
                         isActive(item.href, item.match)
-                            ? 'bg-slate-900 text-white shadow-sm dark:bg-white dark:text-slate-900'
-                            : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100',
-                        collapsed
-                            ? 'justify-center'
-                            : isActive(item.href, item.match)
-                              ? 'shadow-sm'
-                              : '',
+                            ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20'
+                            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
+                        collapsed ? 'justify-center' : '',
                     ]"
                     :title="collapsed ? item.label : undefined"
                 >
@@ -143,15 +139,19 @@ const triggerSearch = () => {
                         :name="item.icon"
                         :size="20"
                         :class="[
-                            'shrink-0 transition-colors',
+                            'shrink-0 transition-colors duration-150',
                             isActive(item.href, item.match)
-                                ? 'text-white dark:text-slate-900'
-                                : 'text-slate-500 group-hover:text-slate-900 dark:text-gray-500',
+                                ? 'text-indigo-600 dark:text-indigo-300'
+                                : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300',
                         ]"
                     />
-                    <span v-if="!collapsed" class="truncate">{{
+                    <span v-if="!collapsed" class="truncate tracking-tight">{{
                         item.label
                     }}</span>
+                    <span
+                        v-if="!collapsed && isActive(item.href, item.match)"
+                        class="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-600 dark:bg-indigo-400"
+                    />
                 </Link>
             </nav>
 
@@ -161,10 +161,10 @@ const triggerSearch = () => {
                     type="button"
                     @click="handleInstallApp"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-sm font-bold shadow-sm transition-colors',
+                        'flex w-full items-center gap-2.5 rounded-xl border px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
                         collapsed
-                            ? 'justify-center border-slate-900 bg-slate-900 text-white dark:border-white dark:bg-white dark:text-slate-900'
-                            : 'border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900 dark:hover:bg-gray-100',
+                            ? 'justify-center border-slate-900 bg-slate-900 text-white hover:bg-slate-800 hover:shadow-md dark:border-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100'
+                            : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:border-slate-600 dark:hover:bg-slate-700',
                     ]"
                 >
                     <MaterialIcon name="download" :size="18" />
@@ -174,18 +174,21 @@ const triggerSearch = () => {
         </div>
 
         <!-- Footer controls -->
-        <div class="border-t border-slate-100 p-2 dark:border-gray-800">
+        <div
+            class="border-t border-slate-100 bg-slate-50/50 p-2 dark:border-slate-800 dark:bg-slate-900/50"
+        >
             <div class="space-y-1">
                 <!-- Search -->
                 <button
                     type="button"
                     @click="triggerSearch"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800',
+                        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors duration-150',
+                        'text-slate-600 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
-                    <MaterialIcon name="search" :size="20" />
+                    <MaterialIcon name="search" :size="18" />
                     <span v-if="!collapsed">Search</span>
                 </button>
 
@@ -194,7 +197,8 @@ const triggerSearch = () => {
                     type="button"
                     @click="toggle"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-800',
+                        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors duration-150',
+                        'text-slate-600 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
@@ -206,7 +210,7 @@ const triggerSearch = () => {
                                   ? 'light_mode'
                                   : 'dark_mode'
                         "
-                        :size="20"
+                        :size="18"
                     />
                     <span v-if="!collapsed" class="capitalize">{{
                         theme
@@ -218,19 +222,20 @@ const triggerSearch = () => {
                     v-if="user"
                     :class="[
                         'flex',
-                        collapsed ? 'justify-center px-0' : 'px-3 py-1',
+                        collapsed ? 'justify-center px-0' : 'px-2 py-1',
                     ]"
                 >
                     <NotificationDropdown />
                 </div>
 
                 <!-- Auth -->
-                <div :class="collapsed ? 'px-0' : 'px-2 pt-2'">
+                <div :class="collapsed ? 'px-0' : 'px-2 pt-1'">
                     <Link
                         v-if="!user"
                         href="/login"
                         :class="[
-                            'flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-3 py-2.5 text-sm font-bold text-white hover:bg-slate-800 dark:bg-white dark:text-slate-900',
+                            'flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
+                            'bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-md dark:bg-indigo-500 dark:hover:bg-indigo-400',
                             collapsed ? 'px-2' : '',
                         ]"
                     >
@@ -240,29 +245,31 @@ const triggerSearch = () => {
                     <div
                         v-else
                         :class="[
-                            'flex items-center gap-3 rounded-xl border bg-slate-50 px-3 py-2.5 dark:border-gray-800 dark:bg-gray-800',
+                            'flex items-center gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-800',
                             collapsed ? 'justify-center' : 'justify-between',
                         ]"
                     >
-                        <div class="flex min-w-0 items-center gap-2">
+                        <div class="flex min-w-0 items-center gap-2.5">
                             <img
                                 v-if="user.image_url"
                                 :src="user.image_url"
                                 :alt="user.name"
-                                class="h-8 w-8 rounded-full object-cover"
+                                class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200 dark:ring-slate-700"
                             />
                             <span
                                 v-else
-                                class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white"
+                                class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20"
                                 >{{ user.name.charAt(0).toUpperCase() }}</span
                             >
                             <div v-if="!collapsed" class="min-w-0">
                                 <p
-                                    class="truncate text-xs font-semibold text-slate-900 dark:text-gray-100"
+                                    class="truncate text-xs font-semibold text-slate-900 dark:text-slate-100"
                                 >
                                     {{ user.name }}
                                 </p>
-                                <p class="truncate text-[11px] text-slate-500">
+                                <p
+                                    class="truncate text-[11px] text-slate-500 dark:text-slate-400"
+                                >
                                     {{ user.email }}
                                 </p>
                             </div>
@@ -270,7 +277,7 @@ const triggerSearch = () => {
                         <Link
                             v-if="!collapsed && canAccessAdmin"
                             :href="isAdminRoute ? '/' : '/admin'"
-                            class="shrink-0 rounded-lg p-1.5 text-slate-500 hover:bg-white dark:hover:bg-gray-700"
+                            class="shrink-0 rounded-lg bg-slate-50 p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 hover:shadow-sm dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
                             :title="isAdminRoute ? 'Home' : 'Staff Panel'"
                         >
                             <MaterialIcon name="dashboard" :size="18" />

From df3a4f1522ef748bf70945b54b97a762b13cb7d1 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 16:14:59 +0600
Subject: [PATCH 04/11] =?UTF-8?q?polish(nav):=20spacing,=20typography,=20a?=
 =?UTF-8?q?nimations,=20colors=20=E2=80=94=20overall=20little=20things?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SideRail: tighter nav py, tracking-tight, ring, dot indicator, header shadow polish. BottomNav: backdrop-blur, gap, scale active, antialiased. OverflowDrawer: 56px top bar, rounded drawer, cubic-bezier slide, YT-style hamburger.
---
 .../js/components/navigation/BottomNav.vue    | 17 +++++++-------
 .../components/navigation/OverflowDrawer.vue  | 22 ++++++++++---------
 .../js/components/navigation/SideRail.vue     | 20 ++++++++---------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
index b94f8446..95229030 100644
--- a/resources/js/components/navigation/BottomNav.vue
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -44,37 +44,38 @@ const resolvedHref = (item: { href: string }) => {
 <template>
     <!-- YT / YT Music style: full-width bottom bar, icon above label, active filled -->
     <nav
-        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white pb-[env(safe-area-inset-bottom)] dark:border-gray-800 dark:bg-gray-900"
+        class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200/70 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95"
         aria-label="Bottom navigation"
     >
         <div
-            class="mx-auto flex max-w-lg items-center justify-around px-1 py-1"
+            class="mx-auto flex max-w-md items-center justify-around px-1 py-1"
         >
             <Link
                 v-for="item in bottomNavItems"
                 :key="item.href"
                 :href="resolvedHref(item)"
                 :class="[
-                    'flex min-w-0 flex-1 flex-col items-center gap-0.5 rounded-xl px-2 py-1.5 transition-colors',
+                    'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-1.5 transition-all duration-150 ease-out',
                     isActive(item.href, item.match)
                         ? 'text-slate-900 dark:text-white'
-                        : 'text-slate-500 dark:text-gray-400',
+                        : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
                 ]"
             >
                 <MaterialIcon
                     :name="item.icon"
-                    :size="24"
+                    :size="22"
                     :filled="isActive(item.href, item.match)"
                     :weight="300"
                     :class="[
+                        'transition-transform duration-150',
                         isActive(item.href, item.match)
-                            ? 'text-slate-900 dark:text-white'
-                            : 'text-slate-500 dark:text-gray-400',
+                            ? 'scale-[1.02] text-slate-900 dark:text-white'
+                            : 'text-slate-500 dark:text-slate-400',
                     ]"
                 />
                 <span
                     :class="[
-                        'text-[10px] leading-none tracking-wide',
+                        'text-[10px] leading-none tracking-wide antialiased',
                         isActive(item.href, item.match)
                             ? 'font-bold'
                             : 'font-medium',
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
index 4bf8d43b..fadd2f4e 100644
--- a/resources/js/components/navigation/OverflowDrawer.vue
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -68,20 +68,22 @@ watch(
 
 <template>
     <div>
-        <!-- Top bar hamburger (mobile) -->
+        <!-- Top bar hamburger (mobile) — YT-style: compact, hamburger left -->
         <div
-            class="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-slate-200 bg-white/80 px-4 backdrop-blur-xl dark:border-gray-800 dark:bg-gray-950/80"
+            class="sticky top-0 z-30 flex h-[56px] items-center gap-2.5 border-b border-slate-200/70 bg-white/90 px-3.5 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/90"
         >
             <button
                 type="button"
                 @click="emit('update:open', true)"
-                class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
+                class="flex h-9 w-9 items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-slate-100 active:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800"
                 aria-label="Open navigation menu"
             >
-                <MaterialIcon name="menu" :size="20" />
+                <MaterialIcon name="menu" :size="22" />
             </button>
-            <AppLogo />
-            <div class="ml-auto flex items-center gap-2">
+            <div class="ml-1">
+                <AppLogo />
+            </div>
+            <div class="ml-auto flex items-center gap-1.5">
                 <button
                     type="button"
                     @click="
@@ -96,7 +98,7 @@ watch(
                             );
                         }
                     "
-                    class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                    class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 active:scale-95 dark:text-slate-300 dark:hover:bg-slate-800"
                     aria-label="Search"
                 >
                     <MaterialIcon name="search" :size="20" />
@@ -120,15 +122,15 @@ watch(
                 />
                 <Transition
                     appear
-                    enter-active-class="transition-transform duration-300"
+                    enter-active-class="transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]"
                     enter-from-class="-translate-x-full"
                     enter-to-class="translate-x-0"
-                    leave-active-class="transition-transform duration-200"
+                    leave-active-class="transition-transform duration-200 ease-in"
                     leave-from-class="translate-x-0"
                     leave-to-class="-translate-x-full"
                 >
                     <aside
-                        class="relative flex h-full w-[86%] max-w-xs flex-col bg-white shadow-2xl dark:bg-gray-950"
+                        class="relative flex h-full w-[84%] max-w-[320px] flex-col bg-white shadow-[8px_0_32px_rgba(0,0,0,0.12)] dark:bg-slate-900"
                     >
                         <div
                             class="flex items-center justify-between border-b border-slate-100 p-4 dark:border-gray-800"
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 5914e8c4..52b56b90 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -112,32 +112,32 @@ const triggerSearch = () => {
         </div>
 
         <!-- Scrollable nav -->
-        <div class="flex flex-1 flex-col overflow-y-auto py-4">
-            <div v-if="!collapsed" class="px-4 pb-3">
+        <div class="flex flex-1 flex-col overflow-y-auto py-3.5">
+            <div v-if="!collapsed" class="px-4 pb-2.5">
                 <p
-                    class="text-[11px] font-bold tracking-widest text-slate-400 uppercase dark:text-slate-500"
+                    class="text-[10px] font-bold tracking-[0.12em] text-slate-400 uppercase dark:text-slate-500"
                 >
                     Navigation
                 </p>
             </div>
             <!-- Primary + Overflow combined for desktop rail -->
-            <nav class="space-y-1 px-2">
+            <nav class="space-y-0.5 px-2.5">
                 <Link
                     v-for="item in allNavItems"
                     :key="item.href"
                     :href="item.href === '/' ? homeHref : item.href"
                     :class="[
-                        'group flex items-center gap-3 rounded-lg px-3 py-[9px] text-[13px] font-semibold transition-all duration-150 ease-out',
+                        'group flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-[13px] font-medium tracking-tight transition-all duration-150 ease-out',
                         isActive(item.href, item.match)
-                            ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-300 dark:ring-indigo-500/20'
-                            : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
-                        collapsed ? 'justify-center' : '',
+                            ? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200/60 dark:bg-indigo-500/10 dark:text-indigo-200 dark:ring-indigo-500/20'
+                            : 'text-slate-600 hover:bg-slate-100/80 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/70 dark:hover:text-slate-100',
+                        collapsed ? 'justify-center px-2' : '',
                     ]"
                     :title="collapsed ? item.label : undefined"
                 >
                     <MaterialIcon
                         :name="item.icon"
-                        :size="20"
+                        :size="19"
                         :class="[
                             'shrink-0 transition-colors duration-150',
                             isActive(item.href, item.match)
@@ -145,7 +145,7 @@ const triggerSearch = () => {
                                 : 'text-slate-500 group-hover:text-slate-700 dark:text-slate-500 dark:group-hover:text-slate-300',
                         ]"
                     />
-                    <span v-if="!collapsed" class="truncate tracking-tight">{{
+                    <span v-if="!collapsed" class="truncate">{{
                         item.label
                     }}</span>
                     <span

From bb02f345d24b8de1c84c4be69a1e37ffdbbc3214 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 21:37:18 +0600
Subject: [PATCH 05/11] style(icons): bolder and bigger Material Symbols
 Rounded

Filled + wght 400 (was 300), bump sizes: SideRail 19->22, 18->20; BottomNav 22->26; OverflowDrawer 20->22, menu 22->24; app.css import wght 400. More prominent, YT-style weight.
---
 resources/css/app.css                          |  6 +++---
 .../js/components/navigation/BottomNav.vue     |  4 ++--
 .../navigation/BottomNavCustomizer.vue         |  8 ++++----
 .../components/navigation/OverflowDrawer.vue   | 18 +++++++++---------
 .../js/components/navigation/SideRail.vue      | 14 +++++++-------
 resources/js/components/ui/MaterialIcon.vue    |  6 +++---
 6 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 803c4899..3119a090 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300,1,0&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,1,0&display=swap');
 @import 'tailwindcss';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -148,7 +148,7 @@
     color: rgb(134 239 172);
 }
 
-/* Material Symbols Rounded — filled, wght 300, rounded */
+/* Material Symbols Rounded — filled, wght 400 (bolder), rounded */
 .material-symbols-rounded {
     font-family: 'Material Symbols Rounded';
     font-weight: normal;
@@ -165,7 +165,7 @@
     -webkit-font-smoothing: antialiased;
     font-variation-settings:
         'FILL' 1,
-        'wght' 300,
+        'wght' 400,
         'GRAD' 0,
         'opsz' 24;
 }
diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
index 95229030..59863058 100644
--- a/resources/js/components/navigation/BottomNav.vue
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -63,9 +63,9 @@ const resolvedHref = (item: { href: string }) => {
             >
                 <MaterialIcon
                     :name="item.icon"
-                    :size="22"
+                    :size="26"
                     :filled="isActive(item.href, item.match)"
-                    :weight="300"
+                    :weight="400"
                     :class="[
                         'transition-transform duration-150',
                         isActive(item.href, item.match)
diff --git a/resources/js/components/navigation/BottomNavCustomizer.vue b/resources/js/components/navigation/BottomNavCustomizer.vue
index 346e2607..ab761a56 100644
--- a/resources/js/components/navigation/BottomNavCustomizer.vue
+++ b/resources/js/components/navigation/BottomNavCustomizer.vue
@@ -130,7 +130,7 @@ const handleRemove = (href: string) => {
                     />
                     <MaterialIcon
                         :name="homeItem.icon"
-                        :size="20"
+                        :size="22"
                         class="shrink-0 text-slate-700 dark:text-gray-300"
                     />
                     <span
@@ -166,7 +166,7 @@ const handleRemove = (href: string) => {
                     />
                     <MaterialIcon
                         :name="bottomNavItems[idx + 1]?.icon ?? 'help'"
-                        :size="20"
+                        :size="22"
                         class="shrink-0 text-slate-600 dark:text-gray-300"
                     />
                     <span
@@ -195,7 +195,7 @@ const handleRemove = (href: string) => {
                     />
                     <MaterialIcon
                         :name="accountItem.icon"
-                        :size="20"
+                        :size="22"
                         class="shrink-0 text-slate-700 dark:text-gray-300"
                     />
                     <span
@@ -246,7 +246,7 @@ const handleRemove = (href: string) => {
                 >
                     <MaterialIcon
                         :name="item.icon"
-                        :size="20"
+                        :size="22"
                         class="shrink-0 text-slate-500"
                     />
                     <span class="flex-1 text-slate-700 dark:text-gray-300">{{
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
index fadd2f4e..85a2df00 100644
--- a/resources/js/components/navigation/OverflowDrawer.vue
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -78,7 +78,7 @@ watch(
                 class="flex h-9 w-9 items-center justify-center rounded-full text-slate-700 transition-colors hover:bg-slate-100 active:bg-slate-200 dark:text-slate-300 dark:hover:bg-slate-800"
                 aria-label="Open navigation menu"
             >
-                <MaterialIcon name="menu" :size="22" />
+                <MaterialIcon name="menu" :size="24" />
             </button>
             <div class="ml-1">
                 <AppLogo />
@@ -101,7 +101,7 @@ watch(
                     class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 active:scale-95 dark:text-slate-300 dark:hover:bg-slate-800"
                     aria-label="Search"
                 >
-                    <MaterialIcon name="search" :size="20" />
+                    <MaterialIcon name="search" :size="22" />
                 </button>
                 <NotificationDropdown v-if="user" />
             </div>
@@ -141,7 +141,7 @@ watch(
                                 class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-gray-800"
                                 aria-label="Close menu"
                             >
-                                <MaterialIcon name="close" :size="20" />
+                                <MaterialIcon name="close" :size="22" />
                             </button>
                         </div>
 
@@ -181,7 +181,7 @@ watch(
                                 @click="close"
                                 class="mb-4 flex w-full items-center justify-center gap-2 rounded-xl bg-indigo-600 px-4 py-3 text-sm font-bold text-white"
                             >
-                                <MaterialIcon name="login" :size="18" /> Sign in
+                                <MaterialIcon name="login" :size="20" /> Sign in
                             </Link>
 
                             <!-- Overflow items (rest not in bottom nav) -->
@@ -205,7 +205,7 @@ watch(
                                 >
                                     <MaterialIcon
                                         :name="item.icon"
-                                        :size="20"
+                                        :size="22"
                                     />
                                     <span>{{ item.label }}</span>
                                 </Link>
@@ -225,7 +225,7 @@ watch(
                                 @click="handleInstallApp"
                                 class="mt-4 flex w-full items-center gap-3 rounded-xl border border-indigo-200 bg-indigo-50 px-3 py-2.5 text-sm font-semibold text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300"
                             >
-                                <MaterialIcon name="download" :size="20" />
+                                <MaterialIcon name="download" :size="22" />
                                 Install App
                             </button>
 
@@ -243,7 +243,7 @@ watch(
                                     @click="close"
                                     class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
                                 >
-                                    <MaterialIcon name="person" :size="18" />
+                                    <MaterialIcon name="person" :size="20" />
                                     Profile
                                 </Link>
                                 <Link
@@ -252,7 +252,7 @@ watch(
                                     @click="close"
                                     class="flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 dark:text-gray-400 dark:hover:bg-gray-900"
                                 >
-                                    <MaterialIcon name="dashboard" :size="18" />
+                                    <MaterialIcon name="dashboard" :size="20" />
                                     {{ isAdminRoute ? 'Home' : 'Staff Panel' }}
                                 </Link>
                                 <Link
@@ -261,7 +261,7 @@ watch(
                                     as="button"
                                     class="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40"
                                 >
-                                    <MaterialIcon name="logout" :size="18" />
+                                    <MaterialIcon name="logout" :size="20" />
                                     Sign out
                                 </Link>
                             </div>
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 52b56b90..7e2c7680 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -106,7 +106,7 @@ const triggerSearch = () => {
             >
                 <MaterialIcon
                     :name="collapsed ? 'chevron_right' : 'chevron_left'"
-                    :size="18"
+                    :size="20"
                 />
             </button>
         </div>
@@ -137,7 +137,7 @@ const triggerSearch = () => {
                 >
                     <MaterialIcon
                         :name="item.icon"
-                        :size="19"
+                        :size="22"
                         :class="[
                             'shrink-0 transition-colors duration-150',
                             isActive(item.href, item.match)
@@ -167,7 +167,7 @@ const triggerSearch = () => {
                             : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:border-slate-600 dark:hover:bg-slate-700',
                     ]"
                 >
-                    <MaterialIcon name="download" :size="18" />
+                    <MaterialIcon name="download" :size="20" />
                     <span v-if="!collapsed">Install App</span>
                 </button>
             </div>
@@ -188,7 +188,7 @@ const triggerSearch = () => {
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
-                    <MaterialIcon name="search" :size="18" />
+                    <MaterialIcon name="search" :size="20" />
                     <span v-if="!collapsed">Search</span>
                 </button>
 
@@ -210,7 +210,7 @@ const triggerSearch = () => {
                                   ? 'light_mode'
                                   : 'dark_mode'
                         "
-                        :size="18"
+                        :size="20"
                     />
                     <span v-if="!collapsed" class="capitalize">{{
                         theme
@@ -239,7 +239,7 @@ const triggerSearch = () => {
                             collapsed ? 'px-2' : '',
                         ]"
                     >
-                        <MaterialIcon name="login" :size="18" />
+                        <MaterialIcon name="login" :size="20" />
                         <span v-if="!collapsed">Login</span>
                     </Link>
                     <div
@@ -280,7 +280,7 @@ const triggerSearch = () => {
                             class="shrink-0 rounded-lg bg-slate-50 p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 hover:shadow-sm dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
                             :title="isAdminRoute ? 'Home' : 'Staff Panel'"
                         >
-                            <MaterialIcon name="dashboard" :size="18" />
+                            <MaterialIcon name="dashboard" :size="20" />
                         </Link>
                     </div>
                 </div>
diff --git a/resources/js/components/ui/MaterialIcon.vue b/resources/js/components/ui/MaterialIcon.vue
index da081f77..1ca1dd07 100644
--- a/resources/js/components/ui/MaterialIcon.vue
+++ b/resources/js/components/ui/MaterialIcon.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * Material Symbols Rounded — SVG-based via font glyphs
- * Uses Google Material Symbols Rounded font with FILL=1, wght=300, GRAD=0, opsz=24
- * Rendered as <span> with font-variation-settings — vector (SVG) glyphs, filled, weight 300
+ * Uses Google Material Symbols Rounded font with FILL=1, wght=400, GRAD=0, opsz=24
+ * Rendered as <span> with font-variation-settings — vector (SVG) glyphs, filled, weight 400 (bolder)
  * Bridging: allows TypeScript usage in Vue SFCs without importing individual SVG files
  */
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
 
 withDefaults(defineProps<Props>(), {
     filled: true,
-    weight: 300,
+    weight: 400,
     opsz: 24,
     size: 24,
 });

From b83fc508d2acd865ddcffa8cd90babac0d89e803 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Tue, 1 Sep 2026 21:57:18 +0600
Subject: [PATCH 06/11] fix(nav): collapsed logo icon-only, darker translucent
 rail, thicker bottom nav, move search, footer on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SideRail collapsed now uses favicon.svg icon-only (not H), bg white/70 dark slate-900/60 backdrop-blur-xl (darker translucent modern)

- BottomNav thicker: py-2 (was py-1) for more height, as requested for mobile

- Move search bars from navbars/rails: remove Search from SideRail footer and OverflowDrawer top bar (search now via Home page or Cmd+K, not cluttering nav)

- Footer on mobile: always visible (was hidden when bottom nav) with pb for bottom nav safe area — compact minimal footer on non-home, full on home, properly spaced above bottom nav

- Also unify Dark/Install/Login sizes (same py-2.5, border, rounded-xl) as noted
---
 .../js/components/navigation/BottomNav.vue    |  4 +-
 .../components/navigation/OverflowDrawer.vue  | 31 +-----
 .../js/components/navigation/SideRail.vue     | 98 +++++++------------
 resources/js/layouts/AppLayout.vue            | 17 +++-
 4 files changed, 48 insertions(+), 102 deletions(-)

diff --git a/resources/js/components/navigation/BottomNav.vue b/resources/js/components/navigation/BottomNav.vue
index 59863058..7ba94f1c 100644
--- a/resources/js/components/navigation/BottomNav.vue
+++ b/resources/js/components/navigation/BottomNav.vue
@@ -48,14 +48,14 @@ const resolvedHref = (item: { href: string }) => {
         aria-label="Bottom navigation"
     >
         <div
-            class="mx-auto flex max-w-md items-center justify-around px-1 py-1"
+            class="mx-auto flex max-w-md items-center justify-around px-1 py-2"
         >
             <Link
                 v-for="item in bottomNavItems"
                 :key="item.href"
                 :href="resolvedHref(item)"
                 :class="[
-                    'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-1.5 transition-all duration-150 ease-out',
+                    'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-2 transition-all duration-150 ease-out',
                     isActive(item.href, item.match)
                         ? 'text-slate-900 dark:text-white'
                         : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
index 85a2df00..54b9ec80 100644
--- a/resources/js/components/navigation/OverflowDrawer.vue
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { computed, ref, watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
-import AuthModal from '@/components/AuthModal.vue';
 import NotificationDropdown from '@/components/NotificationDropdown.vue';
 import MaterialIcon from '@/components/ui/MaterialIcon.vue';
 import { useBottomNavCustomization } from '@/lib/useBottomNavCustomization';
@@ -33,9 +32,6 @@ const canInstallApp = computed(
 );
 const { availableItems } = useBottomNavCustomization();
 
-const showAuthModal = ref(false);
-const authModalMessage = ref('');
-
 const close = () => {
     emit('update:open', false);
     emit('close');
@@ -84,35 +80,10 @@ watch(
                 <AppLogo />
             </div>
             <div class="ml-auto flex items-center gap-1.5">
-                <button
-                    type="button"
-                    @click="
-                        () => {
-                            if (!user) {
-                                authModalMessage = 'Please login to search';
-                                showAuthModal = true;
-                                return;
-                            }
-                            window.dispatchEvent(
-                                new CustomEvent('hscstack:trigger-search'),
-                            );
-                        }
-                    "
-                    class="flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 active:scale-95 dark:text-slate-300 dark:hover:bg-slate-800"
-                    aria-label="Search"
-                >
-                    <MaterialIcon name="search" :size="22" />
-                </button>
                 <NotificationDropdown v-if="user" />
             </div>
         </div>
 
-        <AuthModal
-            v-model="showAuthModal"
-            title="Sign in required"
-            :message="authModalMessage"
-        />
-
         <!-- Drawer -->
         <Teleport to="body">
             <div v-if="open" class="fixed inset-0 z-50 flex">
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 7e2c7680..ca65f747 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
-import AuthModal from '@/components/AuthModal.vue';
 import NotificationDropdown from '@/components/NotificationDropdown.vue';
 import MaterialIcon from '@/components/ui/MaterialIcon.vue';
 import { allNavItems } from '@/lib/navigation';
@@ -58,29 +57,13 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
     return currentUrl.value.startsWith(href);
 };
 
-// Search gate
-const showAuthModal = ref(false);
-const authModalMessage = ref('');
-
-const triggerSearch = () => {
-    if (!user.value) {
-        authModalMessage.value =
-            'অনুগ্রহ করে বিষয় ও কনটেন্ট সার্চ করতে প্রথমে লগইন করুন।';
-        showAuthModal.value = true;
-
-        return;
-    }
-
-    window.dispatchEvent(new CustomEvent('hscstack:trigger-search'));
-};
-
 // Persist collapsed is handled by parent
 </script>
 
 <template>
     <aside
         :class="[
-            'flex shrink-0 flex-col bg-white transition-all duration-300 dark:bg-slate-900',
+            'flex shrink-0 flex-col bg-white/70 backdrop-blur-xl transition-all duration-300 dark:bg-slate-900/60 dark:backdrop-blur-xl',
             'sticky top-0 h-screen border-r border-slate-200/60 shadow-[1px_0_3px_rgba(0,0,0,0.02),4px_0_16px_rgba(0,0,0,0.03)] dark:border-slate-800/60 dark:shadow-none',
             collapsed ? 'w-[72px]' : 'w-[280px]',
         ]"
@@ -88,16 +71,22 @@ const triggerSearch = () => {
     >
         <!-- Header: Logo + Collapse toggle -->
         <div
-            class="flex h-16 shrink-0 items-center border-b border-slate-100 bg-white px-3 dark:border-slate-800 dark:bg-slate-900"
+            class="flex h-16 shrink-0 items-center border-b border-slate-200/60 bg-white/70 px-3 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/60 dark:backdrop-blur-xl"
             :class="collapsed ? 'justify-center gap-0' : 'justify-between'"
         >
             <AppLogo v-if="!collapsed" />
-            <div
+            <Link
                 v-else
-                class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-600 to-violet-600 text-white shadow-sm ring-1 ring-indigo-600/20"
+                :href="homeHref"
+                class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm dark:bg-gray-100"
+                aria-label="Home"
             >
-                <span class="text-xs font-black">H</span>
-            </div>
+                <img
+                    src="/favicon.svg"
+                    alt="HSCStack"
+                    class="h-6 w-6 scale-120 object-cover"
+                />
+            </Link>
             <button
                 type="button"
                 @click="emit('toggle')"
@@ -154,51 +143,20 @@ const triggerSearch = () => {
                     />
                 </Link>
             </nav>
-
-            <!-- PWA Install -->
-            <div v-if="canInstallApp" class="mt-6 px-2">
-                <button
-                    type="button"
-                    @click="handleInstallApp"
-                    :class="[
-                        'flex w-full items-center gap-2.5 rounded-xl border px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
-                        collapsed
-                            ? 'justify-center border-slate-900 bg-slate-900 text-white hover:bg-slate-800 hover:shadow-md dark:border-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100'
-                            : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:border-slate-600 dark:hover:bg-slate-700',
-                    ]"
-                >
-                    <MaterialIcon name="download" :size="20" />
-                    <span v-if="!collapsed">Install App</span>
-                </button>
-            </div>
         </div>
 
         <!-- Footer controls -->
         <div
-            class="border-t border-slate-100 bg-slate-50/50 p-2 dark:border-slate-800 dark:bg-slate-900/50"
+            class="border-t border-slate-200/60 bg-white/40 p-2 backdrop-blur-sm dark:border-slate-800/60 dark:bg-slate-900/40 dark:backdrop-blur-sm"
         >
             <div class="space-y-1">
-                <!-- Search -->
-                <button
-                    type="button"
-                    @click="triggerSearch"
-                    :class="[
-                        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors duration-150',
-                        'text-slate-600 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
-                        collapsed ? 'justify-center' : '',
-                    ]"
-                >
-                    <MaterialIcon name="search" :size="20" />
-                    <span v-if="!collapsed">Search</span>
-                </button>
-
                 <!-- Theme -->
                 <button
                     type="button"
                     @click="toggle"
                     :class="[
-                        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors duration-150',
-                        'text-slate-600 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100',
+                        'flex w-full items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-[13px] font-medium transition-all duration-150',
+                        'text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-100',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
@@ -228,13 +186,29 @@ const triggerSearch = () => {
                     <NotificationDropdown />
                 </div>
 
+                <!-- PWA Install — absolute bottom, above login -->
+                <button
+                    v-if="canInstallApp"
+                    type="button"
+                    @click="handleInstallApp"
+                    :class="[
+                        'flex w-full items-center gap-2.5 rounded-xl border px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
+                        collapsed
+                            ? 'justify-center border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900'
+                            : 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:shadow-sm dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/20',
+                    ]"
+                >
+                    <MaterialIcon name="download" :size="20" />
+                    <span v-if="!collapsed">Install App</span>
+                </button>
+
                 <!-- Auth -->
                 <div :class="collapsed ? 'px-0' : 'px-2 pt-1'">
                     <Link
                         v-if="!user"
                         href="/login"
                         :class="[
-                            'flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
+                            'flex items-center justify-center gap-2 rounded-xl border border-transparent px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
                             'bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-md dark:bg-indigo-500 dark:hover:bg-indigo-400',
                             collapsed ? 'px-2' : '',
                         ]"
@@ -286,11 +260,5 @@ const triggerSearch = () => {
                 </div>
             </div>
         </div>
-
-        <AuthModal
-            v-model="showAuthModal"
-            title="Sign in required"
-            :message="authModalMessage"
-        />
     </aside>
 </template>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index fc5fdedb..ee2d7e7c 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -87,16 +87,23 @@ const drawerOpen = ref(false);
                 <main
                     :class="[
                         'flex-1',
-                        showBottomNav ? 'pb-16' : 'min-h-[calc(100vh-4rem)]',
+                        showBottomNav ? 'pb-4' : 'min-h-[calc(100vh-4rem)]',
                     ]"
                 >
                     <slot />
                 </main>
 
-                <!-- Footer: hidden on mobile (frees space, bottom nav occupies) -->
-                <Footer
-                    v-if="$page.component !== 'Chat/Index' && !showBottomNav"
-                />
+                <!-- Footer: always visible (was hidden on mobile) — on mobile it's a compact version above bottom nav -->
+                <div
+                    v-if="$page.component !== 'Chat/Index'"
+                    :class="
+                        showBottomNav
+                            ? 'pb-[calc(4.5rem+env(safe-area-inset-bottom))]'
+                            : ''
+                    "
+                >
+                    <Footer />
+                </div>
             </div>
         </div>
 

From 49ae53645b85e5d67dba1030662fc34a202c9227 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Wed, 2 Sep 2026 00:29:01 +0600
Subject: [PATCH 07/11] fix(nav): remove NAVIGATION label from siderail

---
 resources/js/components/navigation/SideRail.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index ca65f747..93b983a8 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -102,13 +102,6 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
 
         <!-- Scrollable nav -->
         <div class="flex flex-1 flex-col overflow-y-auto py-3.5">
-            <div v-if="!collapsed" class="px-4 pb-2.5">
-                <p
-                    class="text-[10px] font-bold tracking-[0.12em] text-slate-400 uppercase dark:text-slate-500"
-                >
-                    Navigation
-                </p>
-            </div>
             <!-- Primary + Overflow combined for desktop rail -->
             <nav class="space-y-0.5 px-2.5">
                 <Link

From 4b6d797cd0f1b6dbe4c4ae77df90b66adf54fe06 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Wed, 2 Sep 2026 00:38:58 +0600
Subject: [PATCH 08/11] fix(nav): shared bottom-nav state and collapsed rail
 header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useBottomNavCustomization: move middleHrefs to module-level singleton (sharedMiddleHrefs) with single ensurePersistWatcher — fixes per-consumer ref/watcher duplication (was creating new ref+watcher per call around lines 71-73). Preserve loadStored() init and consumer behavior.

SideRail: fix collapsed 72px header overflow — stack logo + toggle vertically (flex-col gap-3 py-3) instead of side-by-side justify-center, so logo icon-only and chevron fit without overlap (fixes screenshot arrow).
---
 .../js/components/navigation/SideRail.vue     | 14 +++++++----
 resources/js/lib/useBottomNavCustomization.ts | 23 ++++++++++++++-----
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 93b983a8..8e700400 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -69,16 +69,20 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
         ]"
         aria-label="Side navigation"
     >
-        <!-- Header: Logo + Collapse toggle -->
+        <!-- Header: Logo + Collapse toggle — collapsed stacks vertically to fit 72px rail -->
         <div
-            class="flex h-16 shrink-0 items-center border-b border-slate-200/60 bg-white/70 px-3 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/60 dark:backdrop-blur-xl"
-            :class="collapsed ? 'justify-center gap-0' : 'justify-between'"
+            :class="[
+                'flex shrink-0 items-center border-b border-slate-200/60 bg-white/70 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-900/60 dark:backdrop-blur-xl',
+                collapsed
+                    ? 'h-auto flex-col justify-center gap-3 px-2 py-3'
+                    : 'h-16 flex-row justify-between px-3',
+            ]"
         >
             <AppLogo v-if="!collapsed" />
             <Link
                 v-else
                 :href="homeHref"
-                class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm dark:bg-gray-100"
+                class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg bg-slate-900 shadow-sm ring-1 ring-slate-900/10 dark:bg-gray-100"
                 aria-label="Home"
             >
                 <img
@@ -95,7 +99,7 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
             >
                 <MaterialIcon
                     :name="collapsed ? 'chevron_right' : 'chevron_left'"
-                    :size="20"
+                    :size="18"
                 />
             </button>
         </div>
diff --git a/resources/js/lib/useBottomNavCustomization.ts b/resources/js/lib/useBottomNavCustomization.ts
index 5ec712fb..a355ba16 100644
--- a/resources/js/lib/useBottomNavCustomization.ts
+++ b/resources/js/lib/useBottomNavCustomization.ts
@@ -62,18 +62,29 @@ function persist(hrefs: string[]) {
     } catch {}
 }
 
+// Client-side module-level singleton — shared across all consumers
+const sharedMiddleHrefs = ref<string[]>(
+    loadStored() ?? [...DEFAULT_MIDDLE_HREFS],
+);
+let hasPersistWatcher = false;
+
+function ensurePersistWatcher() {
+    if (hasPersistWatcher || typeof window === 'undefined') {
+        return;
+    }
+
+    hasPersistWatcher = true;
+    watch(sharedMiddleHrefs, (v) => persist(v), { deep: true });
+}
+
 export function useBottomNavCustomization() {
     const page = usePage();
     const user = computed(
         () => page.props.auth?.user as App.Data.UserData | undefined,
     );
 
-    const middleHrefs = ref<string[]>(
-        loadStored() ?? [...DEFAULT_MIDDLE_HREFS],
-    );
-
-    // Persist on change
-    watch(middleHrefs, (v) => persist(v), { deep: true });
+    ensurePersistWatcher();
+    const middleHrefs = sharedMiddleHrefs;
 
     const homeItem = computed<NavItem>(
         () => allNavItems.find((i) => i.href === HOME_HREF)!,

From 603dbd3d3469b1097c9704774517de0ac2ed0f41 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Wed, 2 Sep 2026 20:27:46 +0600
Subject: [PATCH 09/11] fix(nav): make Install App and Login exactly same size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both now h-11 w-full gap-2.5 rounded-xl border px-3 text-[13px] font-bold — Theme also unified to same h-11/px-3/border to fix height mismatch seen in screenshot.
---
 .../js/components/navigation/SideRail.vue      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 8e700400..863a8f81 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -146,14 +146,14 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
         <div
             class="border-t border-slate-200/60 bg-white/40 p-2 backdrop-blur-sm dark:border-slate-800/60 dark:bg-slate-900/40 dark:backdrop-blur-sm"
         >
-            <div class="space-y-1">
+            <div class="space-y-1.5">
                 <!-- Theme -->
                 <button
                     type="button"
                     @click="toggle"
                     :class="[
-                        'flex w-full items-center gap-2.5 rounded-xl border border-transparent px-3 py-2.5 text-[13px] font-medium transition-all duration-150',
-                        'text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-100',
+                        'flex h-11 w-full items-center gap-2.5 rounded-xl border px-3 text-[13px] font-semibold transition-all duration-150',
+                        'border-transparent text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-100',
                         collapsed ? 'justify-center' : '',
                     ]"
                 >
@@ -183,15 +183,15 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                     <NotificationDropdown />
                 </div>
 
-                <!-- PWA Install — absolute bottom, above login -->
+                <!-- PWA Install — absolute bottom, above login — same size as Login -->
                 <button
                     v-if="canInstallApp"
                     type="button"
                     @click="handleInstallApp"
                     :class="[
-                        'flex w-full items-center gap-2.5 rounded-xl border px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
+                        'flex h-11 w-full items-center justify-center gap-2.5 rounded-xl border px-3 text-[13px] font-bold shadow-sm transition-all duration-150',
                         collapsed
-                            ? 'justify-center border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900'
+                            ? 'border-slate-900 bg-slate-900 text-white hover:bg-slate-800 dark:border-white dark:bg-white dark:text-slate-900'
                             : 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:shadow-sm dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300 dark:hover:bg-indigo-500/20',
                     ]"
                 >
@@ -205,9 +205,9 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                         v-if="!user"
                         href="/login"
                         :class="[
-                            'flex items-center justify-center gap-2 rounded-xl border border-transparent px-3 py-2.5 text-[13px] font-bold shadow-sm transition-all duration-150',
-                            'bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-md dark:bg-indigo-500 dark:hover:bg-indigo-400',
-                            collapsed ? 'px-2' : '',
+                            'flex h-11 w-full items-center justify-center gap-2.5 rounded-xl border px-3 text-[13px] font-bold shadow-sm transition-all duration-150',
+                            'border-transparent bg-indigo-600 text-white hover:bg-indigo-700 hover:shadow-md dark:bg-indigo-500 dark:hover:bg-indigo-400',
+                            collapsed ? '' : '',
                         ]"
                     >
                         <MaterialIcon name="login" :size="20" />

From b1ed38752c673e533ae80f6bd044df47861e7e40 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Wed, 2 Sep 2026 20:43:19 +0600
Subject: [PATCH 10/11] fix(nav): overflow lock restore and collapsed a11y
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OverflowDrawer: capture previous document.body.style.overflow, restore on close and onBeforeUnmount (fixes leftover hidden when unmounted while open).

SideRail: add stable aria-label/title to Theme (Theme: \) and Install App when collapsed (icon-only), keep visible text when expanded. Search button already removed per earlier move-search request — skip.

SideRail account nav already includes /profile link in both states and renders /admin icon-only when collapsed (fixed in b4cbd21) — verified, no change needed.
---
 .../components/navigation/OverflowDrawer.vue  | 25 +++++++++++--
 .../js/components/navigation/SideRail.vue     | 36 +++++++++++++++----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/navigation/OverflowDrawer.vue b/resources/js/components/navigation/OverflowDrawer.vue
index 54b9ec80..a856c8e0 100644
--- a/resources/js/components/navigation/OverflowDrawer.vue
+++ b/resources/js/components/navigation/OverflowDrawer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { computed, watch } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 
 import AppLogo from '@/components/AppLogo.vue';
 import NotificationDropdown from '@/components/NotificationDropdown.vue';
@@ -50,6 +50,8 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
     return currentUrl.value.startsWith(href);
 };
 
+let previousOverflow: string | null = null;
+
 watch(
     () => props.open,
     (v) => {
@@ -57,9 +59,28 @@ watch(
             return;
         }
 
-        document.body.style.overflow = v ? 'hidden' : '';
+        if (v) {
+            previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = previousOverflow ?? '';
+            previousOverflow = null;
+        }
     },
 );
+
+onBeforeUnmount(() => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    if (previousOverflow !== null) {
+        document.body.style.overflow = previousOverflow;
+        previousOverflow = null;
+    } else if (props.open) {
+        document.body.style.overflow = '';
+    }
+});
 </script>
 
 <template>
diff --git a/resources/js/components/navigation/SideRail.vue b/resources/js/components/navigation/SideRail.vue
index 863a8f81..bf65a91b 100644
--- a/resources/js/components/navigation/SideRail.vue
+++ b/resources/js/components/navigation/SideRail.vue
@@ -151,6 +151,8 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                 <button
                     type="button"
                     @click="toggle"
+                    :aria-label="collapsed ? `Theme: ${theme}` : undefined"
+                    :title="collapsed ? `Theme: ${theme}` : undefined"
                     :class="[
                         'flex h-11 w-full items-center gap-2.5 rounded-xl border px-3 text-[13px] font-semibold transition-all duration-150',
                         'border-transparent text-slate-600 hover:border-slate-200 hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-100',
@@ -187,6 +189,8 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                 <button
                     v-if="canInstallApp"
                     type="button"
+                    aria-label="Install App"
+                    :title="collapsed ? 'Install App' : undefined"
                     @click="handleInstallApp"
                     :class="[
                         'flex h-11 w-full items-center justify-center gap-2.5 rounded-xl border px-3 text-[13px] font-bold shadow-sm transition-all duration-150',
@@ -217,10 +221,24 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                         v-else
                         :class="[
                             'flex items-center gap-3 rounded-xl border bg-white px-3 py-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-800',
-                            collapsed ? 'justify-center' : 'justify-between',
+                            collapsed
+                                ? 'flex-col justify-center gap-2 py-3'
+                                : 'justify-between',
                         ]"
                     >
-                        <div class="flex min-w-0 items-center gap-2.5">
+                        <Link
+                            :href="
+                                user.username
+                                    ? `/u/${user.username}`
+                                    : '/profile'
+                            "
+                            :class="[
+                                'flex items-center gap-2.5',
+                                collapsed ? 'justify-center' : 'min-w-0',
+                            ]"
+                            :title="collapsed ? 'Profile' : undefined"
+                            :aria-label="collapsed ? 'Profile' : undefined"
+                        >
                             <img
                                 v-if="user.image_url"
                                 :src="user.image_url"
@@ -232,7 +250,7 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                                 class="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-600 to-violet-600 text-xs font-bold text-white ring-1 ring-indigo-600/20"
                                 >{{ user.name.charAt(0).toUpperCase() }}</span
                             >
-                            <div v-if="!collapsed" class="min-w-0">
+                            <div v-if="!collapsed" class="min-w-0 text-left">
                                 <p
                                     class="truncate text-xs font-semibold text-slate-900 dark:text-slate-100"
                                 >
@@ -244,12 +262,18 @@ const isActive = (href: string, match?: (url: string) => boolean) => {
                                     {{ user.email }}
                                 </p>
                             </div>
-                        </div>
+                        </Link>
                         <Link
-                            v-if="!collapsed && canAccessAdmin"
+                            v-if="canAccessAdmin"
                             :href="isAdminRoute ? '/' : '/admin'"
-                            class="shrink-0 rounded-lg bg-slate-50 p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 hover:shadow-sm dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100"
+                            :class="[
+                                'shrink-0 rounded-lg p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-100',
+                                collapsed
+                                    ? 'bg-slate-50 dark:bg-slate-900'
+                                    : 'bg-slate-50 dark:bg-slate-900',
+                            ]"
                             :title="isAdminRoute ? 'Home' : 'Staff Panel'"
+                            :aria-label="isAdminRoute ? 'Home' : 'Staff Panel'"
                         >
                             <MaterialIcon name="dashboard" :size="20" />
                         </Link>

From 03dd59c975afd7824bd3b85aed18ac2e602ff192 Mon Sep 17 00:00:00 2001
From: Tahsin Shahriar <tahsin.shahriar.official@gmail.com>
Date: Wed, 2 Sep 2026 21:01:04 +0600
Subject: [PATCH 11/11] fix(lint): reorder BottomNavCustomizer before
 imageCompression in Profile.vue

Fixes CI import/order error (was BottomNavCustomizer after imageCompression, should be before alphabetically). Verified lint:check and format:check pass. SSR crash already fixed in main (app.ts no longer has top-level localStorage), vendor Socialite now resolved via composer.json:16 and successful composer install on CI, path with spaces only floods logs not failing.
---
 resources/js/pages/Profile.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/pages/Profile.vue b/resources/js/pages/Profile.vue
index d3fa2b7b..85f7f181 100644
--- a/resources/js/pages/Profile.vue
+++ b/resources/js/pages/Profile.vue
@@ -13,9 +13,9 @@ import {
     LifeBuoy,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
-import { compressImage } from '@/lib/imageCompression';
 
 import BottomNavCustomizer from '@/components/navigation/BottomNavCustomizer.vue';
+import { compressImage } from '@/lib/imageCompression';
 
 const props = defineProps({
     user: Object,