Merge pull request #169 from kufu/resize-hamberger-menu-link-witdh

ハンバーガーメニューのリンクの横幅を最大にして押しやすくする
kufu · May 7, 2024 · 165f0b1 · 165f0b1
2 parents 8650b66 + 8e9175c
commit 165f0b1
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -34,18 +34,18 @@
           <i class="fa-solid fa-xmark  fa-xl"></i>
         </span>
       <ul data-hamburger-target="sidebar" class="fixed z-10 h-full top-0 right-0 flex flex-col items-center justify-center w-3/4 bg-[var(--mainColor)] translate-x-full transition-all ease-linear">
-        <li>
+        <li class='w-full'>
           <a
             href="<%= event_path %>"
-            class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_path) ? 'nav-current' : '' %>"
+            class="flex items-center justify-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_path) ? 'nav-current' : '' %>"
             <%= sanitize current_path?(event_path) ? 'aria-current="page"' : '' %>
           >
             <%= I18n.t('nav.root') %></a>
         </li>
-        <li>
+        <li class='w-full'>
           <a
             href="<%= event_schedules_path %>"
-            class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_schedules_path) ? 'nav-current' : '' %>"
+            class="flex items-center justify-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_schedules_path) ? 'nav-current' : '' %>"
             <%= sanitize current_path?(event_schedules_path) ? 'aria-current="page"' : '' %>
           >
             <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" color="#706d65" class=""
@@ -58,10 +58,10 @@
             <%= I18n.t('nav.schedule') %></a>
         </li>
         <% unless @plan.new_record? %>
-          <li>
+          <li class='w-full'>
             <a
               href="<%= event_plan_path(@plan, event_name: @plan.event.name) %>"
-              class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_plan_path(@plan, event_name: @plan.event.name)) ? 'nav-current' : '' %>"
+              class="flex items-center justify-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(event_plan_path(@plan, event_name: @plan.event.name)) ? 'nav-current' : '' %>"
               <%= sanitize current_path?(event_plan_path(@plan, event_name: @plan.event.name)) ? 'aria-current="page"' : '' %>
             >
               <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" color="#706d65" class=""
@@ -74,20 +74,20 @@
               <%= I18n.t('nav.plan') %></a>
           </li>
         <% end %>
-        <li>
+        <li class='w-full'>
           <a
             href="<%= profile_path %>"
-            class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(profile_path) ? 'nav-current' : '' %>"
+            class="flex items-center justify-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(profile_path) ? 'nav-current' : '' %>"
             <%= sanitize current_path?(event_path) ? 'aria-current="page"' : '' %>
           >
             <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" width="1em" height="1em" class="" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" style="color: rgb(112, 109, 101);"><path d="M256 288A144 144 0 1 0 256 0a144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3c0 17 13.8 30.7 30.7 30.7H481.3c17 0 30.7-13.8 30.7-30.7C512 392.2 439.8 320 350.7 320H161.3z"></path></svg>
             <%= I18n.t('nav.profile') %></a>
         </li>
         <% if @user&.profile&.belongs_to_any_team? %>
-          <li>
+          <li class='w-full'>
             <a
               href="<%= team_path(@user.profile.current_team) %>"
-              class="flex items-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(team_path(@user.profile.current_team)) ? 'nav-current' : '' %>"
+              class="flex items-center justify-center gap-2 h-max box-border m-0 boder-none bg-transparent px-2 py-3 <%= current_path?(team_path(@user.profile.current_team)) ? 'nav-current' : '' %>"
               <%= sanitize current_path?(event_path) ? 'aria-current="page"' : '' %>
             >
               <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" width="1em" height="1em" class="" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" style="color: rgb(112, 109, 101);"><path d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0H21.3C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3H405.3zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352H378.7C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7H154.7c-14.7 0-26.7-11.9-26.7-26.7z"></path></svg>