Introduce tabs to right sidebar

- new icons
- rename upnext.vue to queue.vue
- other tiny changes

src/assets/css/Search/Search.scss

@@ -1,21 +1,14 @@
-.right-search .v0 {
-  max-height: 0em;
-  transition: max-height 0.5s ease;
-}
-
-.right-search .v1 {
-  max-height: 25rem;
-  transition: max-height 0.5s ease;
-}
-
 .right-search {
   position: relative;
   border-radius: $small;
-  margin: 0.5rem 0 0 0;
-  padding: 1rem $small 0 0;
   background-color: #03000eab;
+  display: grid;
+  grid-template-rows: min-content 1fr;
   overflow: hidden;
   width: auto;
+  height: 100%;
+  padding: $small $small 0 $small;
+  // margin: $small 0 $small 0;
 
   .no-res {
     text-align: center;
@@ -79,12 +72,11 @@
 }
 
 .right-search .scrollable {
-  width: 100%;
-  height: 26rem;
   overflow-y: auto;
-  scroll-behavior: smooth;
-  padding: 0 $small 0 0;
-  margin-bottom: 0.5rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .right-search {
@@ -94,7 +86,7 @@
     position: relative;
 
     input {
-      width: calc(100% - 6rem);
+      width: calc(100% - 2.5rem);
       border: none;
       line-height: 2.5rem;
       background-color: transparent;
@@ -102,7 +94,7 @@
       font-size: 1rem;
       outline: none;
       transition: all 0.5s ease;
-      padding-left: $small;
+      padding-left: 0.4rem;
 
       &:focus {
         transition: all 0.5s ease;
@@ -116,5 +108,3 @@
     }
   }
 }
-
-

src/assets/icons/_search.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path d="M 20.5 6 C 12.509634 6 6 12.50964 6 20.5 C 6 28.49036 12.509634 35 20.5 35 C 23.956359 35 27.133709 33.779044 29.628906 31.75 L 39.439453 41.560547 A 1.50015 1.50015 0 1 0 41.560547 39.439453 L 31.75 29.628906 C 33.779044 27.133709 35 23.956357 35 20.5 C 35 12.50964 28.490366 6 20.5 6 z M 20.5 9 C 26.869047 9 32 14.130957 32 20.5 C 32 23.602612 30.776198 26.405717 28.791016 28.470703 A 1.50015 1.50015 0 0 0 28.470703 28.791016 C 26.405717 30.776199 23.602614 32 20.5 32 C 14.130953 32 9 26.869043 9 20.5 C 9 14.130957 14.130953 9 20.5 9 z"/></svg>

src/assets/icons/dashboard.svg

@@ -0,0 +1,6 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="28" y="25" width="104.69" height="104.69" rx="40" fill="#055096"/>
+<rect x="167.028" y="170.31" width="104.69" height="104.69" rx="40" fill="#C43A3A"/>
+<rect x="28" y="170.31" width="104.69" height="104.69" rx="40" fill="#C4C4C4"/>
+<rect x="167.028" y="25" width="104.69" height="104.69" rx="40" fill="white"/>
+</svg>

src/assets/icons/queue.svg

@@ -0,0 +1,6 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="25" y="65" width="250" height="44.8439" rx="22.4219" fill="white"/>
+<rect x="25" y="190.999" width="168.664" height="44.8439" rx="22.4219" fill="white"/>
+<rect x="230.156" y="190.999" width="44.8439" height="44.8439" rx="22.4219" fill="#055096"/>
+<rect x="25" y="127.999" width="211.511" height="44.8439" rx="22.4219" fill="#C43A3A"/>
+</svg>

src/assets/icons/search.svg

@@ -1 +1,5 @@
-<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path d="M 20.5 6 C 12.509634 6 6 12.50964 6 20.5 C 6 28.49036 12.509634 35 20.5 35 C 23.956359 35 27.133709 33.779044 29.628906 31.75 L 39.439453 41.560547 A 1.50015 1.50015 0 1 0 41.560547 39.439453 L 31.75 29.628906 C 33.779044 27.133709 35 23.956357 35 20.5 C 35 12.50964 28.490366 6 20.5 6 z M 20.5 9 C 26.869047 9 32 14.130957 32 20.5 C 32 23.602612 30.776198 26.405717 28.791016 28.470703 A 1.50015 1.50015 0 0 0 28.470703 28.791016 C 26.405717 30.776199 23.602614 32 20.5 32 C 14.130953 32 9 26.869043 9 20.5 C 9 14.130957 14.130953 9 20.5 9 z"/></svg>
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="113.788" cy="121.788" r="88.7875" fill="#C4C4C4"/>
+<path d="M130.102 159.761L152.799 133.981L262.11 230.216C269.229 236.483 269.919 247.335 263.652 254.454V254.454C257.385 261.573 246.533 262.263 239.414 255.996L130.102 159.761Z" fill="#C4C4C4"/>
+<circle cx="113.959" cy="121.616" r="68.6944" fill="#055096"/>
+</svg>