Replace all use of <a> + href='#' with proper buttons

1 files changed, 8 insertions, 7 deletions

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 28c888fe..1c14c1ab 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -144,8 +144,8 @@
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <a
-            href="#"
+          <button
+            class="button-unstyled -link"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -153,7 +153,7 @@
               class="fa-scale-110 fa-old-padding"
               icon="cog"
             /> {{ $t("settings.settings") }}
-          </a>
+          </button>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
@@ -183,8 +183,8 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <a
-            href="#"
+          <button
+            class="button-unstyled -link"
             @click="doLogout"
           >
             <FAIcon
@@ -192,7 +192,7 @@
               class="fa-scale-110 fa-old-padding"
               icon="sign-out-alt"
             /> {{ $t("login.logout") }}
-          </a>
+          </button>
         </li>
       </ul>
     </div>
@@ -331,12 +331,13 @@
 .side-drawer li {
   padding: 0;
 
-  a {
+  a, button {
     box-sizing: border-box;
     display: block;
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
+    width: 100%;
 
     &:hover {
       background-color: $fallback--lightBg;