:sparkles: first pass nav

backend/package-lock.json

@@ -1623,9 +1623,9 @@
             "dev": true
         },
         "caniuse-lite": {
-            "version": "1.0.30001312",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
-            "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==",
+            "version": "1.0.30001418",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
+            "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
             "dev": true
         },
         "chalk": {

frontend/package.json

@@ -19,6 +19,7 @@
         "wave-ui": "^2.40.2"
     },
     "devDependencies": {
+        "@mdi/font": "^7.0.96",
         "@prettier/plugin-pug": "^1.19.2",
         "@vitejs/plugin-vue": "^2.2.4",
         "@vue/compiler-sfc": "^3.2.31",

frontend/src/components/MainNav.vue

@@ -1,12 +1,37 @@
 <template lang="pug">
-nav#main-header
-    router-link(:to="`/matches`") matches
-    router-link(to='/') home
-    router-link(:to="`/survey`") survey
+nav#main-header.w-flex.row.xs12
+    router-link.w-flex.column(:to='`/chats`')
+        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary' disabled)
+            w-icon.mr1(xl) mdi mdi-forum
+            h3.text-upper chats
+    router-link.w-flex.column(:to='`/matches`')
+        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+            w-icon.mr1(xl) mdi mdi-tooltip-account
+            h3.text-upper matches
+    router-link.w-flex.column(:to='`/`')
+        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+            w-icon.mr1(xl) mdi mdi-home
+            h3.text-upper home
+    router-link.w-flex.column(:to='`/survey`')
+        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary')
+            w-icon.mr1(xl) mdi mdi-account-check
+            h3.text-upper survey
+    router-link.w-flex.column(:to='`/settings`')
+        w-button.pa8.bdrsr.bd1.sh1(bg-color='primary' disabled)
+            w-icon.mr1(xl) mdi mdi-cog
+            h3.text-upper settings
 </template>
 
 <script>
+import '@mdi/font/css/materialdesignicons.min.css'
+
 export default {
     name: 'MainNav',
 }
 </script>
+
+<style lang="sass">
+nav#main-header
+    position: absolute
+    bottom: 15vh
+</style>

frontend/src/views/ChatView.vue

@@ -25,7 +25,7 @@ main.view--chat
     p(v-else-if="profile.isLoggedIn && !target") No match found between profile {{ $route.params.tid }} and {{profile.id}}... 
     p(v-else) Loading...
 
-    MainNav(@show-sidebar="$emit('show-sidebar')")
+    MainNav
 </template>
 
 <script>

frontend/src/views/HomeView.vue

@@ -12,14 +12,20 @@ main.view--home(style="display:flex; flex-direction:column; gap: 40px; margin-to
     
     p(v-else-if="matches.length===0") No matches.
     p(v-else) Loading...
+
+    MainNav
 </template>
 
 <script>
-    import 'wave-ui/dist/wave-ui.css'
+import 'wave-ui/dist/wave-ui.css'
 import ProfileCardList from '../components/ProfileCardList.vue'
 
 import { Card } from '../entities'
-import { fetchQueueByProfileId, fetchMembershipsByProfileId, currentProfile } from '../services'
+import {
+    fetchQueueByProfileId,
+    fetchMembershipsByProfileId,
+    currentProfile,
+} from '../services'
 import { mixins } from '../utils'
 
 /** Callback used to format incoming into card */
@@ -72,26 +78,26 @@ export default {
         // this can be placed in utils/notification.js
         notify(payload) {
             this.$waveui.notify({
-            message: payload.timetoken,
-            timeout: 6000,
-            bgColor: 'white',
-            color: 'success',
-            dismiss: false,
-            shadow: true,
-            round: true,
-            sm: true,
-            icon: 'wi-star'
-        })
+                message: payload.timetoken,
+                timeout: 6000,
+                bgColor: 'white',
+                color: 'success',
+                dismiss: false,
+                shadow: true,
+                round: true,
+                sm: true,
+                icon: 'wi-star',
+            })
         },
         //  a way to send a message to a user for development purposes and testing
-        async chat()  {
-           const chatter = currentProfile.chatter
-           const res = await chatter.publish(chatter.subscriptions[0],{
-            title: 'New Message',
-            description: 'This is a new message',
-           })
-           this.notify(res)
-        }
+        async chat() {
+            const chatter = currentProfile.chatter
+            const res = await chatter.publish(chatter.subscriptions[0], {
+                title: 'New Message',
+                description: 'This is a new message',
+            })
+            this.notify(res)
+        },
     },
 }
 </script>

frontend/src/views/MatchesView.vue

@@ -8,7 +8,7 @@ main.view--matches.f-col.start.w-full
     
     p(v-else) Loading...
     
-    MainNav(@show-sidebar="$emit('show-sidebar')")
+    MainNav
 </template>
 
 <script>

frontend/src/views/ProfileView.vue

@@ -2,12 +2,12 @@
 main.view--profile.f-col.start.w-full
     header 
         h2 Profile Page
- 
-    article(v-if="!loading")
+
+    article(v-if='!loading')
         h3 name: {{ profile.user_name }}
-            span(v-if="profile.profile_prefs?.pronouns")  ({{ profile.profile_prefs?.pronouns.val }})
-        p(v-if="profile.user_email") {{ profile.user_email }}
-        
+            span(v-if='profile.profile_prefs?.pronouns')  ({{ profile.profile_prefs?.pronouns.val }})
+        p(v-if='profile.user_email') {{ profile.user_email }}
+
         p I am looking for a 
             span {{ profile.profile_prefs?.presence?.val }} 
             span {{ profile.profile_prefs?.role?.val }} 
