Animated Sidebar Navigation

<div class="sidebar-navigation-component bg-black rounded-lg">
  <style class="rounded-lg">@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
    
    .sidebar-container {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    .sidebar-link:hover .link-text {
      transform: translateX(4px);
    }
    
    .desktop-sidebar {
      transition: width 0.3s ease;
    }
    
    .desktop-sidebar.collapsed {
      width: 60px;
    }
    
    .desktop-sidebar.expanded {
      width: 300px;
    }
    
    .mobile-overlay {
      transform: translateX(-100%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .mobile-overlay.open {
      transform: translateX(0);
      opacity: 1;
    }
    
    .link-text {
      transition: transform 0.15s ease;
    }
    
    .collapsed .link-text {
      opacity: 0;
      display: none;
    }
    
    .expanded .link-text {
      opacity: 1;
      display: inline-block;
    }</style>
  <div class="sidebar-container h-screen rounded-lg">
    <div class="desktop-sidebar hidden md:flex md:flex-col dark:bg-neutral-800 h-full px-4 py-4 flex-shrink-0 expanded bg-neutral-900 rounded-lg" onmouseenter="expandSidebar()" onmouseleave="collapseSidebar()">
      <div class="space-y-2 rounded-lg">
        <a href="/dashboard" class="sidebar-link flex items-center justify-start gap-2 py-2 dark:text-neutral-200 dark:hover:text-white text-neutral-300 hover:text-neutral-100 rounded-lg">
          <svg class="w-5 h-5 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" class="rounded-lg"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 7 4-4 4 4" class="rounded-lg"></path>
          </svg>
          <span class="link-text whitespace-nowrap rounded-lg">Dashboard</span>
        </a>
        <a href="/projects" class="sidebar-link flex items-center justify-start gap-2 py-2 dark:text-neutral-200 dark:hover:text-white text-neutral-300 hover:text-neutral-100 rounded-lg">
          <svg class="w-5 h-5 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" class="rounded-lg"></path>
          </svg>
          <span class="link-text whitespace-nowrap rounded-lg">Projects</span>
        </a>
        <a href="/settings" class="sidebar-link flex items-center justify-start gap-2 py-2 dark:text-neutral-200 dark:hover:text-white text-neutral-300 hover:text-neutral-100 rounded-lg">
          <svg class="w-5 h-5 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" class="rounded-lg"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" class="rounded-lg"></path>
          </svg>
          <span class="link-text whitespace-nowrap rounded-lg">Settings</span>
        </a>
      </div>
    </div>
    <div class="md:hidden h-16 px-4 py-4 flex items-center justify-between dark:bg-neutral-800 w-full bg-neutral-900 rounded-lg">
      <div class="flex justify-end w-full rounded-lg">
        <button onclick="toggleMobileSidebar()" class="dark:text-neutral-200 cursor-pointer text-neutral-200 rounded-lg">
          <svg class="w-6 h-6 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" class="rounded-lg"></path>
          </svg>
        </button>
      </div>
    </div>
    <div id="mobileOverlay" class="mobile-overlay fixed inset-0 dark:bg-neutral-900 p-10 z-50 md:hidden bg-black rounded-lg">
      <button onclick="closeMobileSidebar()" class="absolute right-10 top-10 dark:text-neutral-200 cursor-pointer text-neutral-200 rounded-lg">
        <svg class="w-6 h-6 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" class="rounded-lg"></path>
        </svg>
      </button>
      <div class="space-y-4 mt-16 rounded-lg">
        <a href="/dashboard" class="flex items-center gap-3 py-3 dark:text-neutral-200 text-neutral-300 rounded-lg" onclick="closeMobileSidebar()">
          <svg class="w-6 h-6 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" class="rounded-lg"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 7 4-4 4 4" class="rounded-lg"></path>
          </svg>
        </a>
        <a href="/projects" class="flex items-center gap-3 py-3 dark:text-neutral-200 text-neutral-300 rounded-lg" onclick="closeMobileSidebar()">
          <svg class="w-6 h-6 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" class="rounded-lg"></path>
          </svg>
        </a>
        <a href="/settings" class="flex items-center gap-3 py-3 dark:text-neutral-200 text-neutral-300 rounded-lg" onclick="closeMobileSidebar()">
          <svg class="w-6 h-6 rounded-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" class="rounded-lg"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" class="rounded-lg"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <script class="rounded-lg">function expandSidebar() {
      const sidebar = document.querySelector('.desktop-sidebar');
      sidebar.classList.remove('collapsed');
      sidebar.classList.add('expanded');
    }
    
    function collapseSidebar() {
      const sidebar = document.querySelector('.desktop-sidebar');
      sidebar.classList.remove('expanded');
      sidebar.classList.add('collapsed');
    }
    
    function toggleMobileSidebar() {
      const overlay = document.getElementById('mobileOverlay');
      overlay.classList.add('open');
    }
    
    function closeMobileSidebar() {
      const overlay = document.getElementById('mobileOverlay');
      overlay.classList.remove('open');
    }</script>
</div>