jlecour/EvoBal
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Affichage/masquage du menu mobile

Browse source
This commit is contained in:
Jérémy Lecour 2021-03-07 21:53:37 +01:00 committed by Jérémy Lecour
parent 1dd4356bc7
commit ff29cb331a
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/javascript/controllers/mobile_nav_controller.js Normal file
View file

@ -0,0 +1,12 @@
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "mobileMenu" ]
show() {
this.mobileMenuTarget.classList.remove("hidden");
}
hide() {
this.mobileMenuTarget.classList.add("hidden");
}
}

11
app/views/layouts/application.html.erb
View file

@ -13,9 +13,9 @@
</head>
<body>
<div class="h-screen flex overflow-hidden bg-gray-100">
<div class="h-screen flex overflow-hidden bg-gray-100" data-controller="mobile-nav">
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
<div class="md:hidden">
<div class="hidden" id="mobile-menu" data-mobile-nav-target="mobileMenu">
<div class="fixed inset-0 flex z-40">
<!--
Off-canvas menu overlay, show/hide based on off-canvas menu state.
@ -43,6 +43,7 @@
<div class="relative flex-1 flex flex-col max-w-xs w-full bg-gray-800">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<button
data-action="mobile-nav#hide" data-mobile-nav-target="closeButton" aria-controls="mobile-menu"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span class="sr-only">Close sidebar</span>
<%= heroicon "x", variant: :outline, options: { class: "h-6 w-6 text-white" } %>
@ -83,7 +84,7 @@
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="hidden lg:flex lg:flex-shrink-0">
<div class="flex flex-col w-64">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1 bg-gray-800">
@ -118,8 +119,9 @@
</div>
</div>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<div class="lg:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button
data-action="mobile-nav#show" data-mobile-nav-target="openButton"
class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Open sidebar</span>
<%= heroicon "menu", variant: :outline, options: { class: "h-6 w-6" } %>
@ -136,7 +138,6 @@
</div>
</div>
</body>
</html>