Start editing JS to copy nav menu to the sidebar on load.

The Bootstrap v3 method of collapsing menus is interfering with the
v4 method.

html/navbar.html

@@ -5,10 +5,10 @@
       <a href="https://wwp.northeastern.edu/lab/wwvt/" id="wwvt-home">Women Writers Vector Toolkit</a>
     </div>
     <div class="navbar-group dropdown-container">
-      <button id="sidebar-hidder" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+      <button id="sidebar-hider" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
-      <div class="collapse navbar-collapse" id="navbarResponsive">
+      <div class="collapse navbar-collapse" id="navbarResponsiveBase">
         <ul class="navbar-nav ml-auto">
           <li class="nav-item">
             <a class="nav-link" href="http://lab.wwp.northeastern.edu/wwvt/">Word Vector Interface</a>

script.js

@@ -1,6 +1,58 @@
-console.log("script loaded");
+/*
+  Javascript for the Word Vector Interface
+ */
 
+let toggleSideNav = function(e) {
+  console.log('Toggling navbar visibility');
+  console.log(e);
+  let sideMenu = document.getElementById("navbarResponsive");
+  if ( sideMenu !== undefined ) {
+    copyNavMenu();
+  } /*else if ( sideMenu.classList.contains('show') ) {
+    
+  } else {
+    
+  }*/
+  sideMenu.classList.toggle('show');
+};
 
+// Duplicate the collapsed menu in the header.
+let copyNavMenu = function() {
+  if ( ! document.getElementById("navbarResponsive") ) {
+    let menuEl = document.createElement('section'),
+        menuList = document.getElementById("navbarResponsiveBase").children[0],
+        sidebar = document.getElementById("sidebarCollapsed");
+    menuEl.setAttribute('id', 'navbarResponsive');
+    menuEl.classList.add('collapse');
+    menuEl.append(menuList.cloneNode(true));
+    menuEl.addEventListener('shown.bs.collapse', function(e) {
+      console.log("SHOW MENU PLZ");
+      menuEl.classList.toggle('show');
+    });
+    sidebar.prepend(menuEl);
+    //$('.collapse').collapse();
+  }
+};
+
+// Create a callback function to be run when the entire document has loaded.
+let onLoad = function() {
+  console.log("Page loaded");
+  copyNavMenu();
+  // When the hamburger menu is clicked, toggle the visibility of the nav menu.
+  //document.getElementById("sidebar-hider").onclick = toggleSideNav;
+};
+
+/* Ensure that the callback function above is run, whether or not the DOM has 
+  already been loaded. Solution by Julian Kühnel: 
+  https://www.sitepoint.com/jquery-document-ready-plain-javascript/ */
+if ( document.readyState === 'complete' 
+   || ( document.readyState !== 'loading' && !document.documentElement.doScroll ) 
+   ) {
+  onLoad();
+} else {
+  document.addEventListener('DOMContentLoaded', onLoad);
+}
+/*
 var t = document.getElementById("sidebarCollapsed");
 t.classList.add('side-open');
 
@@ -21,3 +73,4 @@ elem.onclick = function() {
 
         return false;
     };
+*/

www/styles/main.css.orig

