#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

@@ -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>

src/components/NavigationBarRouterLink.vue

@@ -1,19 +1,28 @@
 <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() }}
   </router-link>
 </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()

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({