feat PCナビ 子階層メニューの表示トリガーを変更

Author: flour621

src/develop/include/calendar/year.html

@@ -28,9 +28,9 @@ <h2 class="text-gray-900 font-bold text-2xl"><!-- BEGIN_IF [%{DATE_YEAR}/nem] --
     <!-- BEGIN month:loop -->
     <div>
       <h3 class="text-gray-900 text-lg font-bold">{month}月</h3>
-      <div class="grid grid-cols-7 mt-4" aria-hidden="true">
+      <div class="grid grid-cols-7 mt-4 text-sm" aria-hidden="true">
         <!-- BEGIN weekLabel:loop -->
-        <div class="text-xs font-medium text-center [&:nth-child(n+6)]:text-red-600">{label}</div>
+        <div class="font-medium text-center [&:nth-child(n+6)]:text-red-600">{label}</div>
         <!-- END weekLabel:loop -->
       </div>
       <div class="mt-4">
@@ -41,12 +41,12 @@ <h3 class="text-gray-900 text-lg font-bold">{month}月</h3>
           <div class="px-0.5 mb-1 py-1.5 [&:nth-child(n+6)]:text-red-600" aria-hidden="true"></div>
           <!-- END spacer -->
           <!-- BEGIN none -->
-          <div class="flex items-center justify-center px-0.5 py-1.5 text-sm text-center [&:nth-child(n+6)]:text-red-600">
+          <div class="flex items-center justify-center px-0.5 py-1.5 text-center [&:nth-child(n+6)]:text-red-600">
             <span class="flex items-center justify-center w-7 h-7">{day}</span>
           </div>
           <!-- END none -->
           <!-- BEGIN link -->
-          <div class="flex items-center justify-center px-0.5 py-1.5 text-sm text-center [&:nth-child(n+6)]:text-red-600">
+          <div class="flex items-center justify-center px-0.5 py-1.5 text-center [&:nth-child(n+6)]:text-red-600">
             <a href="{url}" class="flex items-center justify-center w-7 h-7 rounded-full cursor-pointer bg-gray-100 hover:bg-gray-200" aria-label="{day}日の記事一覧を表示する">
               <span>{day}</span>
             </a>

src/develop/include/parts/navigation-pc.html

@@ -1,14 +1,14 @@
-<ul class="flex flex-wrap items-center list-none leading-6 [&>li>a.stay]:border-b-2 [&>li>a.stay]:border-solid [&>li>a.stay]:border-indigo-600">
+<ul class="flex flex-wrap items-center list-none leading-6 [&_a.stay]:border-b-2 [&_a.stay]:border-solid [&_a.stay]:border-indigo-600">
   <li class="mx-5 font-medium text-center group">
-    <a href="%{HOME_URL}" class="<!-- BEGIN_IF [%{CCD}/neq/contact/_and_/%{ECD}/neq/profile.html] -->stay<!-- END_IF --> flex items-center gap-2 py-4 hover:opacity-70">
+    <a href="%{HOME_URL}" class="js-child-toggle [&.is-active+div]:opacity-100 [&.is-active+div]:pointer-events-auto [&.is-active_span.nav-icon]:-rotate-180 <!-- BEGIN_IF [%{CCD}/neq/contact/_and_/%{ECD}/neq/profile.html] -->stay<!-- END_IF --> flex items-center gap-2 h-14 px-1 hover:opacity-70">
       <span>Blogs</span>
-      <span class="text-gray-400 transition-transform group-hover:-rotate-180">
+      <span class="text-gray-400 transition-transform nav-icon">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
           <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
         </svg>
       </span>
     </a>
-    <div class="opacity-0 absolute top-14 left-0 right-0 py-6 bg-gray-50 transition-opacity pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+    <div class="opacity-0 absolute top-14 left-0 right-0 py-6 bg-gray-50 transition-opacity pointer-events-none">
       <div class="container flex">
         <h2 class="inline-block mr-12 pr-12 py-2 border-r border-gray-200 font-normal">Blogs</h2>
         <ul class="flex gap-x-8 gap-y-3">
@@ -23,12 +23,12 @@ <h2 class="inline-block mr-12 pr-12 py-2 border-r border-gray-200 font-normal">B
     </div>
   </li>
   <li class="mx-5 font-medium text-center">
-    <a href="%{HOME_URL}profile.html" class="js-link_match_location-full block py-4 no-underline hover:opacity-70">
+    <a href="%{HOME_URL}profile.html" class="js-link_match_location-full  flex items-center h-14 px-1 hover:opacity-70">
       <span>Profile</span>
     </a>
   </li>
   <li class="ml-5 font-medium text-center">
-    <a href="%{HOME_URL}contact/" class="js-link_match_location-category block py-4 no-underline hover:opacity-70">
+    <a href="%{HOME_URL}contact/" class="js-link_match_location-category  flex items-center h-14 px-1 hover:opacity-70">
       <span>Contact</span>
     </a>
   </li>

src/develop/src/js/main.js

@@ -162,6 +162,16 @@ async function main() {
    * Content Ready
    */
   domContentLoaded(() => {
+    /* PC nav */
+    const childToggle = document.querySelectorAll('.js-child-toggle');
+    childToggle && childToggle.forEach((toggle) => {
+      toggle.addEventListener('click', (e) => {
+        e.preventDefault();
+        const _self = e.currentTarget;
+        _self.classList.toggle('is-active');
+      });
+    });
+
     /* SP menu */
     const menu = document.querySelector('.js-menu');
     const menuToggle = document.querySelector('.js-menu-toggle');