fix: should use js in nav right buttons

Author: Lhcfl

src/components/rightbtn.ts

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelector('.nav_right_btn .more')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const nav = document.querySelector('.nav_right_btn');
+    if (!nav) return;
+    nav.classList.add('expanded');
+  });
+  document.addEventListener('click', (e) => {
+    document.querySelector('.nav_right_btn')?.classList.remove('expanded');
+  });
+});

src/main.ts

@@ -6,6 +6,7 @@ import './scss/style.scss';
 import { Anatolo } from './anatolo/anatolo';
 import * as Utils from './utils/main';
 import FloatBtn from './components/float-btn';
+import './components/rightbtn';
 
 (window as any).Anatolo = Anatolo;
 (window as any).Utils = Utils;

src/scss/raw-components/nav.scss

@@ -84,21 +84,21 @@
   @media screen and (max-width: $bp-small-width-view) {
     .information {
       background-color: var(--secondary);
-      .nav_right_btn li {
-        display: none;
-        &.more {
-          display: block;
-        }
-      }
-      &:hover {
-        right: 0;
-        position: absolute;
-        .nav_right_btn li {
-          display: initial;
-          &.more {
+      .nav_right_btn {
+        &.expanded {
+          li {
+            display: initial;
+          }
+          li.more {
             display: none;
           }
         }
+        li {
+          display: none;
+        }
+        li.more {
+          display: initial;
+        }
       }
     }
   }