add search page

src/components/nav/NavBar.vue

@@ -2,7 +2,12 @@
   <div class="topnav">
     <div class="left">
       <NavButtons />
-      <div class="info">
+      <div
+        class="info"
+        :style="{
+          overflow: $route.name === Routes.search ? 'visible' : 'hidden',
+        }"
+      >
         <APTitle v-show="showAPTitle" />
         <SimpleTitle
           v-show="$route.name == Routes.playlists"
@@ -13,6 +18,7 @@
           :text="'Settings'"
         />
         <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
+        <SearchTitle v-show="$route.name == Routes.search" />
       </div>
     </div>
 
@@ -36,6 +42,7 @@ import APTitle from "./Titles/APTitle.vue";
 import useNavStore from "@/stores/nav";
 
 import { computed } from "@vue/reactivity";
+import SearchTitle from "./Titles/SearchTitle.vue";
 
 const route = useRoute();
 const nav = useNavStore();
@@ -89,8 +96,8 @@ watch(
     gap: 1rem;
 
     .info {
-      overflow: hidden;
       margin: auto 0;
+      // overflow: hidden;
 
       .title {
         font-size: 1.5rem;

src/components/nav/Titles/Folder.vue

@@ -37,11 +37,13 @@ onUpdated(() => {
 
 <style lang="scss">
 #folder-nav-title {
+  overflow: hidden;
   width: 100%;
 
   .folder {
     display: flex;
     gap: $small;
+    width: inherit;
 
     .playbtnrect {
       height: 2.25rem;
@@ -62,6 +64,7 @@ onUpdated(() => {
       height: 2.25rem;
       display: flex;
       align-items: center;
+      width: 100%;
       overflow: auto;
       padding-right: $smaller;
 
@@ -87,8 +90,7 @@ onUpdated(() => {
 
         .path {
           white-space: nowrap;
-          display: flex;
-          align-items: center;
+          margin: auto 0;
           cursor: default;
 
           .text {
@@ -97,11 +99,10 @@ onUpdated(() => {
           }
 
           &::before {
-            content: "";
-            height: $medium;
+            content: "/";
+            font-size: small;
             margin-right: $smaller;
-            border-right: solid 1px $white;
-            transform: rotate(20deg);
+            opacity: .25;
           }
 
           &:first-child {

src/components/nav/Titles/SearchTitle.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="nav-search-input">
+    <SearchInput />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+</script>
+
+<style lang="scss">
+.nav-search-input {
+  #gsearch-input {
+    display: unset;
+
+    #ginner {
+      max-width: 30rem;
+      margin: 0 auto;
+    }
+
+    .buttons {
+      display: none;
+    }
+  }
+}
+</style>