From d0cbb37c554b787e6236afa6c016a7f4d47ce1d9 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Sat, 17 Dec 2022 14:42:42 +0100
Subject: [PATCH] Final markup

---
 index.html | 77 +++++++++++++++++++++++++-----------------------------
 style.scss | 34 +++++++-----------------
 2 files changed, 45 insertions(+), 66 deletions(-)

diff --git a/index.html b/index.html
index 08086a9..d1e4de9 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,36 @@
 
     <div class="wrapper">
         <section class="tree-structure">
-            <h3>Playground</h3>
+            <ul class="subnav">
+                <li><a href="#">First Level</a></li>
+                <li>
+                    <a href="#">First Level</a>
+                    <ul>
+                        <li><a href="#">Second Level</a></li>
+                        <li>
+                            <a href="#">Second Level</a>
+                            <ul>
+                                <li><a href="#">Third Level</a></li>
+                                <li><a href="#">Third Level</a></li>
+                                <li><a href="#">Third Level</a></li>
+                                <li><a href="#">Third Level</a></li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="#">Second Level</a>
+                            <ul>
+                                <li><a href="#">Third Level</a></li>
+                                <li><a href="#">Third Level</a></li>
+                            </ul>
+                        </li>
+                        <li><a href="#">Second Level</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">First Level</a></li>
+            </ul>
+        </section>
+
+        <section class="tree-structure">
             <ul class="subnav">
                 <li><a href="#">First Level</a></li>
                 <li>
@@ -42,7 +71,11 @@
                         <li><a href="#">Second Level</a></li>
                     </ul>
                 </li>
-                <!-- <li><a href="#">First Level</a></li>
+            </ul>
+        </section>
+
+        <section class="tree-structure">
+            <ul class="subnav">
                 <li><a href="#">First Level</a></li>
                 <li>
                     <a href="#">First Level</a>
@@ -50,48 +83,8 @@
                         <li><a href="#">Second Level</a></li>
                         <li><a href="#">Second Level</a></li>
                         <li><a href="#">Second Level</a></li>
-                        <li><a href="#">Second Level</a></li>
-                        <li><a href="#">Second Level</a></li>
-                    </ul>
-                </li>-->
-                <li><a href="#">First Level</a></li>
-            </ul>
-        </section>
-
-        <section class="tree-structure-expected">
-            <h3>Expected</h3>
-            <ul class="level-one">
-                <li class="selected-first">First Level</li>
-                <li class="selected-first selected-last">
-                    First Level
-                    <ul class="level-two">
-                        <li class="selected-first">Second Level</li>
-                        <li class="not-selected">Second Level</li>
-                        <li class="not-selected">Second Level</li>
-                        <li class="not-selected">Second Level</li>
-                        <li class="selected-last">
-                            Second Level
-                            <ul class="level-three">
-                                <li class="selected-first">Third Level</li>
-                                <li class="not-selected">Third Level</li>
-                                <li class="not-selected">Third Level</li>
-                                <li class="selected-last">Third Level</li>
-                            </ul>
-                        </li>
                     </ul>
                 </li>
-                <li class="selected-first">First Level</li>
-                <li class="not-selected">First Level</li>
-                <li class="selected-last">
-                    First Level
-                    <ul class="level-two">
-                        <li class="selected-first">Second Level</li>
-                        <li class="not-selected">Second Level</li>
-                        <li class="not-selected">Second Level</li>
-                        <li class="selected-last">Second Level</li>
-                    </ul>
-                </li>
-                <li class="selected-last">First Level</li>
             </ul>
         </section>
     </div>
diff --git a/style.scss b/style.scss
index abd641b..fdfd80f 100644
--- a/style.scss
+++ b/style.scss
@@ -7,29 +7,12 @@ body {
 
 .wrapper {
     display: flex;
-}
-
-ul {
-    list-style-type: none;
+    column-gap: 1rem;
 }
 
 section.tree-structure {
-    width: 50%;
-    background-color: aquamarine;
-}
-
-section.tree-structure-expected {
-    width: 50%;
-    padding: 0 2rem 0 2rem;
-    .selected-first {
-        color: green;
-    }
-    .selected-last {
-        color: red;
-    }
-    .not-selected {
-        color: black;
-    }
+    background-color: rgb(195, 253, 234);
+    flex-grow: 1;
 }
 
 section.example {
@@ -47,16 +30,20 @@ $border_width: 20px;
 $border-margin-right: 15px;
 $left-padding-unit: 16px;
 
+ul {
+    list-style-type: none;
+}
+
 ul.subnav {
     // debug colors: level one
     > li {
-        background-color: rgb(242, 242, 168);
+        // background-color: rgb(242, 242, 168);
     }
     > li > ul > li {
-        background-color: rgb(199, 167, 255);
+        // background-color: rgb(199, 167, 255);
     }
     > li > ul > li > ul > li {
-        background-color: rgb(174, 249, 174);
+        // background-color: rgb(174, 249, 174);
     }
 
     // level one
@@ -84,7 +71,6 @@ ul.subnav {
             // default: just border line
             &::before {
                 content: " ";
-                background-color: yellow;
                 display: inline-block;
                 width: $border_width;
                 margin-right: $border-margin-right;