Use tailwind peer instead of javascript
All checks were successful
Ruby CI / test (pull_request) Successful in 23s
All checks were successful
Ruby CI / test (pull_request) Successful in 23s
This commit is contained in:
parent
59b41eaa70
commit
58e21336cd
4 changed files with 19 additions and 79 deletions
|
@ -12,7 +12,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="w-full py-4 px-4 md:px-6 bg-gray-900" data-controller="navigation">
|
||||
<nav class="w-full py-4 px-4 md:px-6 bg-gray-900">
|
||||
<input type="checkbox" id="mobile-menu" class="peer hidden" />
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<%= link_to root_path, class: "mr-4 md:mr-8" do %>
|
||||
|
@ -38,15 +39,13 @@
|
|||
|
||||
<div class="flex items-center space-x-4 flex-shrink-0">
|
||||
<!-- Hamburger menu button -->
|
||||
<button
|
||||
class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2"
|
||||
data-navigation-target="hamburger"
|
||||
data-action="click->navigation#toggle"
|
||||
<label for="mobile-menu"
|
||||
class="lg:hidden text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300 rounded-lg p-2 cursor-pointer"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<% if Current.user.registered? %>
|
||||
<%= render 'shared/user_dropdown' %>
|
||||
|
@ -55,7 +54,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<div class="lg:hidden mt-4 hidden" data-navigation-target="menu">
|
||||
<div class="lg:hidden mt-4 hidden peer-checked:block">
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<ul class="space-y-2">
|
||||
<% if Current.user.registered? %>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue