ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add YouTube-style mobile bottom navigation bar

Browse Source 
- 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
This commit is contained in:
ghassan 2026-03-03 19:19:40 +03:00
parent 94a73cc74d
commit e0e6c803a9
1 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
resources/views/layouts/app.blade.php
View File

@ -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>