fix ドロワーメニュー・目次スムーススクロールの挙動を修正

src/develop/_entry.html

@@ -20,7 +20,12 @@
         <h2 class="text-gray-800 font-bold">目次</h2>
         <svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': showAccordion }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
       </button>
-      <div x-show="showAccordion" x-collapse x-cloak>
+      <div
+        x-show="showAccordion"
+        x-collapse
+        x-cloak
+        @click="handleSmoothScroll($event)"
+      >
         <div class="p-4 pt-0 opacity-70">
           <!-- 参照元：Entry_Body -->
           <!-- GET_Rendered id="entry-outline" -->

src/develop/_layouts/two-column.html

@@ -46,7 +46,7 @@
   @endsection
 
   <div
-    x-data="{ showSideMenu: false }"
+    x-data="sideMenu"
     class="grid grid-cols-1 gap-x-10 gap-y-20 lg:grid-cols-[minmax(0,_1fr)_288px] lg:gap-x-20"
   >
     <main>
@@ -58,13 +58,15 @@
       @endsection
     </main>
 
-    <aside class="lg:block z-20" :class="{'block': showSideMenu, 'hidden': !showSideMenu }">
+    <aside class="lg:block z-20">
       <div class="fixed inset-0 bg-black bg-opacity-30"
-        x-show="showSideMenu"
+        x-show="isShowSideMenu"
         x-transition
-        @click="showSideMenu = false"
+        @click="toggleSideMenu()"
       ></div>
-      <div class="max-lg:fixed top-0 right-0 bottom-0 box-border max-lg:w-72 max-lg:px-4 max-lg:py-6 bg-white transition-transform" :class="{'max-lg:translate-x-0': showSideMenu }">
+      <div class="max-lg:fixed top-0 right-0 bottom-0 box-border max-lg:w-72 max-lg:px-4 max-lg:py-6 bg-white transition-transform" 
+        :class="{'max-lg:translate-x-0': isShowSideMenu, 'max-lg:translate-x-full': !isShowSideMenu }"
+      >
         <div class="max-lg:max-h-full max-lg:overflow-auto">
           @section("aside")
           <section>
@@ -97,14 +99,14 @@ <h2 class="mb-5 text-gray-800 font-bold">プロフィール</h2>
     </aside>
 
     <button aria-label="サイドメニュー表示切替" class="fixed bottom-6 z-20 inline-flex items-center justify-center lg:hidden px-2 py-2 text-sm font-medium tracking-wide transition-colors duration-200 bg-white border border-r- rounded-full text-gray-800 hover:text-neutral-700 border-neutral-200/70 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200/60 focus:shadow-outline"
-      :class="{'right-80': showSideMenu, 'right-0 rounded-r-none': !showSideMenu }"
-      @click="showSideMenu = !showSideMenu">
-      <template x-if="!showSideMenu">
+      :class="{'right-80': isShowSideMenu, 'right-0 rounded-r-none': !isShowSideMenu }"
+      @click="toggleSideMenu()">
+      <template x-if="!isShowSideMenu">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clip-rule="evenodd" />
         </svg>
       </template>
-      <template x-if="showSideMenu">
+      <template x-if="isShowSideMenu">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clip-rule="evenodd" />
         </svg>

src/develop/include/entry/body.html

@@ -46,7 +46,7 @@ <h4 class="mb-1 font-medium leading-none tracking-tight">この記事は公開
         data-listType="ol"
         data-listClassName="custom-outline"
         data-itemClassName="mt-2 custom-outline-item"
-        data-linkClassName="scrollTo hover:opacity-70"
+        data-linkClassName="js-scroll hover:opacity-70"
         data-anchorName="heading-$1"
         data-levelLimit="2"
         data-exceptClass="js-except">

src/develop/package.json

@@ -45,6 +45,7 @@
     "vite-plugin-stylelint": "^5.3.1"
   },
   "dependencies": {
+    "@alpinejs/collapse": "^3.14.1",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",

src/develop/src/js/alpinejs/sideMenu.component.js

@@ -0,0 +1,32 @@
+import Alpine from 'alpinejs';
+
+const name = 'sideMenu';
+
+// サイドメニューの目次をクリックした際に要素をスクロールさせる
+function component() {
+  return {
+    isShowSideMenu: false,
+    toggleSideMenu() {
+      this.isShowSideMenu = !this.isShowSideMenu;
+    },
+    handleSmoothScroll(event) {
+      const eventTarget = event.target;
+
+      if (eventTarget.classList.contains('js-scroll')) {
+        event.preventDefault();
+
+        const target = eventTarget.getAttribute('href');
+        const targetElement = document.querySelector(target);
+        const offset = window.matchMedia('(min-width: 1024px)').matches ? 0 : 80;
+
+        window.scrollTo({
+          top: targetElement.offsetTop - offset,
+          behavior: 'smooth'
+        });
+
+        this.toggleSideMenu();
+      }
+    },
+  }
+}
+Alpine.data(name, component);

src/develop/src/js/main.js

@@ -1,5 +1,6 @@
 import 'vite/modulepreload-polyfill'
 import Alpine from 'alpinejs';
+import collapse from '@alpinejs/collapse';
 import htmx from 'htmx.org';
 import domContentLoaded from 'dom-content-loaded';
 // import Dispatcher from 'a-dispatcher';
@@ -39,6 +40,7 @@ fonts();
 async function loadAlpineModules() {
   // enable code splitting
   await import('./alpinejs');
+  Alpine.plugin(collapse);
 }
 
 /**