<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">
  <%= link_to root_path do %>
    <%= image_tag "logo.png", class: "w-full mb-8 cursor-pointer" %>
  <% end %>

  
  <% if current_user %>
    <div class="text-center grid grid-cols-1 gap-2 text-xl mb-12">
      <%= link_to "+ Create new post", new_post_path, class: "bg-[#62D5C3] p-2 rounded-4xl transition duration-100 block text-[#252036] font-bold" %>
    </div>
  <% end %>

  <div class="text-center grid grid-cols-1 gap-2 text-xl font-dystopian">
    <%= link_to "Main", posts_path, class: "#{current_page?(posts_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
    <%= link_to "Projects", projects_path, class: "#{current_page?(projects_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
    <%= link_to "Leaderboards", leaderboards_path, class: "#{current_page?(leaderboards_path) ? 'bg-[#564CAD]' : 'hover:bg-[#564CAD]'} bg-[#2E2A54] p-2 rounded transition duration-100 block" %>
    <%= link_to "Info", info_path, class: "#{current_page?(info_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>