@@ -15,22 +15,27 @@ main.view--profile.f-col.start.w-full
             span no further than {{ profile.profile_prefs?.distance?.val }} miles away 
             span from {{ profile.profile_prefs?.zipcode?.val }}
 
-        p I am {{ profile.profile_prefs?.urgency?.val.split("_").join(" ") }}.
-        
-        img(v-if="profile.reveal.map(t => t.description).includes('image')" :src="profile.profile_media[0]" alt="profile-avatar" style="max-height: 200px; width: auto;")
+        p I am {{ profile.profile_prefs?.urgency?.val.split('_').join(' ') }}.
+
+        img(
+            :src='profile.profile_media[0]'
+            alt='profile-avatar'
+            style='max-height: 200px; width: auto'
+            v-if='profile.reveal.map(t => t.description).includes("image")'
+        )
         h3(v-else) image not revealed
-        
-        p About: {{ profile.profile_description}}
+
+        p About: {{ profile.profile_description }}
 
         p reveal: {{ profile.reveal.map(t => t.description) }}
         p tags: {{ profile.tags.map(t => t.description) }}
         p images: {{ profile.profile_media }}
         p responses: {{ profile.responses.length }}
-        button(@click="$router.go(-1)") back
+        button(@click='$router.go(-1)') back
 
     p(v-else) Loading...
 
-    MainNav(@show-sidebar="$emit('show-sidebar')")
+    MainNav
 </template>
 
 <script>

frontend/src/views/SurveyView.vue

@@ -4,57 +4,73 @@ main.view--survey.f-col.start.w-full
         p survey for profile: {{ current }}
     article.match.w-full
         ul.w-full
-            template(v-for="(q, i) in profileQuestions" :key="q.response_key_prompt")
-                li(v-if="step == i + 1")
-                    p {{q.response_key_category}}: 
+            template(
+                :key='q.response_key_prompt'
+                v-for='(q, i) in profileQuestions'
+            )
+                li(v-if='step == i + 1')
+                    p {{ q.response_key_category }}:
                         span in db:
-                        span(v-if="q.response_key_id") true - id:{{q.response_key_id}} | 
-                        span(v-else) false | 
-                        span {{q.response_key_prompt}}? 
-                        span {{q.response_key_description}} 
+                        span(v-if='q.response_key_id') true - id:{{ q.response_key_id }} |
+                        span(v-else) false |
+                        span {{ q.response_key_prompt }}?
+                        span {{ q.response_key_description }}
 
                         //- Select
-                        div(v-if="q.responses.length")
-                            button(
-                                v-for="(res, index) in q.responses"
-                                :key="index"
-                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, res); step++"
-                            ).p-0 {{res}}
-                        
+                        div(v-if='q.responses.length')
+                            button.p-0(
+                                :key='index'
+                                @click='storeResponseLike(step, q.response_key_id, q.response_key_prompt, res); step++'
+                                v-for='(res, index) in q.responses'
+                            ) {{ res }}
+
                         //- Fill in the blank
-                        div(v-else-if="q.response_key_category === 'profile'")
-                            input(@input="storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt])" v-model="profile[q.response_key_prompt]" @keyup.enter="step++") 
-                            label >{{ profile[q.response_key_prompt]}}
-                        
+                        div(v-else-if='q.response_key_category === "profile"')
+                            input(
+                                @input='storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt])'
+                                @keyup.enter='step++'
+                                v-model='profile[q.response_key_prompt]'
+                            ) 
+                            label >{{ profile[q.response_key_prompt] }}
+
                         //- Aspects
-                        div(v-else).f-col
-                            input(type="range" min="-3" max="3" list="ticks" @input="storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category])" v-model="aspects[q.response_key_category]").w-full
-                            label {{ aspectResponses[parseInt(aspects[q.response_key_category]) + 3] }} 
-                    
+                        .f-col(v-else)
+                            input.w-full(
+                                @input='storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category])'
+                                list='ticks'
+                                max='3'
+                                min='-3'
+                                type='range'
+                                v-model='aspects[q.response_key_category]'
+                            )
+                            label {{ aspectResponses[parseInt(aspects[q.response_key_category]) + 3] }}
+
                         nav.f-row
-                            button(:disabled="step == 0" @click="step--") back
-                            p {{step}} of {{profile.length}}
+                            button(:disabled='step == 0' @click='step--') back
+                            p {{ step }} of {{ profile.length }}
                             button(
-                                v-if="(q.response_key_category === 'profile')"
-                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt]); step++"
+                                @click='storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt]); step++'
+                                v-if='q.response_key_category === "profile"'
                             ) next
                             button(
+                                @click='storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category]); step++'
                                 v-else
-                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category]); step++"
                             ) next
-                    
+
             //- Confirmation
-            li(v-if="step == profileQuestions.length + 1")
+            li(v-if='step == profileQuestions.length + 1')
                 p Does this look correct?
                 h4 {{ profile }}
-                h4 {{aspects}}
+                h4 {{ aspects }}
                 nav.f-row
-                    button(@click="step--") back
-                    p(@click="step = 1").p-1 start over
-                    button(@click="onSave") save
+                    button(@click='step--') back
+                    p.p-1(@click='step = 1') start over
+                    button(@click='onSave') save
                     //- button(@click="$router.push({ name: 'HomeView' })") save
     footer
-        button(@click="bypass") +30 user profiles
+        button(@click='bypass') +30 user profiles
+
+    MainNav
 </template>
 
 <script>