getting ready for desktop version

frontend/src/App.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
 import NowPlaying from './components/NowPlaying.vue'
+import NowPlayingView from './views/NowplayingView.vue'
+import MenuView from './views/MenuView.vue'
 import Footer from './components/Footer.vue'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { defineStore } from 'pinia'
 import { useHeaderStore } from '@/stores/headerStore';
+import { isMobile, isPc } from './script/utils.ts'
 
 const headerStore = useHeaderStore();
 
 const showFooter = ref(true);
 const showNowPlaying = ref(true);
 const route = useRoute();
-function hide() {
-  showHeader.value = false;
-}
 
 watch(route, async (to) => {
 
@@ -45,19 +45,56 @@ function loadColors() {
 
 loadColors();
 
+const screenInfo = ref({
+  isSmall: false,
+  isMedium: false,
+});
+
+const checkScreenSize = () => {
+  screenInfo.value.isSmall = isMobile();
+  screenInfo.value.isMedium = isPc();
+
+};
+
+onMounted(() => {
+  checkScreenSize(); // Initial check
+
+
+  window.addEventListener('resize', checkScreenSize);
+});
+
+onUnmounted(() => {
+  // Clean up the listener when component is destroyed
+  window.removeEventListener('resize', checkScreenSize);
+});
+
 </script>
 
 <template>
 
-  <contentw class="flex flex-col h-screen max-h-screen wrapper info text-xl">
+
+  <div v-if="screenInfo.isSmall" class="flex flex-col h-screen max-h-screen wrapper info text-xl ">
 
     <RouterView />
 
-    <Transition>
-      <NowPlaying v-show="showNowPlaying" />
-    </Transition>
+    <NowPlaying v-show="showNowPlaying" />
 
     <Footer />
+  </div>
+  <div v-if="!screenInfo.isSmall" class="flex flex-col h-screen max-h-screen wrapper info text-xl ">
+    <main class="flex flex-1 w-full h-full overflow-y-scroll">
+      <div class="w-1/12">
+        <MenuView />
+      </div>
+      <div class="flex-1 overflow-y-scroll">
+        <RouterView />
+      </div>
+      <div class="w-1/5">
+        <NowPlayingView />
+      </div>
+    </main>
+
+    <Footer />
+  </div>
 
-  </contentw>
 </template>

frontend/src/assets/main.css

@@ -1,12 +1,5 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  font-weight: normal;
-  background-color: rgba(--background-color);
-}
-
 a,
 .green {
   text-decoration: none;
@@ -20,16 +13,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

frontend/src/components/Footer.vue

@@ -1,8 +1,17 @@
+<script setup lang="ts">
+
+import { useUserStore } from '@/stores/userStore';
+
+const userStore = useUserStore();
+
+</script>
+
 <template>
   <hr>
-  <nav class="flex justify-around my-2 text-sm">
+  <nav class="flex justify-around my-2 text-sm md:text-2xl">
     <RouterLink class="p-1 rounded-full backdrop--light shadow-xl hover:text-pink-500" to="/me">
-      <img src="https://a.ppy.sh/14100399" class="h-6 rounded-full">
+      <img :src="userStore.User ? userStore.User.avatar_url : 'https://osu.ppy.sh/images/layout/avatar-guest.png'"
+        class="md:h-12 h-6 rounded-full">
     </RouterLink>
 
     <RouterLink class="flex flex-col justify-center p-2 rounded-full backdrop--light shadow-xl info" to="/menu"><i

frontend/src/script/utils.ts

@@ -0,0 +1,15 @@
+export const isMobile = () => {
+	return window.innerWidth < 640;
+};
+
+export const isTablet = () => {
+	return window.innerWidth >= 640 && window.innerWidth < 1024;
+};
+
+export const isPc = () => {
+	return window.innerWidth >= 1024 && window.innerWidth <= 1980;
+};
+
+export const matchesBreakpoint = (min, max = Infinity) => {
+	return window.innerWidth >= min && window.innerWidth <= max;
+};

frontend/src/views/FavouritView.vue

@@ -4,6 +4,6 @@ import SongItem from '../components/SongItem.vue'
 
 <template>
   <main class="flex-1 flex-col overflow-scroll">
-
+    <p>Coming Soon...</p>
   </main>
 </template>

frontend/src/views/MenuView.vue

@@ -13,7 +13,7 @@ const headerStore = useHeaderStore();
 </script>
 
 <template>
-  <main class="flex-1 flex flex-col h-full overflow-scroll">
+  <main class="flex-1 flex flex-col h-full overflow-y-scroll">
     <header v-show="true">
       <div class="wrapper">
         <nav class="flex justify-start my-2 mx-1 space-x-1 overflow-x-scroll flex-nowrap text-nowrap">

frontend/src/views/NowPlayingView.vue

@@ -32,7 +32,7 @@ const audioStore = useAudioStore();
       <div class="h-1/3 flex flex-col justify-center">
         <div class="flex-1"></div>
         <div>
-          <div class="flex w-screen justify-around">
+          <div class="flex w-full justify-around">
             <i class="fa-solid fa-backward-step text-5xl self-center" @click="audioStore.togglePrev"></i>
             <i :class="[audioStore.isPlaying ? 'fa-circle-play' : 'fa-circle-pause']" class="fa-regular text-7xl "
               @click="audioStore.togglePlay"></i>
@@ -43,7 +43,7 @@ const audioStore = useAudioStore();
           <i @click="audioStore.toggleShuffle" :class="[audioStore.shuffle ? 'info' : '']"
             class="fa-solid fa-shuffle"></i>
 
-          <div class="m-4 info flex-1 overflow-idden">
+          <div class="m-4 info flex-1 overflow-hidden">
             <p>{{ audioStore.title }}</p>
             <RouterLink :to="'search?a=' + audioStore.artist">