Tweak needed by display (#17)

Also tweak nav menu / profile edit pages

src/JobsJobsJobs/App/src/components/layout/AppNav.vue

@@ -5,15 +5,15 @@
     <nav>
       <template v-if="isLoggedOn">
         <router-link to="/citizen/dashboard"><icon icon="view-dashboard-variant" />&nbsp; Dashboard</router-link>
-        <router-link to="/citizen/profile"><icon icon="pencil" />&nbsp; My Profile</router-link>
-        <router-link to="/profile/search" class="separator">
-          <icon icon="view-list-outline" />&nbsp; View Profiles
-        </router-link>
         <router-link to="/help-wanted">
           <icon icon="newspaper-variant-multiple-outline" />&nbsp; Help Wanted!
         </router-link>
-        <router-link to="/listings/mine" class="separator"><icon icon="sign-text" />&nbsp; My Job Listings</router-link>
+        <router-link to="/profile/search"><icon icon="view-list-outline" />&nbsp; Employment Profiles</router-link>
         <router-link to="/success-story/list"><icon icon="thumb-up" />&nbsp; Success Stories</router-link>
+        <div class="separator"></div>
+        <router-link to="/listings/mine"><icon icon="sign-text" />&nbsp; My Job Listings</router-link>
+        <router-link to="/citizen/profile"><icon icon="pencil" />&nbsp; My Employment Profile</router-link>
+        <div class="separator"></div>
         <router-link to="/citizen/log-off"><icon icon="logout-variant" />&nbsp; Log Off</router-link>
       </template>
       <template v-else>
@@ -68,7 +68,7 @@ nav > a
   width: 100%
   border-radius: .25rem
   padding: .5rem
-  margin-bottom: 1rem
+  margin: .5rem 0
   font-size: 1rem
   > i
     vertical-align: top
@@ -79,6 +79,7 @@ nav > a
     background-color: rgba(255, 255, 255, .5)
     color: black
     text-decoration: none
-nav > a.separator
+nav > div.separator
-  border-bottom: solid 1px white
+  border-bottom: solid 1px rgba(255, 255, 255, .75)
+  height: 1px
 </style>

src/JobsJobsJobs/App/src/views/citizen/EditProfile.vue

@@ -1,7 +1,7 @@
 <template>
   <article>
     <page-title title="Edit Profile" />
-    <h3 class="pb-3">Employment Profile</h3>
+    <h3 class="pb-3">My Employment Profile</h3>
     <load-data :load="retrieveData">
       <form class="row g-3">
         <div class="col-12 col-sm-10 col-md-8 col-lg-6">

src/JobsJobsJobs/App/src/views/listing/ListingView.vue

@@ -6,10 +6,9 @@
       <h4 class="pb-3 text-muted">{{it.continent.name}} / {{it.listing.region}}</h4>
       <p>
         <template v-if="it.listing.neededBy">
-          <strong><em>NEEDED BY {{formatNeededBy(it.listing.neededBy)}}</em></strong> &bull;&nbsp;
+          <strong><em>NEEDED BY {{neededBy(it.listing.neededBy)}}</em></strong> &bull;
         </template>
-        Listed by {{citizenName(citizen)}} &ndash;
+        Listed by <a :href="profileUrl" target="_blank">{{citizenName(citizen)}}</a>
-        <a :href="`https://noagendasocial.com/@${citizen.naUser}`" target="_blank">View No Agenda Social profile</a>
       </p>
       <hr>
       <div v-html="details"></div>
@@ -80,8 +79,9 @@ export default defineComponent({
       it,
       details: computed(() => marked(it.value?.listing.text || '', markedOptions)),
       citizen,
+      profileUrl: computed(() => citizen.value ? `https://noagendasocial.com/@${citizen.value.naUser}` : ''),
       citizenName,
-      formatNeededBy
+      neededBy: (nb : string) => formatNeededBy(nb).toUpperCase()
     }
   }
 })