feat: mobile sidebar

Author: joaodiaslobo

.gitignore

@@ -1,6 +1,7 @@
 .env
 .env.*
 !.env.*.sample
+.envrc
 
 # The directory Mix will write compiled artifacts to.
 /_build/

lib/cesium_link_web/components/core_components.ex

@@ -443,7 +443,7 @@ defmodule CesiumLinkWeb.CoreComponents do
       end
 
     ~H"""
-    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
+    <div class="overflow-x-auto overflow-y-hidden px-4 sm:overflow-visible sm:px-0">
       <table class="w-[40rem] mt-11 sm:w-full">
         <thead class="text-left text-sm leading-6 text-zinc-500">
           <tr>

lib/cesium_link_web/components/layouts/app.html.heex

@@ -1,22 +1,23 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+  <div class="hidden sm:flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+    <!-- Navbar (desktop) -->
     <div class="flex items-center gap-4">
-      <a href="/">
+      <.link navigate="/">
         <img src={~p"/images/cesium-link.svg"} width="150" />
-      </a>
+      </.link>
       <ul class="relative z-10 flex items-center gap-2 sm:gap-8 px-4 sm:px-6 lg:px-8 justify-end">
         <li>
-          <.link href={~p"/admin/links"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+          <.link patch={~p"/admin/links"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
             <.icon name="hero-link" class="w-4 h-4 self-center" /> Links
           </.link>
         </li>
         <li>
-          <.link href={~p"/admin/redirects"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+          <.link patch={~p"/admin/redirects"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
             <.icon name="hero-arrow-uturn-right" class="w-4 h-4 self-center" /> Redirects
           </.link>
         </li>
         <li>
-          <.link href={~p"/admin/qrcode"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+          <.link patch={~p"/admin/qrcode"} class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
             <.icon name="hero-qr-code" class="w-4 h-4 self-center" /> QR Generator
           </.link>
         </li>
@@ -33,8 +34,52 @@
       <% end %>
     </div>
   </div>
+  <!-- Sidebar (mobile) -->
+  <div class="sm:hidden flex flex-row-reverse items-center justify-between border-b border-zinc-100 py-2 text-sm">
+    <button type="button" class="text-zinc-900 hover:text-zinc-700" phx-click={JS.show(to: "#mobile-sidebar-container") |> JS.show(to: "#mobile-sidebar")}>
+      <.icon name="hero-bars-3" class="w-7 h-7" />
+    </button>
+  </div>
 </header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
+<div id="mobile-sidebar-container" class="fixed inset-0 flex z-40 lg:hidden" aria-modal="true" style="display: none;">
+  <div class="fixed inset-0 bg-gray-600 bg-opacity-75" phx-click={JS.hide(to: "#mobile-sidebar-container")}></div>
+
+  <div id="mobile-sidebar" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white min-h-screen h-full">
+    <div class="flex flex-col h-full py-4 overflow-y-auto scrollbar-hide">
+      <.link navigate="/" class="flex-shrink-0 flex items-center pt-4 px-16">
+        <img src={~p"/images/cesium-link.svg"} />
+      </.link>
+      <ul class="flex flex-col gap-4 pl-6 pt-8 h-full">
+        <li>
+          <.link patch={~p"/admin/links"} class="text-md leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+            <.icon name="hero-link" class="w-4 h-4 self-center" /> Links
+          </.link>
+        </li>
+        <li>
+          <.link patch={~p"/admin/redirects"} class="text-md leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+            <.icon name="hero-arrow-uturn-right" class="w-4 h-4 self-center" /> Redirects
+          </.link>
+        </li>
+        <li>
+          <.link patch={~p"/admin/qrcode"} class="text-md leading-6 text-zinc-900 font-semibold hover:text-zinc-700 flex gap-1">
+            <.icon name="hero-qr-code" class="w-4 h-4 self-center" /> QR Generator
+          </.link>
+        </li>
+        <li :if={@current_user} class="mt-auto">
+          <div class="flex gap-x-4 py-4">
+            <p class="text-md leading-6 text-zinc-900">
+              <%= @current_user.email %>
+            </p>
+            <.link href={~p"/users/log_out"} method="delete" class="text-md leading-6 text-zinc-900 font-semibold hover:text-zinc-700">
+              <.icon name="hero-arrow-left-start-on-rectangle" />
+            </.link>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+<main class="px-4 py-4 sm:py-20 sm:px-6 lg:px-8">
   <div class="mx-auto">
     <.flash_group flash={@flash} />
     <%= @inner_content %>

lib/mix/tasks/convert.ex

@@ -1,6 +1,7 @@
 defmodule Mix.Tasks.Convert do
   @moduledoc """
   Task to read data exported (in CSV files, one for each table) from the old cesium.link project and import it to database following the new schemas.
+  Takes in 3 files as arguments in the following order: links, redirects, forms.
   """
   use Mix.Task