From 4aaec5465a4a9495e3415f9acf843bdb41e9f08a Mon Sep 17 00:00:00 2001
From: Gabriel Vitali <vitali.gabriel@gmail.com>
Date: Mon, 28 Oct 2024 23:18:22 +0100
Subject: [PATCH] #14 Making screen more compatible for mobile screens

- Added media query support for not splitting the screen in half vertically always, when it's open in a smaller screen, it should allow a better usage of the portrait screen format
- NavigationBarRouterLink now supports "preselected" state, it will indicate what page is currently being shown for the user
---
 src/App.vue                                |  6 +++---
 src/components/NavigationBarRouterLink.vue | 17 +++++++++++++----
 src/router.ts                              | 10 +++++-----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6aacc7d..678cc0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="grid grid-cols-4 h-screen w-screen place-items-center bg-stone-900">
-    <div class="col-span-1 w-full h-screen pl-16">
+  <div class="grid md:grid-cols-4 h-screen w-screen place-items-center bg-stone-900">
+    <div class="md:col-span-1 w-full h-screen pl-4 md:pl-16">
       <NavigationBar />
     </div>
-    <div class="col-span-3 w-full h-screen overflow-y-scroll pr-16">
+    <div class="md:col-span-3 w-full h-screen md:overflow-y-scroll px-4 md:pl-0 md:pr-16">
       <router-view />
     </div>
   </div>
diff --git a/src/components/NavigationBarRouterLink.vue b/src/components/NavigationBarRouterLink.vue
index 742a511..5e23a6e 100644
--- a/src/components/NavigationBarRouterLink.vue
+++ b/src/components/NavigationBarRouterLink.vue
@@ -1,6 +1,9 @@
 <template>
   <router-link
-    class="hover:text-indigo-600 text-2xl cursor-pointer w-full"
+    :class="[
+      'hover:text-indigo-600 text-2xl cursor-pointer',
+      isActive ? 'text-indigo-600 cursor-not-allowed' : '',
+    ]"
     :to="optionId"
   >
     {{ getNameForOptionId() }}
@@ -8,12 +11,18 @@
 </template>
 
 <script lang="ts" setup>
+import {computed} from "vue";
+import {useRoute} from "vue-router";
 
 const props = withDefaults(defineProps<{
   optionId: string,
-}>(), {
-  optionId: '',
-});
+}>(), {});
+
+const route = useRoute();
+
+const isActive = computed(() => {
+  return route.name === props.optionId;
+})
 
 const getNameForOptionId = () => {
   return props.optionId.charAt(0).toUpperCase()
diff --git a/src/router.ts b/src/router.ts
index df76a78..8b7df6c 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -5,11 +5,11 @@ import ResumePage from './views/ResumePage.vue';
 import ProfilePage from './views/ProfilePage.vue';
 
 const routes = [
-    { path: '/', component: ProfilePage },
-    { path: '/profile', component: ProfilePage },
-    { path: '/knowledge', component: KnowledgePage },
-    { path: '/portfolio', component: PortfolioPage },
-    { path: '/resume', component: ResumePage },
+    { name: 'profile', path: '/', component: ProfilePage },
+    { name: 'profile', path: '/profile', component: ProfilePage },
+    { name: 'knowledge', path: '/knowledge', component: KnowledgePage },
+    { name: 'portfolio', path: '/portfolio', component: PortfolioPage },
+    {name: 'resume',  path: '/resume', component: ResumePage },
 ];
 
 const router = createRouter({