From a623e452a9ea61958bd34ffb77f56a4381a164fb Mon Sep 17 00:00:00 2001
From: Abel Serrano Juste <akronix5@gmail.com>
Date: Thu, 20 Dec 2018 20:38:16 +0100
Subject: [PATCH] Backported fixed duplicated id bug for sidebar.

Fixes a bug that there was more than one div with id sidebar.
[Backported from WikiChron-networks commit 64755f2e75bc0ce0ee98e1f773a45ad990ceb034](https://github.com/Grasia/WikiChron-networks/commit/64755f2e75bc0ce0ee98e1f773a45ad990ceb034).
---
 wikichron/app.py              | 6 +++---
 wikichron/assets/side_bar.css | 4 ++--
 wikichron/js/side_bar.js      | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/wikichron/app.py b/wikichron/app.py
index 554877d..674dc05 100755
--- a/wikichron/app.py
+++ b/wikichron/app.py
@@ -162,7 +162,7 @@ def set_layout():
 
             #~ generate_tabs_bar(tabs),
             #~ side_bar.generate_side_bar(available_wikis, available_metrics),
-            html.Div(id='side-bar'),
+            html.Div(id='side-bar-root', className='side-bar-cn'),
             html.Div(id='main-root', style={'flex': 'auto'}),
             html.Div(id='sidebar-selection', style={'display': 'none'}),
             html.Div(id='test', style={'display': 'none'})
@@ -255,9 +255,9 @@ def write_query_string_in_hidden_selection_div(query_string):
         return (json.dumps(selection))
 
 
-    @app.callback(Output('side-bar', 'children'),
+    @app.callback(Output('side-bar-root', 'children'),
         [Input('url', 'pathname')],
-        [State('side-bar', 'children'),
+        [State('side-bar-root', 'children'),
         State('url', 'search')],
     )
     def generate_side_bar_onload(pathname, sidebar, query_string):
diff --git a/wikichron/assets/side_bar.css b/wikichron/assets/side_bar.css
index 6f9a65e..204b6d2 100644
--- a/wikichron/assets/side_bar.css
+++ b/wikichron/assets/side_bar.css
@@ -1,6 +1,6 @@
-/* Sidebar */
+/* Sidebars */
 
-#side-bar {
+.side-bar-cn {
     background-color: #004481;
     flex: 0 0 300px;
     color: white;
diff --git a/wikichron/js/side_bar.js b/wikichron/js/side_bar.js
index 17bed00..98e6ce4 100644
--- a/wikichron/js/side_bar.js
+++ b/wikichron/js/side_bar.js
@@ -7,7 +7,7 @@ function setEvents() {
 function hideSideBar() {
 
     console.log('Pressed hide side bar...');
-    // makes arrows point to the left <<
+    // makes arrows point to the right >>
     fold_button = document.getElementById('fold-button');
     fold_button.style.transform = "rotateY(180deg)";
 
@@ -16,7 +16,7 @@ function hideSideBar() {
 
     // hide side bar
     document.getElementById('side-bar-content').style.display = 'none';
-    document.getElementById('side-bar').style.flex = 'unset';
+    document.getElementById('side-bar-root').style.flex = 'unset';
 
     // set show bar in arrow
     fold_container = document.getElementById('fold-img-container');
@@ -28,7 +28,7 @@ function showSideBar() {
 
     console.log('Pressed show side bar...');
 
-    // makes arrows point to the right >>
+    // makes arrows point to the left <<
     fold_button = document.getElementById('fold-button');
     fold_button.style.transform = '';
 
@@ -36,7 +36,7 @@ function showSideBar() {
 
     // show side bar
     document.getElementById('side-bar-content').style.display = '';
-    document.getElementById('side-bar').style.flex = '';
+    document.getElementById('side-bar-root').style.flex = '';
 
     // set hide bar in arrow
     fold_container = document.getElementById('fold-img-container');