From 6b05b69c1392766168dded6bfd5ece19e05a2d33 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 28 Mar 2024 17:34:15 +0300
Subject: [PATCH] Remove px-link

---
 assets/styles/layout/_core.scss    | 17 -----------------
 assets/styles/layout/_doc.scss     | 15 +++++++++++----
 assets/styles/layout/_sidebar.scss | 10 +++++++++-
 components/doc/DocSectionNav.vue   |  4 ++--
 layouts/AppMenuItem.vue            |  2 +-
 5 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index 8c7772169..4565748b7 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -75,23 +75,6 @@ p {
     top: 7rem;
 }
 
-.px-link {
-    font-size: 1rem;
-    border-radius: 6px;
-    text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-    @include focus-visible();
-}
-
-.px-link:disabled {
-	cursor: default;
-}
-
 button {
     font-family: inherit;
     font-feature-settings: inherit;
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 690076be2..eca5b3cf0 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -178,9 +178,14 @@
         > .navbar-item-content {
             display: flex;
 
-            .px-link {
+            button {
+                font-size: 1rem;
+                text-align: left;
+                background: transparent;
+                margin: 0;
+                border: 0 none;
                 padding: 0.25rem 1rem 0.25rem 1rem;
-                color: var(--text-color);
+                color: var(--text-secondary-color);
                 font-weight: 400;
                 white-space: nowrap;
                 min-width: 0;
@@ -188,12 +193,14 @@
                 text-overflow: ellipsis;
                 transition: outline-color 0.2s, border-color .2s;
                 outline-color: transparent;
+                cursor: pointer;
+                user-select: none;
                 @include focus-visible();
                 --focus-ring-offset: -1px;
             }
 
             &:hover {
-                .px-link {
+                button {
                     color: var(--text-color);
                 }
             }
@@ -203,7 +210,7 @@
             > .navbar-item-content {
                 border-color: var(--primary-text-color);
 
-                .px-link {
+                button {
                     color: var(--primary-text-color);
                 }
             }
diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index 7077ea7a9..30623040a 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -31,7 +31,7 @@
         > li {
             margin-bottom: .25rem;
             
-            > button, 
+            > button,
             > a {
                 display: flex;
                 width: 100%;
@@ -42,6 +42,14 @@
                 transition: outline-color 0.2s;
                 outline-color: transparent;
                 position: relative;
+                background: transparent;
+                font-size: 1rem;
+                border: 0 none;
+                margin: 0;
+                text-align: left;  
+                cursor: pointer;
+                user-select: none;
+                @include focus-visible();
 
                 .menu-icon {
                     width: 2rem;
diff --git a/components/doc/DocSectionNav.vue b/components/doc/DocSectionNav.vue
index 2683171f3..6375b4733 100644
--- a/components/doc/DocSectionNav.vue
+++ b/components/doc/DocSectionNav.vue
@@ -2,14 +2,14 @@
     <ul ref="nav" class="doc-section-nav">
         <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
             <div class="navbar-item-content">
-                <button class="px-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
+                <button @click="onButtonClick(doc)">{{ doc.label }}</button>
             </div>
 
             <template v-if="doc.children">
                 <ul>
                     <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
                         <div class="navbar-item-content">
-                            <button class="px-link" @click="onButtonClick(child)">
+                            <button @click="onButtonClick(child)">
                                 {{ child.label }}
                             </button>
                         </div>
diff --git a/layouts/AppMenuItem.vue b/layouts/AppMenuItem.vue
index 3b2208f1f..d160bde2b 100644
--- a/layouts/AppMenuItem.vue
+++ b/layouts/AppMenuItem.vue
@@ -1,6 +1,6 @@
 <template>
     <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
-        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link">
+        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button">
             <span class="menu-icon">
                 <i :class="menuitem.icon"></i>
             </span>