postland/lib/postland_web/components/layouts/app.html.heex

<main class="flex items-start px-4 py-20 sm:px-6 lg:px-8">
  <div :if={@current_user} class="flex-1 bg-white rounded-lg py-2 px-3 shadow">
    <nav class="flex flex-col" aria-label="Sidebar">
      <ul role="list" class="-mx-2 space-y-1">
        <li>
          <div class="group flex gap-x-3 rounded-lg p-2 pl-3 text-sm/6  uppercase font-bold">
            Postland
          </div>
        </li>
        <.nav_link href={~p"/"} active={@socket.view == PostlandWeb.TimelineLive}>
          Timeline
        </.nav_link>
        <.nav_link href={~p"/about"} active={@socket.view == PostlandWeb.ProfileLive}>
          Profile
        </.nav_link>
        <.nav_link href={~p"/following"} active={@socket.view == PostlandWeb.FollowingLive}>
          Following
        </.nav_link>
        <.nav_link href={~p"/followers"} active={@socket.view == PostlandWeb.FollowersLive}>
          Followers
        </.nav_link>
        <.nav_link
          href={~p"/users/settings"}
          active={@socket.view == PostlandWeb.UserSettingsLive}
        >
          Settings
        </.nav_link>
        <li>
          <.link
            href={~p"/users/log_out"}
            method="delete"
            class="group flex gap-x-3 rounded-lg p-2 pl-3 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50 hover:text-violet-600"
          >
            Log Out
          </.link>
        </li>
      </ul>
    </nav>
  </div>
  <div class="flex-[5]">
    <div class="mx-auto max-w-2xl">
      <.flash_group flash={@flash} />
      <%= @inner_content %>
    </div>
  </div>
</main>