Eliminate layout shift in menu toggle arrow with CSS-only solution (#1935)

refactor menu toggle arrow

_includes/api/en/3x/menu.md

@@ -1,4 +1,4 @@
-<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
+<button id="menu-toggle" title="show table of content">On this page</button>
 <ul id="menu">
     <li><a href="#express">express()</a></li>
     <li id="app-api"> <a href="#application">Application</a>

_includes/api/en/4x/menu.md

@@ -1,4 +1,4 @@
-<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
+<button id="menu-toggle" title="show table of content">On this page</button>
 <ul id="menu">
     <li id="express-api"><a href="#express">express()</a>
     <ul id="express-menu">

_includes/api/en/5x/menu.md

@@ -1,4 +1,4 @@
-<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
+<button id="menu-toggle" title="show table of content">On this page</button>
 <ul id="menu">
     <li id="express-api"><a href="#express">express()</a>
     <ul id="express-menu">

_includes/blog/posts-menu.md

@@ -1,4 +1,4 @@
-<button id="menu-toggle" title="show blogs list">All Blogs <span>&#x25BA;</span></button>
+<button id="menu-toggle" title="show blogs list">All Blogs</button>
 <ul id="menu" class="blog-side-menu">
   <li>
     <ul id="side-menu" class="active">

css/style.css

@@ -1130,6 +1130,19 @@ h2 a {
   color: #000;
   background-color: #fff;
 
+   &::after {
+    content: "";
+    display: block;
+    width: 0.8em;
+    height: 0.5em;
+    background-color: var(--card-bg);
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    cursor: pointer;
+    pointer-events: none;
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(-90deg);
+  }
+
   &:is(:hover, :active, :focus) {
     background-color: #ebf2f5;
   }
@@ -1331,10 +1344,16 @@ h2 a {
   }
 
   #menu-toggle.show {
-    display: block;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
     opacity: 1;
   }
 
+  #menu-toggle.show.rotate::after {
+    transform: rotate(0deg);
+  }
+
   #menu > li > a,
   #menu ul a {
     padding: 0.5rem;

js/menu.js

@@ -172,11 +172,10 @@ tocScreen.addEventListener("change", (event) => {
 
 // Toggle toc menu on button click
 toggleBtn?.addEventListener("click", (e) => {
+	toggleBtn.classList.toggle("rotate");
   if(tocList?.classList.contains("open")) {
-	toggleBtn.children[0].innerHTML = "►";
 	tocList.classList.remove("open");
   } else {
-	toggleBtn.children[0].innerHTML = "▼";
 	tocList.classList.add("open");
   }
 });