From 869b2f77ed84a148a4335e867af672c4fd778fe5 Mon Sep 17 00:00:00 2001
From: Will Hannon <hannonww@gmail.com>
Date: Tue, 9 Apr 2024 16:59:41 -0700
Subject: [PATCH 1/4] Refactor main CSS components

---
 v0/css/base.css          |   1 +
 v0/css/components.css    | 263 +--------------------------------------
 v0/css/layout.css        |  58 ++++++---
 v0/css/main.css          |   2 +
 v0/css/navbar.css        |  93 ++++++++++++++
 v0/css/sidebar.css       | 200 +++++++++++++++++++++++++++++
 v0/css/visualization.css |   2 +-
 v0/index.html            |  96 +++++++++-----
 v0/js/ui.js              |   3 +
 9 files changed, 404 insertions(+), 314 deletions(-)
 create mode 100644 v0/css/navbar.css
 create mode 100644 v0/css/sidebar.css

diff --git a/v0/css/base.css b/v0/css/base.css
index 67887e0..5335b16 100644
--- a/v0/css/base.css
+++ b/v0/css/base.css
@@ -1,4 +1,5 @@
 /* CSS properties that apply to all elements of a particular type  */
+
 *,
 ::before,
 ::after {
diff --git a/v0/css/components.css b/v0/css/components.css
index a0167d8..84408ad 100644
--- a/v0/css/components.css
+++ b/v0/css/components.css
@@ -1,265 +1,4 @@
-/* CSS for components on the website including the sidebar, navbar, and form elements  */
-
-/* Header Styles */
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--nav-height);
-  background: white;
-  z-index: var(--z-index-nav);
-  padding: 0 3em 0 calc(var(--sidebar-width) + 3em);
-  transition: 0.5s;
-}
-
-nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: var(--nav-height);
-}
-
-nav .controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-nav a {
-  text-decoration: none;
-}
-
-nav .trigger {
-  display: flex;
-  align-items: center;
-  border: none;
-  outline: none;
-  background: none;
-  font-size: 1.25em;
-}
-
-nav .sidebar-toggle {
-  font-size: 1.25em;
-  color: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-}
-
-nav .sidebar-toggle:hover {
-  color: rgba(0, 0, 0, 0.75);
-}
-
-/* Sidebar Styles */
-.sidebar {
-  position: fixed;
-  top: 0;
-  width: var(--sidebar-width);
-  height: 100vh;
-  background-color: var(--sidebar-bg-color);
-  z-index: 100;
-  overflow: scroll;
-  transition: 0.5s;
-  display: flex;
-  flex-direction: column;
-}
-.sidebar .main-content {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 3px);
-  overflow: auto;
-}
-
-.sidebar .header {
-  margin-bottom: 2.5rem;
-  height: var(--nav-height);
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.75);
-}
-
-.sidebar .header .logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Press Start 2P", monospace;
-  font-size: 1em;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.75);
-  white-space: nowrap;
-  transition: justify-content 0.5s ease;
-  width: 100%;
-  gap: 10px;
-}
-
-.logo-img {
-  width: var(--sidebar-icon-width);
-  height: auto;
-}
-
-.sidebar.sidebar--collapsed .header .logo {
-  justify-content: flex-start;
-}
-
-.sidebar .accordion {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border: none;
-  outline: none;
-  background: none;
-  color: rgba(0, 0, 0, 0.75);
-  cursor: pointer;
-  font-size: 1.25rem;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.sidebar .accordion:hover {
-  background-color: #dddddd;
-}
-
-.sidebar .accordion-content {
-  padding: 0 20px;
-  max-height: 0;
-  overflow: hidden;
-  gap: 0.5em;
-  transition: max-height 0.2s ease-in-out;
-}
-
-.sidebar .accordion-content label {
-  font-size: 0.8rem;
-}
-
-.sidebar .accordion-content select {
-  width: 100%;
-  height: 2em;
-}
-.sidebar .accordion-content input[type="range"] {
-  width: 100%;
-}
-
-.sidebar .color {
-  display: flex;
-  justify-content: space-between;
-}
-.sidebar .accordion-option {
-  padding-bottom: 10px;
-}
-
-.sidebar .accordion-option .output {
-  float: right;
-  font-size: 0.75rem;
-  font-family: monospace;
-  color: #963c10;
-}
-
-.sidebar .icon {
-  width: var(--sidebar-icon-width);
-  height: var(--sidebar-icon-width);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: 1.75rem;
-}
-.legend {
-  padding-top: 0.2em;
-}
-
-#url-json-file {
-  width: 100%;
-  height: 2em;
-}
-
-#url-markdown-file {
-  width: 100%;
-  height: 2em;
-}
-
-.sidebar--collapsed {
-  width: var(--sidebar-icon-width);
-  overflow-x: hidden;
-}
-
-.body-pad {
-  padding: 0 2.5em 0 calc(var(--sidebar-icon-width) + 2.5em) !important;
-}
-
-.download-toggle {
-  width: 100%;
-  height: 1.5em;
-  position: relative;
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.75);
-  border-radius: 25px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.download-toggle button {
-  text-align: center;
-  line-height: 50px;
-  color: black;
-  flex: 1;
-  margin: 0;
-  border: none;
-  background: white;
-  border-radius: 25px 0 0 25px;
-}
-
-.download-toggle .upload-method {
-  color: white;
-  background: #007bff;
-}
-
-.download-toggle button:last-child {
-  border-radius: 0 25px 25px 0;
-}
-
-.github-link {
-  margin-top: auto;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1px;
-  box-sizing: border-box;
-  background-color: var(--sidebar-bg-color);
-}
-
-.github-link .icon {
-  width: 30px;
-  height: 30px;
-}
-
-.github-link a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.75);
-}
-
-.software-version {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1px;
-  box-sizing: border-box;
-  background-color: var(--sidebar-bg-color);
-}
-
-.software-version span {
-  display: flex;
-  color: rgba(44, 44, 44, 0.75);
-  font-size: small;
-}
+/* CSS for components on the website including the loading spinner and alerts  */
 
 /* Alert Styles */
 .alert {
diff --git a/v0/css/layout.css b/v0/css/layout.css
index 389717e..6cf4559 100644
--- a/v0/css/layout.css
+++ b/v0/css/layout.css
@@ -1,29 +1,53 @@
 /* CSS for the application layout and resizing  */
 
-.main {
+.app-header {
+  position: fixed;
+  top: 0px;
+  left: 0;
+  z-index: var(--z-index-nav);
+  width: 100%;
+  pointer-events: none;
+}
+
+.app-sidebar {
+  position: fixed;
+  top: 0;
+  width: var(--sidebar-width);
+  height: 100vh;
+  background-color: var(--sidebar-bg-color);
+  z-index: 100;
+  overflow: scroll;
+  transition: 0.5s;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-top: 3em;
   padding: 0 2.5em 0 calc(var(--sidebar-width) + 2.5em);
   transition: 0.5s;
+  min-height: 100vh;
 }
 
-.chart {
-  max-width: 1200px;
-  min-width: 300px;
+.app-main.sidebar-collapsed {
+  padding: 0 4em 0 calc(var(--sidebar-icon-width) + 4em);
 }
 
-.protein {
-  max-width: 1080px;
-  min-width: 300px;
-  min-height: 300px;
-  max-height: 600px;
-  border-radius: 10px;
+.app-main .container {
+  max-width: calc(var(--layout-max-width) - var(--sidebar-width));
+  width: 100%;
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.app-main.sidebar-collapsed .container {
+  max-width: calc(var(--layout-max-width) - var(--sidebar-icon-width));
 }
 
-@media (min-width: 1400px) {
-  .body-pad {
-    padding: 0 4em 0 calc(var(--sidebar-icon-width) + 4em) !important;
-  }
-  .main {
-    padding: 0 4em 0 calc(var(--sidebar-width) + 4em);
-  }
+.protein {
+  border-radius: 10px;
 }
diff --git a/v0/css/main.css b/v0/css/main.css
index 90d5cce..bf74441 100644
--- a/v0/css/main.css
+++ b/v0/css/main.css
@@ -4,4 +4,6 @@
 @import "./base.css";
 @import "./layout.css";
 @import "./components.css";
+@import "./navbar.css";
+@import "./sidebar.css";
 @import "./visualization.css";
diff --git a/v0/css/navbar.css b/v0/css/navbar.css
new file mode 100644
index 0000000..d0f1284
--- /dev/null
+++ b/v0/css/navbar.css
@@ -0,0 +1,93 @@
+/* CSS for the navigation bar component at the top of the application */
+
+.nav-bar {
+  background-color: transparent;
+  position: relative;
+  height: var(--nav-height);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.nav-bar .wrapper {
+  padding: 0;
+}
+
+.nav-bar .container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: calc(var(--layout-max-width) - var(--sidebar-width));
+  height: var(--nav-height);
+  pointer-events: none;
+}
+
+.nav-bar .container * {
+  pointer-events: auto;
+}
+
+.nav-bar.sidebar-collapsed .container {
+  max-width: calc(var(--layout-max-width) - var(--sidebar-icon-width));
+}
+
+.nav-bar .content {
+  position: relative;
+  z-index: 1;
+  padding-right: 32px;
+  padding-left: var(--sidebar-width);
+  flex-grow: 1;
+  pointer-events: none;
+}
+
+.nav-bar.sidebar-collapsed .content {
+  padding-left: var(--sidebar-icon-width);
+}
+
+.nav-bar .content-body {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: var(--nav-height);
+  background-color: var(--primary-bg-color);
+}
+
+.nav-bar .menu {
+  display: flex;
+}
+
+.nav-bar .menu-item {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  line-height: var(--nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--primary-txt-color);
+}
+
+.nav-bar .menu-item:hover {
+  color: rgb(72, 72, 230);
+}
+
+.nav-bar .sidebar-toggle {
+  flex-grow: 1;
+  padding-left: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.nav-bar .divider {
+  padding-left: var(--sidebar-width);
+  width: 100%;
+  height: 1px;
+}
+
+.nav-bar.sidebar-collapsed .divider {
+  padding-left: var(--sidebar-icon-width);
+}
+
+.nav-bar .divider-line {
+  background-color: #e2e2e3;
+  width: 100%;
+  height: 1px;
+}
diff --git a/v0/css/sidebar.css b/v0/css/sidebar.css
new file mode 100644
index 0000000..40f36d1
--- /dev/null
+++ b/v0/css/sidebar.css
@@ -0,0 +1,200 @@
+/* CSS for the side bar component on the left side of the application */
+
+.app-sidebar .main-content {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 3px);
+  overflow: auto;
+}
+
+.app-sidebar .header {
+  margin-bottom: 2.5rem;
+  height: var(--nav-height);
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.app-sidebar .header .logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: "Press Start 2P", monospace;
+  font-size: 1em;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.75);
+  white-space: nowrap;
+  transition: justify-content 0.5s ease;
+  width: 100%;
+  gap: 10px;
+}
+
+.logo-img {
+  width: var(--sidebar-icon-width);
+  height: auto;
+}
+
+.app-sidebar.sidebar--collapsed .header .logo {
+  justify-content: flex-start;
+}
+
+.app-sidebar .accordion {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: none;
+  outline: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.75);
+  cursor: pointer;
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.app-sidebar .accordion:hover {
+  background-color: #dddddd;
+}
+
+.app-sidebar .accordion-content {
+  padding: 0 20px;
+  max-height: 0;
+  overflow: hidden;
+  gap: 0.5em;
+  transition: max-height 0.2s ease-in-out;
+}
+
+.app-sidebar .accordion-content label {
+  font-size: 0.8rem;
+}
+
+.app-sidebar .accordion-content select {
+  width: 100%;
+  height: 2em;
+}
+.app-sidebar .accordion-content input[type="range"] {
+  width: 100%;
+}
+
+.app-sidebar .color {
+  display: flex;
+  justify-content: space-between;
+}
+.app-sidebar .accordion-option {
+  padding-bottom: 10px;
+}
+
+.app-sidebar .accordion-option .output {
+  float: right;
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: #963c10;
+}
+
+.app-sidebar .icon {
+  width: var(--sidebar-icon-width);
+  height: var(--sidebar-icon-width);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.75rem;
+}
+.legend {
+  padding-top: 0.2em;
+}
+
+#url-json-file {
+  width: 100%;
+  height: 2em;
+}
+
+#url-markdown-file {
+  width: 100%;
+  height: 2em;
+}
+
+.sidebar--collapsed {
+  width: var(--sidebar-icon-width);
+  overflow-x: hidden;
+}
+
+.body-pad {
+  padding: 0 2.5em 0 calc(var(--sidebar-icon-width) + 2.5em) !important;
+}
+
+.download-toggle {
+  width: 100%;
+  height: 1.5em;
+  position: relative;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.75);
+  border-radius: 25px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.download-toggle button {
+  text-align: center;
+  line-height: 50px;
+  color: black;
+  flex: 1;
+  margin: 0;
+  border: none;
+  background: white;
+  border-radius: 25px 0 0 25px;
+}
+
+.download-toggle .upload-method {
+  color: white;
+  background: #007bff;
+}
+
+.download-toggle button:last-child {
+  border-radius: 0 25px 25px 0;
+}
+
+.github-link {
+  margin-top: auto;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1px;
+  box-sizing: border-box;
+  background-color: var(--sidebar-bg-color);
+}
+
+.github-link .icon {
+  width: 30px;
+  height: 30px;
+}
+
+.github-link a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.75);
+}
+
+.software-version {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1px;
+  box-sizing: border-box;
+  background-color: var(--sidebar-bg-color);
+}
+
+.software-version span {
+  display: flex;
+  color: rgba(44, 44, 44, 0.75);
+  font-size: small;
+}
diff --git a/v0/css/visualization.css b/v0/css/visualization.css
index 59e9623..5c3d130 100644
--- a/v0/css/visualization.css
+++ b/v0/css/visualization.css
@@ -1,4 +1,4 @@
-/* CSS for visualization components including the chart and protein  */
+/* CSS for visualization components (i.e., tooltips, axes, ect..) */
 
 /* Tooltip Styles */
 .heatmap-tooltip,
diff --git a/v0/index.html b/v0/index.html
index 4970db4..c2b934c 100644
--- a/v0/index.html
+++ b/v0/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!-- Header of the Document -->
   <head>
     <meta charset="UTF-8" />
     <meta name="title" content="dms-viz" />
@@ -17,7 +16,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/flavicorn.ico" type="image/x-icon" />
     <title>dms-viz</title>
-    <!-- Link to the svg boxicons -->
     <link
       href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
       rel="stylesheet"
@@ -33,27 +31,54 @@
   <!-- Body Contents -->
   <body>
     <!-- Wrap the main contents in a container -->
-    <div class="container">
-      <!-- Header contains the logo and name of the Application -->
-      <header class="header" id="header">
-        <nav>
-          <div class="controls">
-            <div class="sidebar-toggle">
-              <i class="bx bx-x bx-menu" id="sidebar-toggle"></i>
+    <div class="app-container">
+      <!-- Header contains the logo and name -->
+      <header class="app-header">
+        <div class="nav-bar" id="nav-bar">
+          <div class="wrapper">
+            <div class="container">
+              <div class="content">
+                <div class="content-body">
+                  <div class="sidebar-toggle">
+                    <i class="bx bx-x bx-menu" id="sidebar-toggle"></i>
+                  </div>
+                  <nav class="menu">
+                    <a
+                      class="menu-item"
+                      href="https://dms-viz.github.io/dms-viz-docs/"
+                      tabindex="0"
+                      target="_blank"
+                    >
+                      <span>Documentation</span>
+                    </a>
+                    <a
+                      class="menu-item"
+                      href="https://dms-viz.github.io/dms-viz-docs/visualizing-data/vignettes/"
+                      tabindex="0"
+                      target="_blank"
+                    >
+                      <span>Examples</span>
+                    </a>
+                  </nav>
+                </div>
+              </div>
             </div>
           </div>
-        </nav>
+          <div class="divider">
+            <div class="divider-line"></div>
+          </div>
+        </div>
       </header>
       <!-- Sidebar contains plot configuration options -->
-      <div class="sidebar" , id="sidebar">
+      <div class="app-sidebar" , id="sidebar">
         <!-- Main Content -->
         <div class="main-content">
           <!-- Menu Title -->
           <div class="header">
-            <h1 class="logo">
+            <div class="logo">
               <img class="logo-img" src="/logo.png" alt="logo" />
               <span>dms-viz</span>
-            </h1>
+            </div>
           </div>
           <!-- Upload Options -->
           <div class="submenu">
@@ -317,30 +342,33 @@ <h1 class="logo">
         </div>
       </div>
       <!-- Main container with plot and protein content -->
-      <div class="main" id="main">
-        <div id="alertBanner" class="alert hidden">
-          <span id="alertMessage">Default message</span>
-          <span id="alertClose" class="alert-close"
-            ><i class="bx bx-x"></i
-          ></span>
-        </div>
-        <div id="loadingScreen">
-          <div class="spinner"></div>
-        </div>
-        <!-- Chart contains the main D3 chart -->
-        <div class="chart" id="chart"></div>
-        <!-- Protein contains the protein(s) -->
-        <div class="protein" id="viewport"></div>
-        <!-- Markdown description of the experiment -->
-        <div class="markdown" id="markdown" style="display: none">
-          <hr />
-          <details>
-            <summary>Click for Description</summary>
-            <div id="markdown-container"></div>
-          </details>
+      <div class="app-main" id="main">
+        <div class="container">
+          <div id="alertBanner" class="alert hidden">
+            <span id="alertMessage">Default message</span>
+            <span id="alertClose" class="alert-close"
+              ><i class="bx bx-x"></i
+            ></span>
+          </div>
+          <div id="loadingScreen">
+            <div class="spinner"></div>
+          </div>
+          <!-- Chart contains the main D3 chart -->
+          <div class="chart" id="chart"></div>
+          <!-- Protein contains the protein(s) -->
+          <div class="protein" id="viewport"></div>
+          <!-- Markdown description of the experiment -->
+          <div class="markdown" id="markdown" style="display: none">
+            <hr />
+            <details>
+              <summary>Click for Description</summary>
+              <div id="markdown-container"></div>
+            </details>
+          </div>
         </div>
       </div>
     </div>
+    <!-- Attach the code for `dms-viz` -->
     <script type="module" src="./js/main.js"></script>
     <script type="module">
       document.addEventListener("DOMContentLoaded", () => {
diff --git a/v0/js/ui.js b/v0/js/ui.js
index e6aa649..d21a7ed 100644
--- a/v0/js/ui.js
+++ b/v0/js/ui.js
@@ -6,6 +6,7 @@ export class UI {
     // UI Elements
     this.infoButton = document.getElementById("dataset-info-button");
     this.sidebar = document.getElementById("sidebar");
+    this.navbar = document.getElementById("nav-bar");
     this.toggle = document.getElementById("sidebar-toggle");
     this.headerpd = document.getElementById("header");
     this.mainpd = document.getElementById("main");
@@ -20,6 +21,8 @@ export class UI {
   toggleSidebar() {
     return new Promise((resolve) => {
       this.sidebar.classList.toggle("sidebar--collapsed");
+      this.navbar.classList.toggle("sidebar-collapsed");
+      this.mainpd.classList.toggle("sidebar-collapsed");
       this.toggle.classList.toggle("bx-x");
       this.headerpd.classList.toggle("body-pad");
       this.mainpd.classList.toggle("body-pad");

From f586bc729dde8edd63b39288d6208b68d439e858 Mon Sep 17 00:00:00 2001
From: Will Hannon <hannonww@gmail.com>
Date: Wed, 10 Apr 2024 16:12:04 -0700
Subject: [PATCH 2/4] Complete overhaul of CSS and UI

---
 v0/css/layout.css    |   7 +-
 v0/css/navbar.css    |  71 ++++++++++++-----
 v0/css/sidebar.css   |  26 +++----
 v0/css/variables.css |   1 +
 v0/index.html        |  68 ++++++++--------
 v0/js/ui.js          | 182 ++++++++++++++++++++++---------------------
 6 files changed, 196 insertions(+), 159 deletions(-)

diff --git a/v0/css/layout.css b/v0/css/layout.css
index 6cf4559..7d8e49b 100644
--- a/v0/css/layout.css
+++ b/v0/css/layout.css
@@ -1,6 +1,6 @@
 /* CSS for the application layout and resizing  */
 
-.app-header {
+.app-navbar {
   position: fixed;
   top: 0px;
   left: 0;
@@ -17,7 +17,6 @@
   background-color: var(--sidebar-bg-color);
   z-index: 100;
   overflow: scroll;
-  transition: 0.5s;
   display: flex;
   flex-direction: column;
 }
@@ -26,9 +25,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 3em;
+  margin-top: 10px;
   padding: 0 2.5em 0 calc(var(--sidebar-width) + 2.5em);
-  transition: 0.5s;
   min-height: 100vh;
 }
 
@@ -38,6 +36,7 @@
 
 .app-main .container {
   max-width: calc(var(--layout-max-width) - var(--sidebar-width));
+  min-width: var(--layout-min-width);
   width: 100%;
   box-sizing: border-box;
   margin-left: auto;
diff --git a/v0/css/navbar.css b/v0/css/navbar.css
index d0f1284..8afe4cd 100644
--- a/v0/css/navbar.css
+++ b/v0/css/navbar.css
@@ -1,6 +1,6 @@
 /* CSS for the navigation bar component at the top of the application */
 
-.nav-bar {
+.app-navbar {
   background-color: transparent;
   position: relative;
   height: var(--nav-height);
@@ -8,54 +8,60 @@
   white-space: nowrap;
 }
 
-.nav-bar .wrapper {
+.app-navbar .wrapper {
   padding: 0;
 }
 
-.nav-bar .container {
+.app-navbar .container {
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: calc(var(--layout-max-width) - var(--sidebar-width));
+  max-width: calc(var(--layout-max-width) + var(--sidebar-width));
+  min-width: calc(var(--layout-min-width) + var(--sidebar-width));
   height: var(--nav-height);
   pointer-events: none;
 }
 
-.nav-bar .container * {
+.app-navbar .container * {
   pointer-events: auto;
 }
 
-.nav-bar.sidebar-collapsed .container {
-  max-width: calc(var(--layout-max-width) - var(--sidebar-icon-width));
+.app-navbar.sidebar-collapsed .container {
+  max-width: calc(var(--layout-max-width) + var(--sidebar-icon-width));
+  min-width: calc(var(--layout-min-width) + var(--sidebar-icon-width));
 }
 
-.nav-bar .content {
+.app-navbar .content {
+  display: flex;
+  align-items: center;
   position: relative;
   z-index: 1;
   padding-right: 32px;
-  padding-left: var(--sidebar-width);
+  padding-left: calc(var(--sidebar-width) + 32px);
   flex-grow: 1;
   pointer-events: none;
 }
 
-.nav-bar.sidebar-collapsed .content {
-  padding-left: var(--sidebar-icon-width);
+.app-navbar.sidebar-collapsed .content {
+  padding-left: calc(var(--sidebar-icon-width) + 32px);
 }
 
-.nav-bar .content-body {
+.app-navbar .content-body {
   position: relative;
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  flex-grow: 1;
   height: var(--nav-height);
   background-color: var(--primary-bg-color);
+  pointer-events: auto;
 }
 
-.nav-bar .menu {
+.app-navbar .menu {
   display: flex;
 }
 
-.nav-bar .menu-item {
+.app-navbar .menu-item {
   display: flex;
   align-items: center;
   padding: 0 12px;
@@ -65,28 +71,51 @@
   color: var(--primary-txt-color);
 }
 
-.nav-bar .menu-item:hover {
+.app-navbar .menu-item:hover {
   color: rgb(72, 72, 230);
 }
 
-.nav-bar .sidebar-toggle {
-  flex-grow: 1;
-  padding-left: 32px;
+.app-navbar .sidebar-toggle {
+  margin-right: auto;
   display: flex;
   align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: rgb(226, 226, 226);
+  transition: background-color 0.2s ease-in-out;
+}
+
+.app-navbar .sidebar-toggle:hover {
+  background-color: rgb(200, 200, 200);
 }
 
-.nav-bar .divider {
+.app-navbar .sidebar-toggle i {
+  font-size: 20px;
+  color: var(--primary-txt-color);
+  margin-right: 8px;
+}
+
+.app-navbar .sidebar-toggle span {
+  line-height: var(--nav-height);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--primary-txt-color);
+}
+.app-navbar .divider {
   padding-left: var(--sidebar-width);
   width: 100%;
   height: 1px;
 }
 
-.nav-bar.sidebar-collapsed .divider {
+.app-navbar.sidebar-collapsed .divider {
   padding-left: var(--sidebar-icon-width);
 }
 
-.nav-bar .divider-line {
+.app-navbar .divider-line {
   background-color: #e2e2e3;
   width: 100%;
   height: 1px;
diff --git a/v0/css/sidebar.css b/v0/css/sidebar.css
index 40f36d1..df5b5fa 100644
--- a/v0/css/sidebar.css
+++ b/v0/css/sidebar.css
@@ -7,7 +7,7 @@
   overflow: auto;
 }
 
-.app-sidebar .header {
+.app-sidebar .menu-title {
   margin-bottom: 2.5rem;
   height: var(--nav-height);
   font-size: 1.25rem;
@@ -15,7 +15,7 @@
   color: rgba(0, 0, 0, 0.75);
 }
 
-.app-sidebar .header .logo {
+.app-sidebar .menu-title .logo {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -24,7 +24,6 @@
   font-weight: bold;
   color: rgba(0, 0, 0, 0.75);
   white-space: nowrap;
-  transition: justify-content 0.5s ease;
   width: 100%;
   gap: 10px;
 }
@@ -34,10 +33,6 @@
   height: auto;
 }
 
-.app-sidebar.sidebar--collapsed .header .logo {
-  justify-content: flex-start;
-}
-
 .app-sidebar .accordion {
   width: 100%;
   display: flex;
@@ -63,7 +58,6 @@
   max-height: 0;
   overflow: hidden;
   gap: 0.5em;
-  transition: max-height 0.2s ease-in-out;
 }
 
 .app-sidebar .accordion-content label {
@@ -116,11 +110,6 @@
   height: 2em;
 }
 
-.sidebar--collapsed {
-  width: var(--sidebar-icon-width);
-  overflow-x: hidden;
-}
-
 .body-pad {
   padding: 0 2.5em 0 calc(var(--sidebar-icon-width) + 2.5em) !important;
 }
@@ -198,3 +187,14 @@
   color: rgba(44, 44, 44, 0.75);
   font-size: small;
 }
+
+/* Collapse the Sidebar */
+
+.app-sidebar.sidebar-collapsed {
+  width: var(--sidebar-icon-width);
+  overflow-x: hidden;
+}
+
+.app-sidebar.sidebar-collapsed .menu-title .logo {
+  justify-content: flex-start;
+}
diff --git a/v0/css/variables.css b/v0/css/variables.css
index b0c5526..d36c69e 100644
--- a/v0/css/variables.css
+++ b/v0/css/variables.css
@@ -19,6 +19,7 @@
 /* Layout */
 :root {
   --layout-max-width: 1440px;
+  --layout-min-width: 600px;
 }
 
 /* Navbar */
diff --git a/v0/index.html b/v0/index.html
index c2b934c..bb5aaaf 100644
--- a/v0/index.html
+++ b/v0/index.html
@@ -33,48 +33,48 @@
     <!-- Wrap the main contents in a container -->
     <div class="app-container">
       <!-- Header contains the logo and name -->
-      <header class="app-header">
-        <div class="nav-bar" id="nav-bar">
-          <div class="wrapper">
-            <div class="container">
-              <div class="content">
-                <div class="content-body">
-                  <div class="sidebar-toggle">
-                    <i class="bx bx-x bx-menu" id="sidebar-toggle"></i>
-                  </div>
-                  <nav class="menu">
-                    <a
-                      class="menu-item"
-                      href="https://dms-viz.github.io/dms-viz-docs/"
-                      tabindex="0"
-                      target="_blank"
-                    >
-                      <span>Documentation</span>
-                    </a>
-                    <a
-                      class="menu-item"
-                      href="https://dms-viz.github.io/dms-viz-docs/visualizing-data/vignettes/"
-                      tabindex="0"
-                      target="_blank"
-                    >
-                      <span>Examples</span>
-                    </a>
-                  </nav>
-                </div>
+      <header class="app-navbar" id="app-navbar">
+        <div class="wrapper">
+          <div class="container">
+            <div class="content">
+              <button class="sidebar-toggle" id="sidebar-toggle">
+                <i class="bx bx-horizontal-left"></i>
+                <span>Collapse Sidebar</span>
+              </button>
+              <div class="content-body">
+                <nav class="menu">
+                  <a
+                    class="menu-item"
+                    href="https://dms-viz.github.io/dms-viz-docs/"
+                    tabindex="0"
+                    target="_blank"
+                  >
+                    <span>Documentation</span>
+                  </a>
+                  <a
+                    class="menu-item"
+                    href="https://dms-viz.github.io/dms-viz-docs/visualizing-data/vignettes/"
+                    tabindex="0"
+                    target="_blank"
+                  >
+                    <span>Examples</span>
+                  </a>
+                </nav>
               </div>
             </div>
           </div>
-          <div class="divider">
-            <div class="divider-line"></div>
-          </div>
+        </div>
+        <div class="divider">
+          <div class="divider-line"></div>
         </div>
       </header>
+
       <!-- Sidebar contains plot configuration options -->
-      <div class="app-sidebar" , id="sidebar">
+      <div class="app-sidebar" , id="app-sidebar">
         <!-- Main Content -->
         <div class="main-content">
           <!-- Menu Title -->
-          <div class="header">
+          <div class="menu-title">
             <div class="logo">
               <img class="logo-img" src="/logo.png" alt="logo" />
               <span>dms-viz</span>
@@ -342,7 +342,7 @@
         </div>
       </div>
       <!-- Main container with plot and protein content -->
-      <div class="app-main" id="main">
+      <div class="app-main" id="app-main">
         <div class="container">
           <div id="alertBanner" class="alert hidden">
             <span id="alertMessage">Default message</span>
diff --git a/v0/js/ui.js b/v0/js/ui.js
index d21a7ed..2458243 100644
--- a/v0/js/ui.js
+++ b/v0/js/ui.js
@@ -3,48 +3,67 @@ import "tippy.js/dist/tippy.css";
 
 export class UI {
   constructor() {
-    // UI Elements
-    this.infoButton = document.getElementById("dataset-info-button");
-    this.sidebar = document.getElementById("sidebar");
-    this.navbar = document.getElementById("nav-bar");
+    /* Main UI elements */
+    this.sidebar = document.getElementById("app-sidebar");
+    this.navbar = document.getElementById("app-navbar");
+    this.main = document.getElementById("app-main");
+
+    /* Elements responsible for toggling the sidebar */
     this.toggle = document.getElementById("sidebar-toggle");
-    this.headerpd = document.getElementById("header");
-    this.mainpd = document.getElementById("main");
+
+    /* Elements responsible for toggling the download buttons */
     this.localFile = document.getElementById("local-file");
     this.remoteFile = document.getElementById("remote-file");
-    this.accordionParent = document.getElementById("sidebar");
+
+    /* Register event listeners */
     this.registerEventListeners();
     this.registerTooltips();
   }
 
-  // UI functions to attach to event listeners
+  /* Method to toggle sidebar classes */
   toggleSidebar() {
-    return new Promise((resolve) => {
-      this.sidebar.classList.toggle("sidebar--collapsed");
-      this.navbar.classList.toggle("sidebar-collapsed");
-      this.mainpd.classList.toggle("sidebar-collapsed");
-      this.toggle.classList.toggle("bx-x");
-      this.headerpd.classList.toggle("body-pad");
-      this.mainpd.classList.toggle("body-pad");
-
-      this.sidebar.addEventListener("transitionend", resolve, { once: true });
-    });
-  }
-
-  toggleAccordion(btn) {
-    if (this.sidebar.classList.contains("sidebar--collapsed")) {
-      this.toggleSidebar().then(() => {
-        this.expandAccordionContent(btn);
+    let ui = this;
+    // Add the collapsed class to each of the main elements
+    ui.sidebar.classList.toggle("sidebar-collapsed");
+    ui.navbar.classList.toggle("sidebar-collapsed");
+    ui.main.classList.toggle("sidebar-collapsed");
+    // Select all of the accordion buttons
+    const accordions = document.querySelectorAll(".accordion");
+    // Check if the sidebar is collapsed
+    if (ui.sidebar.classList.contains("sidebar-collapsed")) {
+      // Close all of the sub menus
+      accordions.forEach((accordion) => {
+        accordion.classList.remove("is-open");
+        let content = accordion.nextElementSibling;
+        content.style.maxHeight = null;
       });
+      // Change the icon and text of the toggle button
+      document.querySelector("#sidebar-toggle i").className =
+        "bx bx-horizontal-right";
+      document.querySelector("#sidebar-toggle span").textContent =
+        "Expand Sidebar";
     } else {
-      this.expandAccordionContent(btn);
+      // Change the icon and text of the toggle button
+      document.querySelector("#sidebar-toggle i").className =
+        "bx bx-horizontal-left";
+      document.querySelector("#sidebar-toggle span").textContent =
+        "Collapse Sidebar";
     }
+    // Finally, dispatch a resize event to trigger plot resizing
+    window.dispatchEvent(new Event("resize"));
   }
 
-  expandAccordionContent(btn) {
+  /* Method to open/close the sidebar accordion menus */
+  toggleAccordion(btn) {
+    let ui = this;
+    // Toggle the class of the accordion button
     btn.classList.toggle("is-open");
+    // Open the side if it is closed
+    if (ui.sidebar.classList.contains("sidebar-collapsed")) {
+      ui.toggleSidebar();
+    }
+    // Open the accordion content if it is closed
     let content = btn.nextElementSibling;
-
     if (content.style.maxHeight) {
       content.style.maxHeight = null;
     } else {
@@ -52,54 +71,7 @@ export class UI {
     }
   }
 
-  registerEventListeners() {
-    this.infoButton.addEventListener("click", () =>
-      this.showDatasetDescription()
-    );
-    this.toggle.addEventListener("click", () => this.handleSidebarToggle());
-    this.localFile.addEventListener("click", (event) =>
-      this.toggleDownload(event)
-    );
-    this.remoteFile.addEventListener("click", (event) =>
-      this.toggleDownload(event)
-    );
-    this.accordionParent.addEventListener("click", (event) => {
-      const accordion = event.target.closest(".accordion");
-      if (accordion) {
-        this.toggleAccordion(accordion);
-      }
-    });
-
-    // Shrink the sidebar on load if the screen is less than 1000px
-    window.addEventListener("load", () => {
-      const mediaQuery = window.matchMedia("(max-width: 1000px)");
-      if (mediaQuery.matches) {
-        this.handleSidebarToggle();
-      } else {
-        window.dispatchEvent(new Event("resize"));
-        // Expand the chart accordion on load by default if the screen is big enough
-        const chartBtn = document.getElementById("chart-btn");
-        this.expandAccordionContent(chartBtn);
-      }
-    });
-  }
-
-  registerTooltips() {
-    tippy(".bx-info-circle", {
-      content: "Click here for more information about the dataset",
-      placement: "right",
-      theme: "select-info",
-      animation: "scale",
-    });
-  }
-
-  showDatasetDescription() {
-    const ui = this;
-    // Show the alert banner with a dataset description
-    const alert = new Alerts();
-    alert.showAlert(ui.datasetDescription, "info");
-  }
-
+  /* Method to toggle download buttons between local and remote */
   toggleDownload({ target: element }) {
     const accordianButton =
       element.parentNode.parentNode.parentNode.previousElementSibling;
@@ -129,22 +101,58 @@ export class UI {
     }
   }
 
-  handleSidebarToggle() {
-    this.toggleSidebar()
-      .then(() => {
-        const accordions = document.querySelectorAll(".accordion");
-        accordions.forEach((accordion) => {
-          accordion.classList.remove("is-open");
-          let content = accordion.nextElementSibling;
-          content.style.maxHeight = null;
-        });
-      })
-      .then(() => {
+  /* Method show the dataset description alert */
+  showDatasetDescription() {
+    const ui = this;
+    // Show the alert banner with a dataset description
+    const alert = new Alerts();
+    alert.showAlert(ui.datasetDescription, "info");
+  }
+
+  /* Register the event listeners */
+  registerEventListeners() {
+    // Toggle the sidebar when the toggle button is clicked
+    this.toggle.addEventListener("click", () => this.toggleSidebar());
+    // Toggle the accordion menus when clicked
+    this.sidebar.addEventListener("click", (event) => {
+      const accordion = event.target.closest(".accordion");
+      if (accordion) {
+        this.toggleAccordion(accordion);
+      }
+    });
+    // Toggle the download buttons when clicked
+    this.localFile.addEventListener("click", (event) =>
+      this.toggleDownload(event)
+    );
+    this.remoteFile.addEventListener("click", (event) =>
+      this.toggleDownload(event)
+    );
+    // Toggle the sidebar if the window is too small
+    window.addEventListener("load", () => {
+      const mediaQuery = window.matchMedia("(max-width: 1200px)");
+      if (mediaQuery.matches) {
+        this.toggleSidebar();
+      } else {
         window.dispatchEvent(new Event("resize"));
-      });
+        const chartBtn = document.getElementById("chart-btn");
+        this.toggleAccordion(chartBtn);
+      }
+    });
+  }
+
+  /* Register the information tooltips from tippy */
+  registerTooltips() {
+    // Dataset description tooltip
+    tippy(".bx-info-circle", {
+      content: "Click here for more information about the dataset",
+      placement: "right",
+      theme: "select-info",
+      animation: "scale",
+    });
   }
 }
 
+// Class for to handle alert messages
 export class Alerts {
   constructor() {
     this.alertBanner = document.getElementById("alertBanner");

From 8e51014cb42048d304599f24a5ac0c997bfe543e Mon Sep 17 00:00:00 2001
From: Will Hannon <hannonww@gmail.com>
Date: Wed, 10 Apr 2024 16:17:35 -0700
Subject: [PATCH 3/4] Fix broken dataset button

---
 v0/js/ui.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/v0/js/ui.js b/v0/js/ui.js
index 2458243..5b40fdd 100644
--- a/v0/js/ui.js
+++ b/v0/js/ui.js
@@ -15,6 +15,9 @@ export class UI {
     this.localFile = document.getElementById("local-file");
     this.remoteFile = document.getElementById("remote-file");
 
+    /* Button to show dataset information */
+    this.infoButton = document.getElementById("dataset-info-button");
+
     /* Register event listeners */
     this.registerEventListeners();
     this.registerTooltips();
@@ -127,6 +130,10 @@ export class UI {
     this.remoteFile.addEventListener("click", (event) =>
       this.toggleDownload(event)
     );
+    // Show the dataset description alert when clicked
+    this.infoButton.addEventListener("click", () =>
+      this.showDatasetDescription()
+    );
     // Toggle the sidebar if the window is too small
     window.addEventListener("load", () => {
       const mediaQuery = window.matchMedia("(max-width: 1200px)");

From 9403ce404579ae22d0cf90aa4eec51391faffa7b Mon Sep 17 00:00:00 2001
From: Will Hannon <hannonww@gmail.com>
Date: Wed, 10 Apr 2024 16:21:21 -0700
Subject: [PATCH 4/4] Shrink the font size of alerts

---
 v0/css/components.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/v0/css/components.css b/v0/css/components.css
index 84408ad..6e65e43 100644
--- a/v0/css/components.css
+++ b/v0/css/components.css
@@ -2,12 +2,13 @@
 
 /* Alert Styles */
 .alert {
-  padding: 15px;
+  padding: 10px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
   position: relative;
   padding-right: 35px;
+  font-size: 14px;
 }
 
 .alert.error {
@@ -46,7 +47,7 @@
 .alert-close {
   position: absolute;
   right: 10px;
-  top: 15px;
+  top: 10px;
   cursor: pointer;
 }