Make the global sidebar collapsible (#1343)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
Co-authored-by: José Valim <jose.valim@dashbit.co>

lib/livebook_web/live/explore_live.ex

@@ -30,8 +30,9 @@ defmodule LivebookWeb.ExploreLive do
         current_page={Routes.explore_path(@socket, :page)}
         current_user={@current_user}
       />
-      <div class="grow px-6 py-8 overflow-y-auto">
+      <div class="grow overflow-y-auto">
-        <div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-8">
+        <SidebarHelpers.toggle socket={@socket} />
+        <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
           <div>
             <PageHelpers.title text="Explore" />
             <p class="mt-4 text-gray-700">
@@ -84,7 +85,7 @@ defmodule LivebookWeb.ExploreLive do
   defp notebook_group(assigns) do
     ~H"""
     <div>
-      <div class="p-8 rounded-2xl border border-gray-300 flex space-x-8 items-center">
+      <div class="p-8 rounded-2xl border border-gray-300 flex flex-col sm:flex-row space-y-8 sm:space-y-0 space-x-0 sm:space-x-8 items-center">
         <img src={@group_info.cover_url} width="100" />
         <div>
           <div class="inline-flex px-2 py-0.5 bg-gray-200 rounded-3xl text-gray-700 text-xs font-medium">
@@ -101,7 +102,7 @@ defmodule LivebookWeb.ExploreLive do
       <div class="mt-4">
         <ul>
           <%= for {notebook_info, number} <- Enum.with_index(@group_info.notebook_infos, 1) do %>
-            <li class="py-4 flex items-center space-x-5 border-b border-gray-200 last:border-b-0">
+            <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center sm:space-x-5 border-b border-gray-200 last:border-b-0">
               <div class="text-lg text-gray-400 font-semibold">
                 <%= number |> Integer.to_string() |> String.pad_leading(2, "0") %>
               </div>
@@ -109,7 +110,7 @@ defmodule LivebookWeb.ExploreLive do
                 <%= notebook_info.title %>
               </div>
               <%= live_redirect to: Routes.explore_path(@socket, :notebook, notebook_info.slug),
-                    class: "button-base button-outlined-gray" do %>
+                    class: "button-base button-outlined-gray mt-3 sm:mt-0" do %>
                 <.remix_icon icon="play-circle-line" class="align-middle mr-1" /> Open notebook
               <% end %>
             </li>

lib/livebook_web/live/home_live.ex

@@ -45,13 +45,18 @@ defmodule LivebookWeb.HomeLive do
         current_user={@current_user}
       />
       <div class="grow overflow-y-auto">
+        <SidebarHelpers.toggle socket={@socket}>
+          <a aria-label="new-notebook" class="flex items-center" phx-click="new">
+            <.remix_icon icon="add-line" />
+            <span class="pl-2">New notebook</span>
+          </a>
+        </SidebarHelpers.toggle>
         <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
         <.memory_notification memory={@memory} app_service_url={@app_service_url} />
-        <div class="max-w-screen-lg w-full mx-auto px-8 pt-8 pb-32 space-y-4">
+        <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
-          <div class="flex flex-col space-y-2 items-center pb-4
+          <div class="flex flex-row space-y-0 items-center pb-4 justify-between">
-                      sm:flex-row sm:space-y-0 sm:justify-between">
             <PageHelpers.title text="Home" />
-            <div class="flex space-x-2" role="navigation" aria-label="new notebook">
+            <div class="hidden sm:flex space-x-2" role="navigation" aria-label="new notebook">
               <%= live_patch("Import",
                 to: Routes.home_path(@socket, :import, "url"),
                 class: "button-base button-outlined-gray whitespace-nowrap"

lib/livebook_web/live/settings_live.ex

@@ -30,8 +30,9 @@ defmodule LivebookWeb.SettingsLive do
         current_page={Routes.settings_path(@socket, :page)}
         current_user={@current_user}
       />
-      <div class="grow px-6 py-8 overflow-y-auto">
+      <div class="grow overflow-y-auto">
-        <div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-20">
+        <SidebarHelpers.toggle socket={@socket} />
+        <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
           <!-- System settings section -->
           <div class="flex flex-col space-y-10">
             <div>

lib/livebook_web/live/sidebar_helpers.ex

@@ -7,13 +7,62 @@ defmodule LivebookWeb.SidebarHelpers do
   alias Phoenix.LiveView.JS
   alias LivebookWeb.Router.Helpers, as: Routes
 
+  @doc """
+  Renders the mobile toggle for the sidebar.
+  """
+  def toggle(assigns) do
+    assigns = assign_new(assigns, :inner_block, fn -> [] end)
+
+    ~H"""
+    <div class="flex sm:hidden items-center justify-between sticky sm:pt-1 px-2 top-0 left-0 right-0 z-[500] bg-white border-b border-gray-200">
+      <div class="my-2 text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600 rounded-xl h-10 w-10 flex items-center justify-center">
+        <button
+          aria-label="hide sidebar"
+          data-el-toggle-sidebar
+          phx-click={
+            JS.add_class("hidden sm:flex", to: "[data-el-sidebar]")
+            |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")
+          }
+        >
+          <.remix_icon icon="menu-fold-line" />
+        </button>
+        <button
+          class="hidden"
+          aria-label="show sidebar"
+          data-el-toggle-sidebar
+          phx-click={
+            JS.remove_class("hidden sm:flex", to: "[data-el-sidebar]")
+            |> JS.toggle(to: "[data-el-toggle-sidebar]", display: "flex")
+          }
+        >
+          <.remix_icon icon="menu-unfold-line" />
+        </button>
+      </div>
+      <div
+        class="hidden items-center justify-end p-2 text-gray-400 hover:text-gray-600 focus:text-gray-600"
+        data-el-toggle-sidebar
+      >
+        <% # TODO: Use render_slot(@inner_block) || default() on LiveView 0.18 %>
+        <%= if @inner_block == [] do %>
+          <%= live_redirect to: Routes.home_path(@socket, :page), class: "flex items-center", aria: [label: "go to home"] do %>
+            <.remix_icon icon="home-6-line" />
+            <span class="pl-2">Home</span>
+          <% end %>
+        <% else %>
+          <%= render_slot(@inner_block) %>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
   @doc """
   Renders sidebar container.
   """
   def sidebar(assigns) do
     ~H"""
     <nav
-      class="w-[18.75rem] min-w-[14rem] flex flex-col justify-between py-7 bg-gray-900"
+      class="w-[18.75rem] min-w-[14rem] flex flex-col justify-between py-1 sm:py-7 bg-gray-900"
       aria-label="sidebar"
       data-el-sidebar
     >