add search page

src/components/LeftSidebar/Navigation.vue

@@ -5,7 +5,8 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu?.params }"
     >
-      <div class="nav-button" id="home-button">
+      <div v-if="menu.separator" :class="{ separator: menu.separator }"></div>
+      <div class="nav-button" id="home-button" v-else>
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -19,6 +20,8 @@
 import PlaylistSvg from "../../assets/icons/playlist.svg";
 import FolderSvg from "../../assets/icons/folder.svg";
 import SettingsSvg from "../../assets/icons/settings.svg";
+import SearchSvg from "../../assets/icons/search.svg";
+
 import { Routes } from "@/composables/enums";
 
 const menus = [
@@ -33,6 +36,14 @@ const menus = [
     params: { path: "$home" },
     icon: FolderSvg,
   },
+  {
+    name: "search",
+    route_name: Routes.search,
+    icon: SearchSvg,
+  },
+  {
+    separator: true,
+  },
   {
     name: "settings",
     route_name: Routes.settings,
@@ -44,8 +55,8 @@ const menus = [
 <style lang="scss">
 .side-nav-container {
   color: #fff;
-  margin: 1rem 0;
   text-transform: capitalize;
+  margin-top: 1rem;
 
   .nav-button {
     border-radius: $small;

src/components/LeftSidebar/nowPlaying.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="now-playing-card t-center rounded">
-    <div>
-      <SongCard :track="currenttrack" />
-      <div class="l-track-time">
-        <span class="rounded">{{ formatSeconds(duration.current) }}</span
-        ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
-      </div>
-      <Progress />
+    <SongCard :track="queue.currenttrack" />
+    <div class="l-track-time">
+      <span class="rounded">{{ formatSeconds(duration.current) }}</span
+      ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
     </div>
+    <Progress />
     <HotKeys />
   </div>
 </template>
@@ -21,22 +19,20 @@ import Progress from "./NP/Progress.vue";
 import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
-const { currenttrack, duration } = queue;
+const { duration } = queue;
 </script>
 <style lang="scss">
 .now-playing-card {
   padding: 1rem;
   width: 100%;
   display: grid;
-  grid-template-rows: 1fr max-content;
-  position: relative;
+  grid-template-rows: 1fr max-content max-content max-content;
   gap: 1rem;
 
   .l-track-time {
     display: flex;
     justify-content: space-between;
     opacity: 0.8;
-    margin-top: $small;
 
     span {
       font-size: small;