Integrate nav

- other minor refactors

src/components/nav/NavBar.vue

@@ -1,31 +1,50 @@
 <template>
-  <div class="topnav rounded">
+  <div class="topnav">
     <div class="left">
       <div class="btn">
-        <PlayBtn />
+        <NavButtons />
       </div>
+
       <div class="info">
-        <div class="title">Playlists</div>
+        <div class="title" v-if="$route.name == 'Playlists'">Playlists</div>
+        <div class="folder" v-else-if="$route.name == 'FolderView'">
+          <div class="play">
+            <PlayBtnRect />
+          </div>
+          <div class="fname">
+            <div class="icon image"></div>
+            <div class="ellip">
+              {{ $route.params.path.split("/").splice(-1)[0] }}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
+
     <div class="center rounded">
       <Loader />
     </div>
-    <div class="right"></div>
+    <div class="right">
+      <Search />
+    </div>
   </div>
 </template>
 
 <script setup>
-import PlayBtn from "../shared/PlayBtn.vue";
+import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import Search from "./Search.vue";
 </script>
 
 <style lang="scss">
 .topnav {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  padding: 0 $small;
+  grid-template-columns: 1fr max-content max-content;
+  padding-bottom: 1rem;
   margin: $small $small 0 $small;
+  border-bottom: 1px solid $gray3;
+  height: 3rem;
 
   .left {
     display: flex;
@@ -37,12 +56,46 @@ import Loader from "../shared/Loader.vue";
         font-size: 1.5rem;
         font-weight: bold;
       }
+
+      .folder {
+        display: flex;
+        gap: 1rem;
+
+        .playbtnrect {
+          height: 2.25rem;
+        }
+
+        .fname {
+          position: relative;
+          padding-left: 2.25rem;
+          background-color: $gray4;
+          border-radius: $small;
+          height: 2.25rem;
+          display: flex;
+          align-items: center;
+          padding-right: $small;
+
+          .icon {
+            position: absolute;
+            left: $small;
+            top: $small;
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: url("../../assets/icons/folder.fill.svg");
+          }
+        }
+      }
     }
   }
 
   .center {
     display: grid;
     place-items: center;
+    margin-right: 1rem;
+  }
+
+  .right {
+    width: 100%;
   }
 }
 </style>

src/components/nav/NavButtons.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="back-forward">
+    <div class="back image" @click="$router.back()"></div>
+    <div class="forward image" @click="$router.forward()"></div>
+  </div>
+</template>
+
+<script setup>
+console.log();
+</script>
+
+<style lang="scss">
+#back-forward {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding-right: 1rem;
+  margin-right: $small;
+  border-right: 1px solid $gray3;
+
+  & > div {
+    background-color: $gray4;
+    border-radius: $small;
+    height: 2.25rem;
+    width: 2.25rem;
+    cursor: pointer;
+    background-size: 2rem;
+    transition: all .25s ease-in-out;
+
+    &:hover {
+      background-color: $accent;
+    }
+  }
+
+  .back {
+    background-image: url("../../assets/icons/right-arrow.svg");
+    transform: rotate(180deg);
+  }
+
+  .forward {
+    background-image: url("../../assets/icons/right-arrow.svg");
+  }
+}
+</style>

src/components/nav/Search.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="nav-search">
+    <form>
+      <input
+        type="search"
+        name=""
+        id=""
+        placeholder="Search this playlist"
+        class="rounded"
+      />
+    </form>
+  </div>
+</template>
+
+<style lang="scss">
+#nav-search {
+  form {
+    display: flex;
+    gap: $small;
+
+    input[type="search"] {
+      background-color: $gray5;
+      border: none;
+      padding: $small;
+      width: 100%;
+      min-width: 24rem;
+      color: $white;
+      font-size: 1rem;
+
+      &:focus {
+        outline: solid $accent;
+      }
+    }
+  }
+}
+</style>