From a7547789942341f639983764482c66db9398ebb9 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Wed, 15 Mar 2023 22:58:18 +0300
Subject: [PATCH] (feat) Even more left nav UI tweaks

---
 .../src/left-nav/left-nav.module.scss         | 63 ++++++++-----------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss b/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss
index bc1455a36..81d882816 100644
--- a/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss
+++ b/packages/framework/esm-styleguide/src/left-nav/left-nav.module.scss
@@ -3,48 +3,39 @@
 
 .leftNav {
   border-right: 1px solid $ui-03;
-  margin-top: 1rem;
+  padding-top: 1rem;
 
-  :global(.active-left-nav-link) {
-    background-color: $ui-03;
-    outline: none;
-    border-left: 0.25rem solid var(--brand-01);
+  // Left nav menu item
+  :global(.cds--side-nav__link) {
+    color: $text-02;
+    @include type.type-style("heading-compact-01");
 
-    > :global(.cds--side-nav__link) {
-      padding: 0 0.75rem;
-      color: $ui-05;
+    &:focus,
+    &:hover {
+      background-color: $ui-01;
     }
-  }
 
-  div {
-    &:global(.omrs-breakpoint-gt-tablet) {
-      padding-top: 1rem;
+    // Active menu item
+    &:global(.active-left-nav-link) {
+      color: $ui-05;
+      border-left: 0.25rem solid var(--brand-01);
+      background-color: $ui-03;
+      outline: none;
+      padding: 0 0.75rem;
     }
+  }
+}
 
-    a {
-      :global(.omrs-breakpoint-gt-tablet) {
-        height: 2rem;
-      }
-
-      :global(.omrs-breakpoint-lt-desktop) {
-        height: 3rem;
-      }
-
-      color: $ui-04;
-      @include type.type-style("heading-compact-01");
-      color: $text-02;
-
-      &:hover {
-        background-color: $ui-03;
-        color: $ui-05;
-        border-left: var(--brand-01);
-      }
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--side-nav__link) {
+    height: 2rem;
+  }
+}
 
-      &:focus {
-        background-color: $ui-03;
-        color: $ui-05;
-        border-left: var(--brand-01);
-      }
-    }
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--side-nav__link) {
+    height: 3rem;
   }
 }