feat(gui-v2): mark icon if active route

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/pages/projects/index.vue

@@ -3,6 +3,8 @@ import { navigateTo } from '#app'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 
+const route = useRoute()
+
 const { $api } = useNuxtApp()
 
 const response = await $api.project.list({})
@@ -55,14 +57,16 @@ const navDrawerOptions = [
           {{ activePage }}
         </h2>
 
-        <div class="self-end flex text-xl">
+        <div class="self-end flex text-2xl">
           <MaterialSymbolsFormatListBulletedRounded
+            :class="route.name === 'projects-list' ? 'text-primary' : ''"
             class="cursor-pointer p-1 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects')"
+            @click="navigateTo('/projects/list')"
           />
           <MaterialSymbolsGridView
+            :class="route.name === 'projects-index' ? 'text-primary' : ''"
             class="cursor-pointer p-1 hover:bg-gray-300/50 rounded-full"
-            @click="navigateTo('/projects/list')"
+            @click="navigateTo('/projects')"
           />
         </div>
       </div>

packages/nc-gui-v2/pages/projects/index/index.vue

@@ -32,7 +32,7 @@ const formatTitle = (title: string) =>
 </script>
 
 <template>
-  <div class="nc-project-item-container flex flex-wrap relative d-100">
+  <div class="nc-project-item-container flex flex-wrap relative w-full">
     <div
       v-for="(project, i) of projects"
       :key="project.id"

packages/nc-gui-v2/pages/projects/index/list.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { ProjectType } from 'nocodb-sdk'
+import { navigateTo } from '#app'
+
+interface Props {
+  projects: ProjectType[]
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div>List view</div>
+</template>