From 2cb2a112e314f243a0e324109af3147bdb6a2d4a Mon Sep 17 00:00:00 2001
From: Lhcfl <lhcfl@outlook.com>
Date: Mon, 9 Sep 2024 18:01:41 +0800
Subject: [PATCH] fix: should use js in nav right buttons

---
 src/components/rightbtn.ts       | 12 ++++++++++++
 src/main.ts                      |  1 +
 src/scss/raw-components/nav.scss | 24 ++++++++++++------------
 3 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 src/components/rightbtn.ts

diff --git a/src/components/rightbtn.ts b/src/components/rightbtn.ts
new file mode 100644
index 0000000..77ad8ef
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/src/main.ts b/src/main.ts
index 4a68a54..444254d 100644
--- a/src/main.ts
+++ b/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;
diff --git a/src/scss/raw-components/nav.scss b/src/scss/raw-components/nav.scss
index 7cd22a3..d060387 100644
--- a/src/scss/raw-components/nav.scss
+++ b/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;
+        }
       }
     }
   }