Remove px-link

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;

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);
                 }
             }

assets/styles/layout/_sidebar.scss

@@ -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;

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>

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>