<div class="w-72 border-r-4 border-r-[#2E2A54] text-white h-screen fixed flex flex-col gap-4 justify-start">
  <div class="flex-grow flex flex-col justify-start p-5 mt-6">

    <div class="text-center grid grid-cols-1 gap-2 text-xl font-dystopian">
      <%= link_to "Projects", projects_path, class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
    </div>

  </div>

  <% if current_user %>
    <%= link_to "@#{current_user.username}", user_path(current_user), class: "#{current_page?(user_path(current_user)) || current_page?(edit_user_path(current_user)) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 transition duration-100 block" %>
  <% end %>
</div>