components/sidebar.html

<div class="sidebar w-64 flex-shrink-0 h-full overflow-y-auto">
    <div class="p-6">
        <div class="flex items-center">
            <i data-feather="music" class="text-green-500 h-8 w-8 mr-2"></i>
            <span class="text-xl font-bold">Groovy Tunes</span>
        </div>
    </div>
    <nav class="mt-8 px-4">
        <a href="index.html" class="flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg mb-1">
            <i data-feather="home" class="h-5 w-5 mr-3"></i>
            Home
        </a>
        <a href="dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg mb-1 ${pageName === 'dashboard' ? 'active-nav-item relative' : ''}">
            <i data-feather="upload" class="h-5 w-5 mr-3"></i>
            Upload Music
        </a>
        <a href="likes.html" class="flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg mb-1 ${pageName === 'likes' ? 'active-nav-item relative' : ''}">
            <i data-feather="heart" class="h-5 w-5 mr-3"></i>
            My Likes
        </a>
        <a href="playlists.html" class="flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg mb-1 ${pageName === 'playlists' ? 'active-nav-item relative' : ''}">
            <i data-feather="list" class="h-5 w-5 mr-3"></i>
            Playlists
        </a>
        <a href="settings.html" class="flex items-center px-4 py-3 text-gray-300 hover:text-white rounded-lg ${pageName === 'settings' ? 'active-nav-item relative' : ''}">
            <i data-feather="settings" class="h-5 w-5 mr-3"></i>
            Settings
        </a>
    </nav>
</div>