From 42a03c5f8780cd615e4db7e5ebb54825cb41cb87 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Tue, 13 Jun 2023 22:54:23 +0000
Subject: [PATCH] use buttons

---
 .../PagePanels/components/NavMenu/index.jsx   | 10 ++---
 .../PagePanels/components/NavMenu/index.less  | 45 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx
index d9c171a7..ff4e389b 100644
--- a/packages/app/src/components/PagePanels/components/NavMenu/index.jsx
+++ b/packages/app/src/components/PagePanels/components/NavMenu/index.jsx
@@ -34,22 +34,20 @@ const NavMenuMobile = (props) => {
         <div className="card">
             {
                 props.items.map((item) => {
-                    return <div
+                    return <antd.Button
                         key={item.key}
                         className={classnames(
                             "item",
                             item.key === props.activeKey && "active",
                         )}
                         onClick={() => props.onClickItem(item.key)}
+                        type="ghost"
+                        disabled={item.disabled}
                     >
                         <div className="icon">
                             {item.icon}
                         </div>
-
-                        <div className="label">
-                            {item.label}
-                        </div>
-                    </div>
+                    </antd.Button>
                 })
             }
         </div>
diff --git a/packages/app/src/components/PagePanels/components/NavMenu/index.less b/packages/app/src/components/PagePanels/components/NavMenu/index.less
index 64bbdbdb..90aa882f 100644
--- a/packages/app/src/components/PagePanels/components/NavMenu/index.less
+++ b/packages/app/src/components/PagePanels/components/NavMenu/index.less
@@ -1,3 +1,5 @@
+@import "theme/vars.less";
+
 .navmenu_wrapper {
     position: relative;
 }
@@ -5,7 +7,7 @@
 .__mobile__navmenu_wrapper {
     box-sizing: border-box;
 
-    position: sticky;
+    position: relative;
 
     top: 0;
     left: 0;
@@ -13,9 +15,50 @@
     width: 100%;
 
     .card {
+        width: 100%;
+        height: @app_topBar_height;
+
         display: flex;
         flex-direction: row;
 
+        justify-content: space-evenly;
+
+        box-shadow: @card-shadow;
+
         gap: 10px;
+        padding: 5px;
+        border-radius: 12px;
+
+        isolation: unset;
+        overflow: visible;
+
+        .item {
+            display: flex;
+            flex-direction: column;
+
+            align-items: center;
+
+            height: fit-content;
+
+            gap: 4px;
+
+            padding: 8px 10px;
+
+            &.active {
+                color: var(--colorPrimary);
+            }
+
+            .icon {
+                margin: 0;
+                line-height: 1rem;
+                font-size: 1.5rem;
+            }
+
+            .label {
+                height: fit-content;
+                line-height: 1rem;
+                font-size: 0.8rem;
+            }
+        }
     }
 }
\ No newline at end of file