From 2bda6162788ba35712d7675f23d27a3522c297c3 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 10 Jul 2022 11:48:13 +0200
Subject: [PATCH] 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       | 10 +++++++---
 packages/nc-gui-v2/pages/projects/index/index.vue |  2 +-
 packages/nc-gui-v2/pages/projects/index/list.vue  | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui-v2/pages/projects/index/list.vue

diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index fd02ff7bc5..82549013b3 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/projects/index/index.vue b/packages/nc-gui-v2/pages/projects/index/index.vue
index 4eb5ded804..3e638bfc3b 100644
--- a/packages/nc-gui-v2/pages/projects/index/index.vue
+++ b/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"
diff --git a/packages/nc-gui-v2/pages/projects/index/list.vue b/packages/nc-gui-v2/pages/projects/index/list.vue
new file mode 100644
index 0000000000..a62ddb9334
--- /dev/null
+++ b/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>