takeone-youtube-clone/resources/views/layouts/partials/sidebar.blade.php

<!-- Sidebar -->
<nav class="yt-sidebar" id="sidebar">

    <!-- Primary section -->
    <div class="yt-sidebar-section">
        <a href="{{ route('home') }}" class="yt-sidebar-link {{ request()->is('/') || request()->is('videos') ? 'active' : '' }}">
            <i class="bi bi-house-door-fill"></i>
            <span>Home</span>
        </a>
        <a href="{{ route('videos.shorts') }}" class="yt-sidebar-link {{ request()->is('shorts') ? 'active' : '' }}">
            <i class="bi bi-play-btn-fill"></i>
            <span>Shorts</span>
        </a>
        <a href="{{ route('videos.trending') }}" class="yt-sidebar-link {{ request()->is('trending') ? 'active' : '' }}">
            <i class="bi bi-fire"></i>
            <span>Trending</span>
        </a>
        @auth
        <a href="#" class="yt-sidebar-link">
            <i class="bi bi-collection-play-fill"></i>
            <span>Subscriptions</span>
        </a>
        @endauth
    </div>

    <!-- You section (auth only) -->
    @auth
    @php $channelBase = route('channel', Auth::user()->channel); @endphp
    <div class="yt-sidebar-section">
        <div class="yt-sidebar-section-header">You</div>
        <a href="{{ $channelBase }}#wall"
           class="yt-sidebar-link" id="sb-tab-wall">
            <i class="bi bi-layout-text-sidebar-reverse"></i>
            <span>My Wall</span>
        </a>
        <a href="{{ $channelBase }}#videos"
           class="yt-sidebar-link" id="sb-tab-videos">
            <i class="bi bi-play-circle-fill"></i>
            <span>My Videos</span>
        </a>
        <a href="{{ $channelBase }}#shorts"
           class="yt-sidebar-link" id="sb-tab-shorts">
            <i class="bi bi-phone-fill"></i>
            <span>My Shorts</span>
        </a>
        <a href="{{ $channelBase }}#playlists"
           class="yt-sidebar-link" id="sb-tab-playlists">
            <i class="bi bi-collection-play-fill"></i>
            <span>My Playlists</span>
        </a>
        <a href="{{ route('history') }}" class="yt-sidebar-link {{ request()->is('history') ? 'active' : '' }}">
            <i class="bi bi-clock-history"></i>
            <span>History</span>
        </a>
        <a href="{{ route('liked') }}" class="yt-sidebar-link {{ request()->is('liked') ? 'active' : '' }}">
            <i class="bi bi-hand-thumbs-up-fill"></i>
            <span>Liked Videos</span>
        </a>
    </div>
    @endauth

    <!-- Explore section -->
    <div class="yt-sidebar-section">
        <div class="yt-sidebar-section-header">Explore</div>
        <a href="{{ route('videos.index', ['filter' => 'music']) }}" class="yt-sidebar-link {{ request()->is('videos') && request('filter') === 'music' ? 'active' : '' }}">
            <i class="bi bi-music-note-beamed"></i>
            <span>Music</span>
        </a>
        <a href="{{ route('videos.index', ['filter' => 'match']) }}" class="yt-sidebar-link {{ request()->is('videos') && request('filter') === 'match' ? 'active' : '' }}">
            <i class="bi bi-trophy-fill"></i>
            <span>Sports</span>
        </a>
    </div>

    <!-- Admin section (super_admin only) -->
    @auth
    @if(Auth::user()->isSuperAdmin())
    <div class="yt-sidebar-section">
        <div class="yt-sidebar-section-header">Admin</div>
        <a href="{{ route('admin.dashboard') }}" class="yt-sidebar-link {{ request()->is('admin*') ? 'active' : '' }}">
            <i class="bi bi-speedometer2"></i>
            <span>Dashboard</span>
        </a>
    </div>
    @endif
    @endauth

</nav>

@auth
<script>
(function () {
    var channelPath = @json(parse_url(route('channel', Auth::user()->channel), PHP_URL_PATH));
    var onChannel   = location.pathname === channelPath;
    if (!onChannel) return;

    var hash = location.hash.replace('#', '') || 'wall';
    var el = document.getElementById('sb-tab-' + hash);
    if (el) el.classList.add('active');

    window.addEventListener('hashchange', function () {
        document.querySelectorAll('#sb-tab-wall,#sb-tab-videos,#sb-tab-shorts,#sb-tab-playlists')
            .forEach(function (a) { a.classList.remove('active'); });
        var h = location.hash.replace('#', '') || 'wall';
        var t = document.getElementById('sb-tab-' + h);
        if (t) t.classList.add('active');
    });
}());
</script>
@endauth