cleaned up html, css, & js. updated the navbar style

src/pages/main/index.css

@@ -21,39 +21,6 @@ body {
   -webkit-user-drag: none;
 }
 
-nav {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: var(--bg-blue);
-  padding: 1rem;
-  gap: 3rem;
-}
-
-.offcanvas-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: var(--bg-blue);
-  padding: 1rem;
-  gap: 3rem;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.nav-link {
-  display: flex;
-  justify-content: center;
-  -webkit-user-drag: none;
-  padding: 0;
-}
-
-.nav-img {
-  width: 100%;
-  -webkit-user-drag: none;
-}
-
 .video-container {
   position: absolute;
   z-index: -1;
@@ -74,31 +41,15 @@ nav {
   width: 100%;
   height: 100vh;
   -webkit-user-drag: none;
-  /* z-index: -2; */
 }
 
-/* this refers to the game logo, jak: tpl */
+/* buttons div */
-#logo {
-  width: 50%;
-  margin: 15px 0;
-  -webkit-user-drag: none;
-}
-
-#toggle-sidebar {
-  height: 100vh;
-  border-radius: 0;
-  background-color: var(--bg-blue);
-  border-color: var(--bg-blue);
-  padding-top: 50vh;
-}
-
-/* this is the buttons div */
 #buttons {
   margin: 40px 0;
   gap: 0 10px;
 }
 
-/* this is the config and play button */
+/* config and play button */
 #buttons > button {
   background-color: teal;
   width: 30%;
@@ -108,7 +59,62 @@ nav {
   letter-spacing: 3px;
 }
 
-.offcanvas-start {
+
-  width: 100px;
+/* START of sidenav styling */
+.sidenav{
+  width: 3rem;
+  height: 100vh;
   background-color: var(--bg-blue);
-}
+  opacity: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition: 200ms ease;
+}
+
+.sidenav-nav{
+  list-style: none;
+  padding: 0;
+  margin: 5px;
+}
+
+.sidenav:hover {
+  width: 5rem;
+  opacity: 100%;
+}
+
+.nav-item {
+  width: 100%;
+}
+
+.nav-link {
+  display: flex;
+  justify-content: center;
+  -webkit-user-drag: none;
+  padding: 0;
+  filter: grayscale(100%);
+  transition: 400ms ease;
+}
+
+.nav-link:hover{
+  filter: grayscale(0%);
+}
+
+.nav-img {
+  width: 100%;
+  -webkit-user-drag: none;
+}
+
+.nav-item:first-child  {
+  margin-bottom: 2rem;
+}
+
+.nav-link:last-child {
+  opacity: 50%;
+}
+
+.nav-link:last-child:hover {
+  opacity: 100%;
+}
+
+/* END of sidenav styling */

src/pages/main/index.html

@@ -23,11 +23,26 @@
     <div class="row">
       <!-- sidebar toggle button, it runs the entire vertical height -->
       <div class="col-1">
-        <div class="row justify-content-center">
+        <div class="sidenav">
-          <a id="toggle-sidebar" class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
+          <ul class="sidenav-nav">
-            aria-controls="offcanvasExample" onclick="openNav()">
+            <li class="nav-item">
-            >
+              <a class="nav-link" data-bs-toggle="tooltip" data-bs-placement="right"
-          </a>
+                title="Jak & Daxter: The Precursor Legacy">
+                <img src="../../assets/images/games/jak-tpl.png" class="nav-img">
+              </a>
+            </li>
+
+            <li class="nav-item">
+              <a class="nav-link settings" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Settings"
+                onclick="send('settings')">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
+                  viewBox="0 0 16 16">
+                  <path fill-rule="evenodd"
+                    d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
 
@@ -46,24 +61,6 @@
         </div>
       </div>
     </div>
-
-    <!-- OFFCANVAS SIDEBAR MENU -->
-    <div class="offcanvas offcanvas-start" id="sidebar" aria-labelledby="sidebar-label">
-      <div class="offcanvas-body">
-        <a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="Jak & Daxter: The Precursor Legacy" onclick="navBarClick('jak1')">
-          <img src="../../assets/images/games/jak-tpl.png" class="nav-img">
-        </a>
-        <a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="Settings" onclick="navBarClick('settings')">
-          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
-            viewBox="0 0 16 16">
-            <path fill-rule="evenodd"
-              d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
-          </svg>
-        </a>
-      </div>
-    </div>
     <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
 </body>
 

src/pages/main/render.js

@@ -6,39 +6,11 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 
 const body = document.querySelector('body');
 const container = document.querySelector('.container');
-const offcanvas = document.querySelector(".offcanvas-start");
-let backdrop = document.querySelector('.offcanvas-backdrop');
 const background = document.querySelector('#background');
 const configButton = document.querySelector("#config");
 
 const { send, receive, handleStatus, handleConsole } = window.electronAPI;
 
-function openNav() {
-    container.style.marginLeft = "100px";
-    offcanvas.classList.add("show");
-    backdrop = document.querySelector('.offcanvas-backdrop');
-}
-
-function closeNav() {
-    container.style.marginLeft = "0";
-    offcanvas.classList.remove("show");
-    offcanvas.style.visibility = "hidden";
-    offcanvas.ariaHidden = "true";
-    offcanvas.ariaModal = "false";
-    backdrop.classList.remove('show');
-    body.style.removeProperty('overflow');
-    body.style.removeProperty('padding');
-}
-
-function navBarClick(target) {
-    closeNav();
-    if (target.includes("settings")) {
-        send('settings');
-    } else {
-        changeGame(target);
-    }
-}
-
 function changeGame(game) {
     switch (game) {
         case "jak1":