1 files changed, 55 insertions, 7 deletions

diff --git a/frontend/index.css b/frontend/index.css
index 471f6f3..729768c 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -27,7 +27,7 @@ main {
     display: flex;
     flex-direction: row;
     color: #1a1a1a;
-    width: 1260px;
+    width: 1200px;
     background-color: white;
     flex: 1 1 100%;
     height: 100%;
@@ -36,25 +36,73 @@ main {
 }
 
 section {
+    min-width: 74%;
+    width: 74%;
     overflow-y: auto;
 }
 
+/*
+    Navigation bar
+*/
 nav {
-    width: 25%;
+    width: 20%;
+    min-width: 20%;
+    max-width: 20%;
+    margin-right: 5%;
     height: 100%;
     display: flex;
     flex-direction: column;
     text-align: left;
     font-size: 1rem;
+    user-select: none;
+    border-right: 1px solid black;;
 }
 
-nav > ul {
+.outer-tree {
+    width: 100%;
     list-style: none;
-    padding-left: 0px;
+    padding: 0;
+    margin: 0;
+}
+
+.outer-tree > li > span {
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    background: white;
+}
+
+.outer-tree > li > span:hover {
+    color: gray;
+}
+
+.outer-tree > li > span > i {
+    transition: 100ms ease-in-out transform;
+}
+
+.outer-tree li.expanded > span > i {
+    display: inline-block;
+    transform: rotate(180deg);
 }
 
-nav > ul > li > ul {
+.inner-tree {
     padding-left: 1rem;
+    display: none;
+    list-style: none;
+}
+
+.inner-tree > li > label {
+    color: blue;
+    font-weight: bold;
+    text-align: center;
+}
+
+.inner-tree > li > a {
+    margin-left: 0.5rem;
+}
+
+.outer-tree > li.expanded .inner-tree {
+    display: inherit;
 }
 
 nav a {
@@ -147,7 +195,7 @@ article .opengl_canvas_container .play_button {
     height: 128px;
     position: absolute;
     top: calc(50% - 56px);
-    left: calc(50% - 220px);
+    left: calc(50% - 184px);
     border: 1px solid white;
     color: white;
     background-color: transparent;
@@ -172,7 +220,7 @@ article .opengl_canvas_container .stop_button {
     height: 2rem;
     border-radius: 2px;
     top: 0.5rem;
-    left: 536px;
+    left: 496px;
     display: none;
 }