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>