From 06fd34ef8c5f3b5a0bd45cc2b242cc4f11b466dc Mon Sep 17 00:00:00 2001
From: Hans Kallekleiv <hakal@statoil.com>
Date: Wed, 9 Sep 2020 13:35:37 +0200
Subject: [PATCH] Scrollable sidebar (#279)

---
 webviz_config/static/assets/webviz_layout.css | 44 ++++++++++++++++++-
 .../templates/webviz_template.py.jinja2       |  1 +
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/webviz_config/static/assets/webviz_layout.css b/webviz_config/static/assets/webviz_layout.css
index 79242bea..b5813eac 100644
--- a/webviz_config/static/assets/webviz_layout.css
+++ b/webviz_config/static/assets/webviz_layout.css
@@ -61,6 +61,48 @@ div.pageWrapper.tab-content {
     align-items: center;
 }
 
+.sideBar {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100vh;
+    scrollbar-width: thin;
+    scrollbar-color: var(--menuBackground) var(--menuBackground); /* thumb and track color */
+}
+
+.sideBar:hover {
+    scrollbar-color: var(--menuLinkColor) var(--menuBackground); /* thumb and track color */
+}
+
+.sideBar::-webkit-scrollbar
+{
+	width: 3px;
+	background-color:var(--menuBackground);
+}
+
+.sideBar::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 3px var(--menuBackground);
+	background-color: var(--menuBackground);
+}
+
+.sideBar:hover::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 3px var(--menuLinkBackgroundHover);
+    
+	background-color: var(--menuBackground);
+}
+
+.sideBar::-webkit-scrollbar-thumb
+{
+	background-color: var(--menuBackground);
+}
+
+.sideBar:hover::-webkit-scrollbar-thumb
+{
+	background-color: var(--menuLinkColor);
+}
+
+
 /* Needed to override border for the last tab */
 #last_page {border: none!important;} /* csslint allow: known-properties, important */
-#logo {border: none!important;} /* csslint allow: known-properties, important */
\ No newline at end of file
+#logo {padding:50px!important; border: none!important;max-width: 100%; height:auto;} /* csslint allow: known-properties, important */
diff --git a/webviz_config/templates/webviz_template.py.jinja2 b/webviz_config/templates/webviz_template.py.jinja2
index 1a607fe0..a3a4f803 100644
--- a/webviz_config/templates/webviz_template.py.jinja2
+++ b/webviz_config/templates/webviz_template.py.jinja2
@@ -74,6 +74,7 @@ else:
     app.layout = dcc.Tabs(
         parent_className="layoutWrapper",
         content_className="pageWrapper",
+        className="sideBar",
         vertical=True,
         children=[
           {% for page in pages %}