add folder page banner

src/App.vue

@@ -46,6 +46,8 @@ const app_dom = document.getElementById("app");
 const route = useRoute();
 const router = useRouter();
 
+// function to add the 
+
 queue.readQueue();
 useShortcuts(useQStore);
 

src/assets/css/_variables.scss

@@ -13,6 +13,8 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
+$banner-height: 18rem;
+
 // apple human design guideline colors
 $black: #181a1c;
 $white: #ffffffde;
@@ -24,9 +26,8 @@ $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
 
-
-$red: #FF453A;
-$blue: #0A84FF;
+$red: #ff453a;
+$blue: #0a84ff;
 $darkblue: #055ee2;
 $green: rgb(20, 160, 55);
 $yellow: rgb(255, 214, 10);
@@ -34,10 +35,9 @@ $orange: rgb(255, 159, 10);
 $pink: rgb(255, 55, 95);
 $purple: #bf5af2;
 $brown: rgb(172, 142, 104);
-$indigo: #5E5CE6;
+$indigo: #5e5ce6;
 $teal: rgb(64, 200, 224);
 
-
 $primary: $gray4;
 $accent: $red;
 $secondary: $gray5;

src/assets/css/global.scss

@@ -58,6 +58,22 @@ a {
   overflow: hidden;
 }
 
+.abs {
+  position: absolute;
+}
+
+.pad-small {
+  padding: $small;
+}
+
+.pad-medium {
+  padding: $medium;
+}
+
+.pad-large {
+  padding: 1rem;
+}
+
 .grid {
   display: grid;
 }

src/interfaces.ts

@@ -108,3 +108,5 @@ export interface FetchProps {
   put?: boolean;
   headers?: {};
 }
+
+

src/layouts/HeaderContentBottom.vue

@@ -174,11 +174,11 @@ function toggleBottom() {
   position: relative;
   overflow: auto;
   display: grid;
-  grid-template-rows: 18rem 1fr;
+  grid-template-rows: $banner-height 1fr;
   gap: 1rem;
 
   .ap-page-content {
-    padding-bottom: 17rem;
+    padding-bottom: calc($banner-height - 1rem);
   }
 }
 </style>

src/views/FolderView.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="f-view-parent">
     <div id="scrollable" ref="scrollable">
+      <div class="banner shadow-lg">
+        <div class="text abs rounded pad-medium">
+          <h1><FolderSvg /> {{ getFolderName($route) }}</h1>
+        </div>
+        <img src="../assets/images/one.jpg" alt="" class="rounded" />
+      </div>
       <FolderList :folders="FStore.dirs" />
       <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
@@ -9,10 +15,11 @@
 
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
+import FolderSvg from "@/assets/icons/folder.svg";
 
 import useFStore from "../stores/pages/folder";
 import useLoaderStore from "../stores/loader";
@@ -23,6 +30,11 @@ const FStore = useFStore();
 
 const scrollable = ref(null);
 
+function getFolderName(route: RouteLocationNormalized) {
+  const path = route.params.path as string;
+  return path.split("/").pop();
+}
+
 onBeforeRouteUpdate((to, from) => {
   if (isSameRoute(to, from)) return;
 
@@ -54,6 +66,35 @@ onBeforeRouteUpdate((to, from) => {
   height: calc(100% - $small);
   scrollbar-color: grey transparent;
 
+  .banner {
+    margin-bottom: $small;
+    position: relative;
+
+    svg {
+      transform: scale(1.5);
+    }
+
+    .text {
+      bottom: 1rem;
+      left: 1rem;
+      background-color: $black;
+
+      h1 {
+        margin: $small;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $small;
+      }
+    }
+
+    img {
+      height: $banner-height;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
   @include phone-only {
     padding-right: 0;