From fe93717d47792eef88f4ec6200260f457d1e0bd2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:23:43 +0200
Subject: consistent menu-items

---
 src/components/navigation/navigation_entry.vue | 56 ++++++++++++--------------
 1 file changed, 25 insertions(+), 31 deletions(-)

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ac4a0c47..4ea54ee3 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -62,59 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
+  padding: 0;
   display: flex;
-  box-sizing: border-box;
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
   &[aria-expanded] {
-    padding-right: 1em;
-  }
-
-  .timelines-chevron {
-    margin-right: 0;
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    text-align: initial;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    cursor: pointer;
-    box-sizing: content-box;
-    color: var(--text);
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
-    padding: 0 1em;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    color: var(--icon);
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
+  }
+
+  .timelines-chevron {
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: 0;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
   .badge {
-     margin: 0 0.8em;
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2