:sparkles: adding naive-ui | adding vue-router | integrating some d changes

frontend/package.json

@@ -10,12 +10,14 @@
     "events": "^3.3.0",
     "joi": "^17.4.0",
     "process": "^0.11.10",
-    "vue": "^3.0.5"
+    "vue": "^3.0.5",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.2.2",
     "@vue/compiler-sfc": "^3.0.5",
     "autoprefixer": "^10.2.5",
+    "naive-ui": "^2.20.3",
     "postcss": "^8.2.13",
     "postcss-calc": "^8.0.0",
     "postcss-import": "^14.0.1",

frontend/src/App.vue

@@ -1,9 +1,7 @@
 <template lang="pug">
-.cards.f-row
-    card(v-for="card in cards" :card="card" @on-remove="remove")
-.form.f-row(v-if="completedForm")
-    siimee-form(:form="completedForm")
-hello-world(msg="Hello Vue 3 + Vite")
+navbar
+main
+    router-view
 </template>
 
 <script>
@@ -22,9 +20,10 @@ import {
 import helloWorld from '@/components/HelloWorld.vue'
 import card from '@/components/card.vue'
 import form from '@/components/form.vue'
+import navbar from '@/components/navbar.vue'
 
 export default {
-    components: { card, 'siimee-form': form, helloWorld },
+    components: { card, 'siimee-form': form, helloWorld, navbar },
     setup() {
 
         const cards = ref([

frontend/src/components/icon.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="icon"></div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style scoped>
+.icon {
+  display: block;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  background-image: url('https://i.imgur.com/WFqSBgc.png');
+  background-color: rgba(20,20,20,0.3);
+  background-position: 50% 0;
+  background-size: auto 125%;
+  /* margin: 12px auto; */
+}
+</style>

frontend/src/components/navbar.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+nav(id="nav")
+  router-link(to="/") Browse
+  router-link(to="/match") Match
+  router-link(to="/account") Account
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="postcss">
+nav
+  display: flex
+  justify-content: space-evenly
+  background-color: #000
+  color: #fff
+  padding: 40px 0
+  margin: 0
+  position: absolute
+  bottom: 0
+  width: 100%
+</style>

frontend/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-  
-createApp(App).mount('#app')
+import router from './router'
+
+createApp(App).use(router).mount('#app')

frontend/src/router/index.js

@@ -0,0 +1,76 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import home from '../views/home.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: home,
+    },
+    {
+        path: '/account',
+        name: 'Account',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () =>
+            import(/* webpackChunkName: "about" */ '../views/account.vue'),
+    },
+    {
+        path: '/editprofile',
+        name: 'EditProfile',
+        component: () =>
+            import(
+                /* webpackChunkName: "AcctSettings" */ '../views/EditProfile.vue'
+            ),
+    },
+    {
+        path: '/EditSurvey',
+        name: 'EditSurvey',
+        component: () =>
+            import(
+                /* webpackChunkName: "AcctSettings" */ '../views/EditSurvey.vue'
+            ),
+    },
+    {
+        path: '/acctsettings',
+        name: 'AcctSettings',
+        component: () =>
+            import(
+                /* webpackChunkName: "AcctSettings" */ '../views/AcctSettings.vue'
+            ),
+    },
+    {
+        path: '/searchsettings',
+        name: 'SearchSettings',
+        component: () =>
+            import(
+                /* webpackChunkName: "AcctSettings" */ '../views/SearchSettings.vue'
+            ),
+    },
+    {
+        path: '/match',
+        name: 'Match',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () =>
+            import(/* webpackChunkName: "about" */ '../views/Match.vue'),
+    },
+    {
+        path: '/chat',
+        name: 'Chat',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () =>
+            import(/* webpackChunkName: "about" */ '../views/Chat.vue'),
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+})
+
+export default router

frontend/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

frontend/src/views/AcctSettings.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="AcctSettings">
+    <h1>Account Settings</h1>
+  </div>
+</template>

frontend/src/views/Chat.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="chat">
+
+    <div class="chat--nav">
+      <span>&lt; Back</span>
+      <h3>Company Name</h3>
+      <span>...</span>
+    </div>
+
+    <div class="chat--history">
+      <span>Hey there... </span>
+    </div>
+
+    <div class="message">
+      <!-- <h2>Messages</h2> -->
+      <span>Type messages here...</span>
+    </div>
+
+  </div>
+
+
+</template>
+
+<script>
+  import icon from '@/components/icon'
+  import card from '@/components/card'
+  import { defineComponent } from 'vue'
+  import { NButton } from 'naive-ui'
+
+  export default defineComponent({
+    components: {
+      NButton,
+      card,
+      icon
+    }
+  })
+</script>
+
+<style lang="postcss">
+  h3
+    margin: 0
+  
+  .chat
+    width: 100%
+    display: flex
+    flex-flow: column
+    /* padding: 20px */
+    text-align: left
+    height: 90%
+  
+
+  .chat--nav
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    border-bottom: 1px solid rgba(0,0,0,0.5)
+    width: 100%
+    & > *
+      padding: 10px
+    
+  
+
+  .chat--history
+    padding: 20px
+    flex: 1
+    overflow: auto
+  
+
+  .row
+    display: flex
+    flex-direction: row
+    /* width: 100vw */
+    overflow:scroll
+  
+
+  .message
+    position: relative
+    bottom: 0
+    min-height: 60px
+    width: 100%
+    display: block
+    text-align: left
+    /* margin-bottom: 10px */
+    background-color: transparent
+    border: 1px solid #ccc
+    padding: 12px
+    
+  
+  .n-card__content
+    padding-top: 0
+  
+
+  .matched
+    display: flex
+    flex-direction: row
+    background-color: rgba(0,0,0,0.0)
+    margin-bottom: 12px
+    border-bottom: 1px solid rgba(150,150,150,0.25)
+  
+
+  .icon
+    /* display: inline-block */
+    padding: 8px 12px
+    margin: -1px
+    /* flex-grow: 0 */
+    border-bottom: 1px solid rgba(250,250,250,0.95)
+  
+  .active
+    /* background-color: rgba(250,50,50,0.3) */
+  
+</style>

frontend/src/views/EditProfile.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="EditProfile">
+    <h1>Edit Profile</h1>
+    <p>Edit Photos</p>
+  </div>
+</template>

frontend/src/views/EditSurvey.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="EditSurvey">
+    <h1>Edit Survey</h1>
+  </div>
+</template>

frontend/src/views/Match.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="match">
+    <div class="matches">
+      <h1>Matches</h1>
+      <!-- <n-button>naive-ui</n-button> -->
+      <div class="row">
+        <card />
+        <card />
+        <card />
+        <!-- <card /> -->
+      </div>
+    </div>
+
+    <div class="messages">
+      <h2>Messages</h2>
+      <div class="matched active">
+        <div class="icon">
+          <Icon />
+        </div>
+        <div class="messagecontent">
+            <h3>NSE Tropical</h3>
+            <span>
+              Recently active, match now!
+            </span>
+        </div>
+            <!-- <template #cover>
+            
+            </template> -->
+
+      </div>
+
+      <div class="matched">
+        <div class="icon">
+          <Icon />
+        </div>
+        <div class="messagecontent">
+            <h3>Golden Communications</h3>
+            Click to match now!
+        </div>
+      </div>
+
+      <div class="matched">
+        <div class="icon">
+          <Icon />
+        </div>
+        <div class="messagecontent">
+            <h3>Mojo Solutions</h3>
+            Click to match now!
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+</template>
+
+<script>
+  import icon from '@/components/icon'
+  import card from '@/components/card'
+  import { defineComponent } from 'vue'
+  import { NButton } from 'naive-ui'
+
+  export default defineComponent({
+    components: {
+      NButton,
+      card,
+      icon
+    }
+  })
+</script>
+
+<style scoped>
+h3 {
+  margin: 0;
+}
+  .match {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    text-align: left;
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    /* width: 100vw; */
+    overflow:scroll;
+  }
+
+  .messagecontent {
+    width: 100%;
+    display: block;
+    text-align: left;
+    /* margin-bottom: 10px; */
+    background-color: transparent;
+    border: 0;
+    padding: 12px;
+    
+  }
+  .n-card__content {
+    padding-top: 0;
+  }
+
+  .matched {
+    display: flex;
+    flex-direction: row;
+    background-color: rgba(0,0,0,0.0);
+    margin-bottom: 12px;
+    border-bottom: 1px solid rgba(150,150,150,0.25);
+  }
+
+  .icon {
+    /* display: inline-block; */
+    padding: 8px 12px;
+    margin: -1px;
+    /* flex-grow: 0; */
+    border-bottom: 1px solid rgba(250,250,250,0.95);
+  }
+  .active {
+    /* background-color: rgba(250,50,50,0.3); */
+  }
+</style>

frontend/src/views/SearchSettings.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="SearchSettings">
+    <h1>Search Settings</h1>
+    <p>Max-Distance | Remote</p>
+    <p>Part-time | Full-time</p>
+    <p>Current Location</p>
+  </div>
+</template>

frontend/src/views/account.vue

@@ -0,0 +1,89 @@
+<template lang="pug">
+.account
+  h1 Account
+  .user
+      .userprofile
+        span User Name
+    
+  .accountmenu
+    router-link(to="/editprofile")
+      .icon
+        p - Edit Profile
+    router-link(to="/editsurvey")
+      .icon
+        p + Edit Survey
+    
+  .settings
+    router-link(to="/searchsettings")
+      .icon
+        p - Search Settings
+    router-link(to="/acctsettings")
+      .icon
+        p - Account Settings
+</template>
+
+<style lang="postcss">
+.account
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  width: 100%
+  padding: 20px
+  text-align: left
+
+
+a
+  text-decoration: none
+
+
+.user
+  text-align: center
+  display: flex
+  flex-direction: column
+  align-items: center
+
+
+.userprofile
+  border-radius: 50%
+  width: 120px
+  height: 120px
+  background-image: url(https://images-ssl.gotinder.com/5b308e3bf4807f9329e93a38/640x800_75_e70182ed-938b-418e-8598-d844b4090ced.webp)
+  background-position: 50% 0
+  background-size: auto 125%
+  margin: 12px auto
+
+
+.icon
+  display: flex
+  justify-content: center
+  align-items: center
+  border-radius: 50%
+  width: 48px
+  height: 48px
+  background-color: rgba(20,20,20,0.3)
+  background-position: 50% 0
+  background-size: auto 125%
+  margin: 12px auto
+
+
+span
+  text-transform: uppercase
+  font-weight: 700
+  font-size: 1.2rem
+
+
+.accountmenu
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  margin-bottom: 5vh
+  padding: 0 5vh
+
+
+.settings
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  padding: 0 5vh
+
+</style>

frontend/src/views/home.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+.home
+  n-button naive test
+  img(alt="Vue logo" src="../assets/logo.png")
+  hello-world
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+  import { NButton } from 'naive-ui'
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld,
+    NButton
+  }
+}
+</script>