From 355db0a6517fba3174eb4522770dbe1d6c2ee003 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Sun, 18 Dec 2022 01:23:45 +0100
Subject: [PATCH] Checkpoint

---
 index.html |  4 ++--
 style.scss | 67 +++++++++++++++++++++++++++++++++++-------------------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 4238f7a..4b38383 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,14 @@
                 <li><a href="#" class="icon icon-reports">Reports</a></li>
                 <li>
                     <a href="#" class="icon icon-call-center">Call Center</a>
-                    <ul>
+                    <ul class="subnav">
                         <li><a href="#">Ticket Stream</a></li>
                         <li><a href="#">Configuration</a></li>
                     </ul>
                 </li>
                 <li>
                     <a href="#" class="icon icon-warehouse-management">Warehouse Management</a>
-                    <ul>
+                    <ul class="subnav">
                         <li><a href="#">Product Warehouse</a></li>
                         <li>
                             <a href="#">Spare part Warehouse</a>
diff --git a/style.scss b/style.scss
index 5ed84b1..010a44e 100644
--- a/style.scss
+++ b/style.scss
@@ -7,7 +7,8 @@ body {
 section.sidebar {
     width: 320px;
     background-color: #f8f9fa;
-    border: 1px solid #cdcdcd;
+    border-left: 1px solid #cdcdcd;
+    border-right: 1px solid #cdcdcd;
 }
 
 // ----------------------------------------------------------------------------------
@@ -18,12 +19,21 @@ $subnav-indent: 16px;
 $icon-width: 50px;
 
 nav.main {
+    li {
+        border-bottom: 1px solid $border-color;
+        &:first-of-type {
+            border-top: 1px solid $border-color;
+        }
+    }
+
     li > a {
         display: block;
         padding: 15px 0;
         text-decoration: none;
         color: $text-color;
-        border-top: 1px solid $border-color;
+        &:hover {
+            background-color: rgba($text-color, 0.03);
+        }
     }
 
     // level 0: main items
@@ -67,41 +77,50 @@ nav.main {
                     background-image: url("/img/menu-icons/dashboard.svg");
                 }
             }
+        }
+    }
 
-            // subnav level 1
+    // subnav level 1
+    ul.subnav {
+        border-top: 1px solid $border-color;
+        // reset parent borders
+        li {
+            border-bottom: none;
+            &:first-of-type {
+                border-top: none;
+            }
+        }
+
+        > li {
+            a {
+                padding-left: $subnav-indent;
+            }
+
+            // subnav level 2
             > ul {
                 // padding-left: $subnav-indent;
                 > li {
                     a {
-                        padding-left: $subnav-indent;
-                        border: none;
-                        &:hover {
-                            background-color: rgba($text-color, 0.03);
-                        }
+                        color: blue;
+                        padding-left: $subnav-indent * 2;
                     }
-
-                    // subnav level 2
+                    &:first-child a {
+                        // reset parent properties
+                        border: none;
+                    }
+                    // subnav level 3
                     > ul {
-                        // padding-left: $subnav-indent;
                         > li {
                             a {
-                                color: blue;
+                                color: red;
+                                padding-left: $subnav-indent * 3;
                             }
-                            // subnav level 3
+                            // subnav level 4
                             > ul {
-                                // padding-left: $subnav-indent;
                                 > li {
                                     a {
-                                        color: red;
-                                    }
-                                    // subnav level 4
-                                    > ul {
-                                        // padding-left: $subnav-indent;
-                                        > li {
-                                            a {
-                                                color: green;
-                                            }
-                                        }
+                                        color: green;
+                                        padding-left: $subnav-indent * 4;
                                     }
                                 }
                             }