From e0e6c803a9236d0828f4e8b7e40ed3797c914d36 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Tue, 3 Mar 2026 19:19:40 +0300
Subject: [PATCH] Add YouTube-style mobile bottom navigation bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixed bottom nav with 5 buttons: Home, Trending, Videos, History, Profile
- Shows only on mobile (≤768px)
- Fixed to bottom with proper padding for main content
- Uses Bootstrap Icons for navigation icons
---
 resources/views/layouts/app.blade.php | 86 +++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index d53642f..efa4e4f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -488,6 +488,30 @@
     </div>
     @endauth
 
+    <!-- YouTube-style Bottom Navigation Bar (Mobile) -->
+    <nav class="yt-bottom-nav">
+        <a href="{{ route('videos.index') }}" class="yt-bottom-nav-item {{ request()->routeIs('videos.index') ? 'active' : '' }}">
+            <i class="bi bi-house-door-fill"></i>
+            <span>Home</span>
+        </a>
+        <a href="{{ route('videos.search') }}" class="yt-bottom-nav-item {{ request()->routeIs('videos.search') ? 'active' : '' }}">
+            <i class="bi bi-fire"></i>
+            <span>Trending</span>
+        </a>
+        <a href="{{ route('videos.index') }}" class="yt-bottom-nav-item {{ request()->routeIs('videos.index') ? 'active' : '' }}">
+            <i class="bi bi-play-circle-fill"></i>
+            <span>Videos</span>
+        </a>
+        <a href="{{ route('history') }}" class="yt-bottom-nav-item {{ request()->routeIs('history') ? 'active' : '' }}">
+            <i class="bi bi-collection-play-fill"></i>
+            <span>History</span>
+        </a>
+        <a href="{{ auth()->check() ? route('channels.show', auth()->user()->channel) : route('login') }}" class="yt-bottom-nav-item">
+            <i class="bi bi-person-fill"></i>
+            <span>Profile</span>
+        </a>
+    </nav>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         // Mobile search toggle function
@@ -807,4 +831,66 @@
                 background: var(--border-color);
             }
         }
+
+        /* YouTube-style Bottom Navigation Bar */
+        .yt-bottom-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 56px;
+            background: var(--bg-dark);
+            border-top: 1px solid var(--border-color);
+            z-index: 999;
+            justify-content: space-around;
+            align-items: center;
+            padding: 0 8px;
+        }
+
+        .yt-bottom-nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            height: 100%;
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 12px;
+            gap: 4px;
+            transition: color 0.2s;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            min-width: 56px;
+        }
+
+        .yt-bottom-nav-item:hover {
+            color: var(--text-primary);
+        }
+
+        .yt-bottom-nav-item.active {
+            color: var(--text-primary);
+        }
+
+        .yt-bottom-nav-item i {
+            font-size: 24px;
+        }
+
+        .yt-bottom-nav-item span {
+            font-size: 10px;
+            font-weight: 500;
+        }
+
+        /* Show bottom nav on mobile only */
+        @media (max-width: 768px) {
+            .yt-bottom-nav {
+                display: flex;
+            }
+
+            .yt-main {
+                padding-bottom: 72px !important;
+            }
+        }
     </style>