Add a button for nav list, and set stylesdev

The nav list(named pandoc-menu) is an important part of code
blogs. However, it was always shown, no matter what you use, pc, mobile
or tablet. It makes chaos for mobile/tablet, because width of these
devices is insufficient. Then the list covers normal content.

In this commit, a button is used to control the open/close of nav list,
and button & list are in the same parent, who comtrols the position and
flow of them.

Although it's still ugly, we've moved a step for the better, isn't it?

2 files changed, 58 insertions, 17 deletions

diff --git a/common/CSS/pandoc.css b/common/CSS/pandoc.css
index a7e500b..27ec33c 100644
--- a/common/CSS/pandoc.css
+++ b/common/CSS/pandoc.css
@@ -549,17 +549,6 @@ a:hover {
     content: '-';
 }
 
-nav {
-    position: sticky;
-    top: 100px;
-    margin-top: 150px;
-    display: inline-block;
-    /* order: 1; */
-    float: left;
-    box-sizing: border-box;
-    max-width: 15%;
-}
-
 body {
     display: flex;
     flex-direction: column;
@@ -573,4 +562,37 @@ body {
     margin: 0 auto;
     box-sizing: border-box;
     max-width: 40em;
+}
+
+/* my set */
+
+/* 侧边栏 */
+.side-menu {
+    position: sticky;
+    float: left;
+    /* 上边没有东西时，距离顶部100px
+     * 有东西时，维持100px距离
+     */
+    top: 100px;
+    margin-top: 100px;
+    /* border-box使元素的内边距和边框不会撑大元素的尺寸 */
+    box-sizing: border-box;
+
+    /* 自身尺寸 */
+    width: 300px;
+    max-height: 600px;
+    overflow-y: auto;
+
+    /* 颜色与内部设置 */
+    background-color: #f0f0f0;
+    border: 1px solid #daa520;
+    padding-top: 30px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+
+#toggle-nav {
+    position: absolute;
+    top: 10px;
+    right: 10px;
 }
\ No newline at end of file
diff --git a/common/js/pandoc-menu.js b/common/js/pandoc-menu.js
index af9153b..84fd020 100644
--- a/common/js/pandoc-menu.js
+++ b/common/js/pandoc-menu.js
@@ -1,13 +1,34 @@
 document.addEventListener('DOMContentLoaded', function () {
-    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    const menudiv = document.createElement('div');
+    menudiv.className = 'side-menu';
+    
+    const menutitle = document.createElement('div');
+    menutitle.textContent = document.title;
+    menudiv.appendChild(menutitle);
+
+    // a button to open/close nav list
+    const toggleNavButton = document.createElement('button');
+    toggleNavButton.id = 'toggle-nav';
+    toggleNavButton.textContent = '关闭';
+    menudiv.appendChild(toggleNavButton);
+
+    // Add click event listener to the button
+    toggleNavButton.addEventListener('click', () => {
+        nav.style.display = nav.style.display === 'none' ? 'block' : 'none';
+        toggleNavButton.textContent = toggleNavButton.textContent === '关闭' ? '打开' : '关闭';
+    });
+
+    // nav list itself
     const nav = document.createElement('nav');
-    document.querySelector('.pandoc').insertBefore(nav, document.querySelector('.pandoc').firstChild);
+    menudiv.appendChild(nav);
+    document.querySelector('.pandoc').insertBefore(menudiv, document.querySelector('.pandoc').firstChild);
     const topLevelList = document.createElement('ul');
     nav.appendChild(topLevelList);
 
     let currentLevel = topLevelList;
     let lastLevel = 1;
 
+    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
     headings.forEach(heading => {
         const listItem = document.createElement('li');
         const anchor = document.createElement('a');
@@ -31,9 +52,7 @@ document.addEventListener('DOMContentLoaded', function () {
         lastLevel = level;
     });
 
-    // document.body.insertBefore(nav, document.body.firstChild);
-
-    // Add functionality for expanding/collapsing
+    // Add functionality for expanding/collapsing menu list
     const navLinks = document.querySelectorAll('nav ul li');
     navLinks.forEach(link => {
         const sublist = link.querySelector('ul');
@@ -49,4 +68,4 @@ document.addEventListener('DOMContentLoaded', function () {
             });
         }
     });
-});
\ No newline at end of file
+});