From e0634ec300bac5d2fe3d5a900ed27cb576c8c379 Mon Sep 17 00:00:00 2001
From: Mykola Fant <mykola.fant@hazelcast.com>
Date: Tue, 13 Aug 2024 12:01:01 +0300
Subject: [PATCH] draw nav line

---
 src/css/nav.css | 60 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/css/nav.css b/src/css/nav.css
index 3982265..9b9e00b 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -1,6 +1,8 @@
 
 .nav-container {
   --nav-x-padding: 10px;
+  --nav-item-padding-left: 10px;
+  --nav-line-left: 5px;
 
   position: fixed;
   margin-top: 30px;
@@ -42,10 +44,6 @@
   visibility: visible;
 }
 
-.nav-item.is-active > a {
-  color: var(--accent);
-}
-
 .nav {
   background-color: #fff;
   position: relative;
@@ -88,11 +86,12 @@ html.is-clipped--nav {
 }
 
 .nav-menu a {
-  color: inherit;
+  color: var(--secondary-text);
 }
 
 .nav-list {
   padding: 0;
+  position: relative;
 }
 
 .nav-item {
@@ -100,15 +99,50 @@ html.is-clipped--nav {
   line-height: 1.6;
   position: relative;
   list-style: none;
-  padding: 2px 10px;
+  padding: 2px 0 2px var(--nav-item-padding-left);
 }
 
 .nav-item[data-depth="0"] {
+  font-size: 16px;
+  font-weight: 600;
   line-height: 2.1;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
+.nav-item:not([data-depth="0"]) {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.nav-item.is-current-path > .nav-list::before {
+  content: '';
+  position: absolute;
+  width: 1px;
+  background-color: var(--neutral-light);
+  left: var(--nav-line-left);
+  top: 0;
+  bottom: 0;
+}
+
+.nav-link {
+  position: relative;
+}
+
+.nav-item.is-current-path > .nav-link::before {
+  --nav-line-dot-width: 5px;
+
+  content: '';
+  position: absolute;
+  width: var(--nav-line-dot-width);
+  height: var(--nav-line-dot-width);
+  border-radius: 50%;
+  background-color: var(--accent);
+  left: calc((-1 * var(--nav-item-padding-left)) + (var(--nav-line-dot-width) / 2));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .nav-menu > .nav-list {
   padding: 0;
   margin-top: 0;
@@ -133,6 +167,7 @@ html.is-clipped--nav {
 
 .nav-item-toggle {
   background: transparent url(../img/caret-blue.svg) center no-repeat;
+  transform: rotate(-90deg);
   border: none;
   outline: none;
   line-height: inherit;
@@ -152,17 +187,13 @@ html.is-clipped--nav {
 }
 
 .nav-item.is-active > .nav-item-toggle {
-  transform: rotate(-180deg);
+  transform: rotate(0);
 }
 
 .is-current-page {
   background-color: var(--info-light);
   border-radius: 10px;
-}
-
-.nav-link,
-.nav-text {
-  padding-right: 15px;
+  font-weight: 600;
 }
 
 .is-current-page > .nav-link,
@@ -170,6 +201,11 @@ html.is-clipped--nav {
   color: var(--accent);
 }
 
+.nav-link,
+.nav-text {
+  padding-right: 15px;
+}
+
 .nav-link.enterprise::after {
   content: 'Enterprise';
   background: var(--primary-dark);