livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-01-07 23:47:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve sidebar behaviour on mobile (#1434)

Browse source 
Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
This commit is contained in:
Paulo Valim 2022-09-26 10:00:00 +02:00 committed by GitHub
parent 76d2127170
commit 3626dca875
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 91 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
lib/livebook_web/live/layout_helpers.ex
View file

@ -15,6 +15,7 @@ defmodule LivebookWeb.LayoutHelpers do
~H"""
<div class="flex grow h-full">
<div class="absolute sm:static h-full z-[600]">
<.live_region role="alert" />
<.sidebar
socket={@socket}
@ -22,11 +23,12 @@ defmodule LivebookWeb.LayoutHelpers do
current_user={@current_user}
saved_hubs={@saved_hubs}
/>
</div>
<div class="grow overflow-y-auto">
<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">
<.topbar_sidebar_toggle />
<div
class="hidden items-center justify-end p-2 text-gray-400 hover:text-gray-600 focus:text-gray-600"
class="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(@topbar_action) || default() on LiveView 0.18 %>
@ -52,6 +54,7 @@ defmodule LivebookWeb.LayoutHelpers do
~H"""
<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
class="hidden ml-[28rem]"
aria-label="hide sidebar"
data-el-toggle-sidebar
phx-click={
@ -62,7 +65,6 @@ defmodule LivebookWeb.LayoutHelpers do
<.remix_icon icon="menu-fold-line" />
</button>
<button
class="hidden"
aria-label="show sidebar"
data-el-toggle-sidebar
phx-click={
@ -79,10 +81,11 @@ defmodule LivebookWeb.LayoutHelpers do
defp sidebar(assigns) do
~H"""
<nav
class="w-[18.75rem] min-w-[14rem] flex flex-col justify-between py-1 sm:py-7 bg-gray-900"
class="hidden min-w-[14rem] h-full z-[500] sm:relative py-1 sm:py-7 bg-gray-900"
aria-label="sidebar"
data-el-sidebar
>
<div class="flex flex-col justify-between h-full">
<div class="flex flex-col">
<div class="space-y-3">
<div class="group flex items-center mb-5">
@ -138,7 +141,10 @@ defmodule LivebookWeb.LayoutHelpers do
)
}
>
<.remix_icon icon="shut-down-line" class="text-lg leading-6 w-[56px] flex justify-center" />
<.remix_icon
icon="shut-down-line"
class="text-lg leading-6 w-[56px] flex justify-center"
/>
<span class="text-sm font-medium">
Shut Down
</span>
@ -161,6 +167,7 @@ defmodule LivebookWeb.LayoutHelpers do
</span>
</button>
</div>
</div>
</nav>
"""
end