@@ -0,0 +1,272 @@
+/* Custom CSS for the Word Vector Interface */
+
+html {
+  font-size: 1rem;
+}
+
+body {
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  height: 100%;
+  overflow: hidden;
+}
+
+h1, h2, h3 {
+  font-size: 2em;
+}
+
+/* Unset a bunch of Shiny Dashboard rules in order to use CSS Grid. */
+html, body, .wrapper {
+  height: 100% !important;
+  min-height: unset !important;
+}
+.main-header, .main-sidebar, .content-wrapper {
+  max-height: unset !important;
+  min-height: unset !important;
+  z-index: unset !important;
+}
+
+.wrapper {
+  display: grid;
+  font-size: 0.875rem;
+  grid-gap: 0;
+  grid-template-areas:
+    "header header"
+    "sidebar content";
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: auto 1fr;
+}
+
+.wrapper:before {
+  content: none;
+  display: none;
+}
+
+.content-wrapper {
+  align-items: stretch;
+  background-color: #ecf0f5; /* via shinydashboard */
+  display: flex;
+  grid-area: content;
+  margin-left: 0;
+  overflow-y: auto;
+}
+
+.content {
+  margin: 0;
+  width: 100%;
+}
+
+.irs--shiny .irs-grid-pol {
+  background-color: #428bca;
+  opacity: 0.875;
+}
+
+.irs--shiny .irs-grid-text {
+  color: #99a4ac;
+}
+
+.dataTables_wrapper {
+  overflow-y : auto;
+}
+
+.visualization {
+  width : 100%;
+}
+
+#Download_reset_button {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+#clustering_reset_input_fullcluster,
+#downloadData {
+  margin: auto;
+}
+
+#downloadData {
+  color: #444;
+}
+
+.datatables {
+  min-height : 20px !important;
+}
+
+.nav-item {
+  margin: 0 2px;
+}
+
+.dropdown-menu {
+  font-size: 1em;
+}
+
+.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, 
+.btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, 
+.container-fluid:after, .container-fluid:before, 
+.container:after, .container:before, 
+.dl-horizontal dd:after, .dl-horizontal dd:before, 
+.form-horizontal .form-group:after, .form-horizontal .form-group:before, 
+.modal-footer:after, .modal-footer:before, 
+.modal-header:after, .modal-header:before, .nav:after, .nav:before, 
+.navbar-collapse:after, .navbar-collapse:before, 
+.navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, 
+.pager:after, .pager:before, .panel-body:after, .panel-body:before, 
+.row:after, .row:before {
+  display: table;
+  content: unset;
+}
+
+#word_cloud.shiny-output-error-validation {
+  visibility: visible;
+  color: inherit;
+  font-size: 1.25em;
+  font-style: italic;
+}
+
+#word_cloud > img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn, .form-control {
+  font-size: 0.875rem;
+}
+
+.compare_width {
+  width: 60%;
+}
+
+.main-header {
+  background-color: #343a40 !important;
+  grid-area: header;
+  position: unset;
+}
+
+.main-header .navbar {
+  font-size: 1.275em;
+  margin : 0;
+  padding: 0.15rem 0.25rem;
+  position: unset;
+}
+
+.main-header .navbar .container {
+  margin: 0.25rem 1rem;
+  max-width: unset;
+}
+
+.main-sidebar {
+  background-color: #222d32; /* via shinydashboard */
+  grid-area: sidebar;
+  margin: 0 5%;
+  min-height: unset;
+  padding-right: 1.5rem;
+  padding-top: 0;
+  position: initial;
+}
+
+#sidebarItemExpanded {
+  color: white;
+  padding-bottom: 1rem; /* mod of shinydashboard */
+}
+
+.box {
+  -webkit-box-shadow: none; 
+  -moz-box-shadow: none; 
+  box-shadow: none;
+  overflow: auto;
+}
+
+.model_header {
+  height : 160px;
+}
+
+.home_desc {
+  border-bottom: medium solid;
+  border-radius: 0.125rem;
+  font-size: 0.875em;
+  margin-bottom: 2.25em;
+  padding: 1.25rem;
+}
+
+#wwvt-home {
+  margin-left: 1rem;
+  align-self: center;
+  color: #fefefe;
+  font-size: 1.35rem;
+}
+
+#wwvt-home:hover {
+  color: #ccc;
+  text-decoration: none;
+}
+
+.welcome_desc {
+  font-size: 1.2em;
+}
+
+.dataTables_filter {
+  display: none !important;
+}
+
+.nav-over-flow{
+  background-color: #343a40 !important;
+}
+
+#word_cloud{
+  height: calc(100vh - 200px);
+}
+
+
+@media only screen and (max-width: 1000px) {
+
+  #table-main-2 {
+    display: none !important;
+  }
+
+  .compare_width {
+    width: 100% !important;
+  }
+
+  .navbar-collapse.collapse {
+    height: auto !important;
+    padding-bottom: 0;
+    overflow: visible !important;
+    display: none !important;
+  }
+
+  .navbar-nav {
+    display: none !important;
+  }
+
+  .side-open {
+    transform: none !important;
+  }
+
+  .side-close {
+    -webkit-transform: translate(-230px,0) !important;
+    -ms-transform: translate(-230px,0) !important;
+    -o-transform: translate(-230px,0) !important;
+    transform: translate(-230px,0) !important;
+  }
+
+} /* END @media only screen and (max-width: 1000px) */
+
+
+@media only screen and (max-width: 500px) {
+
+  body {
+    height: initial !important;
+    overflow-y: auto;
+  }
+
+  .wrapper {
+    grid-template-areas:
+      "header"
+      "content"
+      "sidebar";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+
+} /* END @media only screen and (max-width: 1000px) */

www/styles/wvi.css

@@ -210,14 +210,14 @@ html, body, .wrapper {
     width: 100% !important;
   }
 
-  .navbar-collapse.collapse {
+  .main-header .navbar-collapse.collapse {
     height: auto !important;
     padding-bottom: 0;
     overflow: visible !important;
     display: none !important;
   }
 
-  .navbar-nav {
+  .main-header .navbar-nav {
     display: none !important;
   }