From bfa78588edff36917d2062eb551c4fafbd830a59 Mon Sep 17 00:00:00 2001
From: abdahmed22 <abd.ahmed03@eng-st.cu.edu.eg>
Date: Thu, 15 Aug 2024 14:14:45 +0300
Subject: [PATCH] attempt: new form button

---
 .../src/components/projects/ProjectForm.vue   | 18 +++++++++++++
 client/src/layouts/NavigationBar.vue          | 25 +++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/client/src/components/projects/ProjectForm.vue b/client/src/components/projects/ProjectForm.vue
index e69de29..748bae4 100644
--- a/client/src/components/projects/ProjectForm.vue
+++ b/client/src/components/projects/ProjectForm.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello!
+  </v-card>
+</template>
+
+<script lang="ts">
+
+  export default {
+
+    name: 'ProjectForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+</script>
diff --git a/client/src/layouts/NavigationBar.vue b/client/src/layouts/NavigationBar.vue
index 0946fa9..1ef7f15 100644
--- a/client/src/layouts/NavigationBar.vue
+++ b/client/src/layouts/NavigationBar.vue
@@ -40,7 +40,22 @@
           />
         </template>
         <v-list>
-          <v-list-item />
+          <v-list-item
+            v-for="(item,index) in newForms"
+            :key="index"
+          >
+            <v-btn>
+              {{ item.displayName }}
+
+              <v-overlay
+                activator="parent"
+                location-strategy="connected"
+                scroll-strategy="reposition"
+              >
+                <item.component />
+              </v-overlay>
+            </v-btn>
+          </v-list-item>
           <!-- to be integrated with new forms -->
         </v-list>
       </v-menu>
@@ -75,6 +90,7 @@
   import { ref } from 'vue'
   import { RouterLink } from 'vue-router'
   import { useCurrentRouteStore } from '../stores/route'
+  import ProjectForm from '@/components/projects/ProjectForm.vue'
 
   type AppRoute = {
     displayName: string,
@@ -190,7 +206,12 @@
         ]
       },
       newForms () {
-        return []
+        return [
+          {
+            displayName: 'New Project',
+            component: ProjectForm,
+          },
+        ]
       },
     },
   }