From 10c3d5178cf10e056fd3fc1dd2cb05717015ad6b Mon Sep 17 00:00:00 2001
From: trippjoe <tripp.j@hotmail.com>
Date: Sun, 27 Mar 2022 17:26:57 -0400
Subject: [PATCH] offscreen sidebar

---
 package-lock.json   | 35 ++++++++++++++++++++++++++++
 package.json        |  1 +
 src/css/index.css   | 31 ++++++++++++++++++-------
 src/html/index.html | 56 ++++++++++++++++++++++++++-------------------
 4 files changed, 91 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4fdfae6..b1b2ce4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
+        "bootstrap": "^5.1.3",
         "electron-squirrel-startup": "^1.0.0"
       },
       "devDependencies": {
@@ -699,6 +700,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1120,6 +1131,18 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7243,6 +7266,12 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+      "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
+      "peer": true
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -7577,6 +7606,12 @@
       "dev": true,
       "optional": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 6e5ed76..4b38e89 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     }
   },
   "dependencies": {
+    "bootstrap": "^5.1.3",
     "electron-squirrel-startup": "^1.0.0"
   },
   "devDependencies": {
diff --git a/src/css/index.css b/src/css/index.css
index cf01496..dbdb31a 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -23,7 +23,8 @@ header{
 }
 
 .logo {
-  width: 20%;
+  width: 25vw;
+  margin: 0 35vw;
   -webkit-user-drag: none;
 }
 
@@ -37,6 +38,19 @@ nav {
   gap: 3rem;
 }
 
+.offcanvas-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--bg-blue);
+  border-right: 1px solid darkgray;
+  padding: 1rem;
+  gap: 3rem;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
 .nav-link {
   display: flex;
   justify-content: center;
@@ -45,14 +59,10 @@ nav {
 }
 
 .nav-img {
-  width: 80%;
+  width: 100%;
   -webkit-user-drag: none;
 }
 
-nav > .settings {
-  margin-top: 340px;
-}
-
 .game-bg{
   position:fixed;
   width: 110%;
@@ -71,14 +81,14 @@ nav > .settings {
 .game-logo {
   position: fixed;
   width: 40%;
-  padding: 10px;
+  padding: 10px 15px;
   z-index: -1;
 }
 
 .game-box {
   z-index: 1;
   padding-left: 2em;
-  padding-top: 53%;
+  padding-top: 45%;
   min-height: 100%;
 }
 
@@ -88,4 +98,9 @@ nav > .settings {
   font-weight: bold;
   font-size: xxx-large;
   letter-spacing: 3px;
+}
+
+.offcanvas-start {
+  width: 100px;
+  background-color: var(--bg-blue);
 }
\ No newline at end of file
diff --git a/src/html/index.html b/src/html/index.html
index 8e71710..86de2ad 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <title>OpenGOAL Launcher</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+  <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
   <link rel="stylesheet" href="../css/index.css" />
   <script defer src="../js/render.js"></script>
@@ -17,38 +17,46 @@
     </header>
 
     <div class="row">
-      <nav class="col-1">
-        <a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="Jak & Daxter: The Precursor Legacy">
-          <img src="../assets/images/jak-tpl.png" class="nav-img">
-        </a>
-        <a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="Jak 2">
-          <img src="../assets/images/jak-2.png" class="nav-img">
-        </a>
-        <a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="Jak 3">
-          <img src="../assets/images/jak-3.png" class="nav-img">
-        </a>
-        <a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
-          title="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>
-      </nav>
-      <div class="col-11 p-0">
+      <div class="p-0">
         <img class="game-bg" src="../assets/images/jak1-bg.png" alt="Rock Village">
         <img class="model" src="../assets/images/jak1-model.png" alt="Jak">
         <img class="game-logo" src="../assets/images/jak1-logo.png" alt="Jak & Daxter: The Precursor Legacy">
         <div class="game-box">
+          <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
+            aria-controls="offcanvasExample">
+            >
+          </a>
           <button type="button" class="btn btn-success btn-play">PLAY</button>
         </div>
       </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">
+        <img src="../assets/images/jak-tpl.png" class="nav-img">
+      </a>
+      <a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2">
+        <img src="../assets/images/jak-2.png" class="nav-img">
+      </a>
+      <a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3">
+        <img src="../assets/images/jak-3.png" class="nav-img">
+      </a>
+      <a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
+        title="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=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
     </script>