From e2dc9e4c0a7ca3c43b998251c439cda9d38c9562 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 17 Dec 2021 18:41:00 -0800
Subject: [PATCH] added navigation bar, always present at the moment

---
 resources/cider-ui/style.less                 | 41 +++++++++++++++++++
 resources/cider-ui/views/main.ejs             |  4 ++
 resources/cider-ui/views/svg/chevron-left.svg |  1 +
 .../cider-ui/views/svg/chevron-right.svg      |  1 +
 4 files changed, 47 insertions(+)
 create mode 100644 resources/cider-ui/views/svg/chevron-left.svg
 create mode 100644 resources/cider-ui/views/svg/chevron-right.svg

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index c4bb6830..7ea4e4ce 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -19,6 +19,7 @@
   --keyColor-deepPressed: #ff8a9c;
   --keyColor-deepPressed-rgb: 255, 138, 156;
   --keyColor-disabled: rgba(250, 88, 106, 0.35);
+  --navigationBarHeight: 38px;
 }
 
 html,
@@ -220,6 +221,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   top: 0;
   left: 0;
   padding: 32px;
+  padding-top: calc(var(--navigationBarHeight) * 2);
   width: 100%;
 }
 
@@ -1489,6 +1491,45 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+#navigation-bar {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.25);
+  height: var(--navigationBarHeight);
+  display: flex;
+  align-items: center;
+  padding: 0px 6px;
+  z-index: 1;
+  position: sticky;
+  top: 0;
+  left: 0;
+  backdrop-filter: blur(16px) saturate(180%);
+  border-bottom: 1px solid rgb(200 200 200 / 10%);
+  .nav-item {
+    appearance: none;
+    border: 0px;
+    height: 32px;
+    width: 42px;
+    background: transparent;
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(200, 200, 200, 0.8);
+    margin: 2px;
+    border-radius: 3px;
+    &:hover {
+      background: var(--selected);
+    }
+    &:active {
+      background: var(--selected-click);
+    }
+    > svg {
+      width: 8px;
+      pointer-events: none;
+    }
+  }
+}
+
 .reload-btn {
   background: rgb(86 86 86 / 52%);
   border-radius: 100%;
diff --git a/resources/cider-ui/views/main.ejs b/resources/cider-ui/views/main.ejs
index 0f1d3471..950b07d9 100644
--- a/resources/cider-ui/views/main.ejs
+++ b/resources/cider-ui/views/main.ejs
@@ -240,6 +240,10 @@
                 </div>
             </div>
             <div id="app-content">
+                <div id="navigation-bar">
+                    <button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
+                    <button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
+                </div>
                 <!-- Artist Page -->
                 <transition name="wpfade">
                     <template v-if="page == 'artist-page' && artistPage.data.attributes">
diff --git a/resources/cider-ui/views/svg/chevron-left.svg b/resources/cider-ui/views/svg/chevron-left.svg
new file mode 100644
index 00000000..baac5e11
--- /dev/null
+++ b/resources/cider-ui/views/svg/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
\ No newline at end of file
diff --git a/resources/cider-ui/views/svg/chevron-right.svg b/resources/cider-ui/views/svg/chevron-right.svg
new file mode 100644
index 00000000..1dca9de0
--- /dev/null
+++ b/resources/cider-ui/views/svg/chevron-right.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="chevron-right" fill="currentColor" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-chevron-right fa-w-10 fa-7x"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" class=""/></svg>
\ No newline at end of file