Menu improvements. (#23)

* Menu improvements. * Updated snapshots. --------- Co-authored-by: weskubo-cgi <[email protected]>
bcgov · Oct 23, 2023 · 0361a6a · 0361a6a
1 parent e660aa5
commit 0361a6a
Show file tree

Hide file tree

Showing 17 changed files with 285 additions and 163 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@bcgov/bc-sans": "^2.0.0",
     "@js-joda/core": "^5.5.3",
+    "@vueuse/core": "^10.5.0",
     "axios": "^1.4.0",
     "http-status-codes": "^2.2.0",
     "lodash": "^4.17.21",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -2,14 +2,17 @@
 <template>
   <v-app id="app">
     <div class="header">
-      <TheHeader />
+      <TheHeader @menu-toggled="handleMenuToggled" />
       <TheSnackBar />
       <TheNavBar v-if="pageTitle && isAuthenticated && showNavBar" :title="pageTitle" />
       <TheEnvBar />
     </div>
+
     <v-main class="align-start">
       <TheModalIdle v-if="isAuthenticated" class="align-start px-8 mb-0" />
-      <TheMenu v-if="isAuthenticated" />
+      <v-navigation-drawer class="site-menu" :width="200" :model-value="showMenu" :scrim="false">
+        <TheMenu />
+      </v-navigation-drawer>
       <router-view class="align-start px-8 mb-0" />
     </v-main>
     <TheFooter />
@@ -27,7 +30,6 @@ import TheNavBar from '@/components/TheNavBar.vue'
 import TheSnackBar from '@/components/TheSnackBar.vue'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
-import HttpStatus from 'http-status-codes'
 
 export default {
   name: 'App',
@@ -40,15 +42,20 @@ export default {
     TheFooter,
     TheMenu,
   },
+
   data() {
     return {
+      showMenu: true,
       showToTopBtn: false,
       deactivateMultipleDraggableDialog: null,
     }
   },
   computed: {
     ...mapState(useAuthStore, ['jwtToken', 'isAuthenticated', 'userInfo', 'isAuthorizedWebsocketUser']),
     ...mapState(useAppStore, ['pageTitle', 'showNavBar']),
+    mobile() {
+      return this.$vuetify.display.mobile
+    },
   },
   watch: {
     /*
@@ -59,6 +66,10 @@ export default {
     isAuthorizedWebsocketUser() {
       this.handleWebSocket()
     },
+    mobile() {
+      // Reset the menu state on mobile change
+      this.showMenu = false
+    },
   },
   mounted() {
     this.handleWebSocket()
@@ -85,6 +96,9 @@ export default {
   methods: {
     ...mapActions(useAppStore, ['getConfig']),
     ...mapActions(useAuthStore, ['getJwtToken']),
+    handleMenuToggled() {
+      this.showMenu = !this.showMenu
+    },
     handleWebSocket() {
       if (this.isAuthenticated && this.isAuthorizedWebsocketUser) {
         this.$webSocketsConnect()
@@ -105,6 +119,14 @@ export default {
 </script>
 
 <style>
+.site-menu {
+  margin-top: 2px;
+}
+
+.envBanner {
+  font-size: 0.8rem;
+}
+
 .header {
   /* background-color: #036;
   border-bottom: 2px solid #fcba19;
@@ -127,11 +149,6 @@ export default {
 #toTopBtn:hover {
   opacity: 1;
 }
-
-html {
-  font-family: 'BCSans', Verdana, Arial, sans-serif !important;
-}
-
 .v-alert.bootstrap-success {
   color: #234720 !important;
   background-color: #d9e7d8 !important;
@@ -164,26 +181,10 @@ html {
   height: 100%;
 }
 
-a {
-  color: #1976d2;
-}
-
-a:hover {
-  cursor: pointer;
-}
-
-.envBanner {
-  font-size: 0.8rem;
-}
-
 .theme--light.application {
   background: #f1f1f1;
 }
 
-h1 {
-  font-size: 1.25rem;
-}
-
 .v-toolbar__title {
   font-size: 1rem;
 }

diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css
@@ -78,3 +78,86 @@ input[type='number'] {
     background-position: 100% 0;
   }
 }
+
+#toTopBtn {
+  opacity: 0.5;
+}
+
+#toTopBtn:hover {
+  opacity: 1;
+}
+.v-alert.bootstrap-success {
+  color: #234720 !important;
+  background-color: #d9e7d8 !important;
+  border-color: #accbaa !important;
+}
+
+.v-alert.bootstrap-info {
+  color: #4e6478;
+  background-color: #eaf2fa !important;
+  border-color: #b8d4ee !important;
+}
+
+.v-alert.bootstrap-warning {
+  color: #81692c;
+  background-color: #fef4dd !important;
+  border-color: #fbdb8b !important;
+}
+
+.v-alert.bootstrap-error {
+  color: #712024;
+  background-color: #f7d8da !important;
+  border-color: #eeaaad !important;
+}
+
+.v-alert .v-icon {
+  padding-left: 0;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.theme--light.application {
+  background: #f1f1f1;
+}
+
+.v-toolbar__title {
+  font-size: 1rem;
+}
+
+.v-btn {
+  text-transform: none !important;
+}
+
+.v-alert .v-icon {
+  padding-left: 0;
+}
+
+.v-alert.bootstrap-success {
+  color: #234720;
+  background-color: #d9e7d8 !important;
+  border-color: #accbaa !important;
+}
+
+.v-alert.bootstrap-info {
+  color: #4e6478;
+  background-color: #eaf2fa !important;
+  border-color: #b8d4ee !important;
+}
+
+.v-alert.bootstrap-warning {
+  color: #81692c;
+  background-color: #fef4dd !important;
+  border-color: #fbdb8b !important;
+}
+
+.v-alert.bootstrap-error {
+  color: #712024;
+  background-color: #f7d8da !important;
+  border-color: #eeaaad !important;
+}
+
+.theme--light.v-btn.v-btn--disabled:not(.v-btn--text):not(.v-btn--outlined) {
+  background-color: rgba(0, 0, 0, 0.12) !important;
+}
diff --git a/frontend/src/assets/css/reset.css b/frontend/src/assets/css/reset.css
@@ -0,0 +1,26 @@
+html {
+  font-family: 'BCSans', Verdana, Arial, sans-serif !important;
+}
+
+h1 {
+  font-size: 1.25rem;
+}
+a {
+  color: #1976d2;
+}
+
+a:hover {
+  cursor: pointer;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
diff --git a/frontend/src/components/TheEnvBar.vue b/frontend/src/components/TheEnvBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar class="env-bar" v-if="bannerColor !== ''" :color="bannerColor" height="20" style="margin-top: 2px; position: relative">
+  <v-app-bar class="env-bar" v-if="bannerColor !== ''" :color="bannerColor" height="20">
     <div>
       <h3 class="envBanner">{{ bannerEnvironment }} Environment</h3>
     </div>

diff --git a/frontend/src/components/TheFooter.vue b/frontend/src/components/TheFooter.vue
@@ -1,14 +1,14 @@
 <template>
-  <v-footer color="#003366" dark absolute height="20px">
+  <v-footer color="#003366" dark absolute height="20px" style="z-index: 1006">
     <v-row no-gutters>
       <v-col class="d-flex justify-center">
-        <v-btn id="footer-home" variant="text" color="white" href="https://www.gov.bc.ca/"> Home </v-btn>
-        <v-btn id="footer-about" variant="text" color="white" href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca"> About gov.bc.ca </v-btn>
-        <v-btn id="footer-disclaimer" variant="text" color="white" href="http://gov.bc.ca/disclaimer"> Disclaimer </v-btn>
-        <v-btn id="footer-privacy" variant="text" color="white" href="http://gov.bc.ca/privacy"> Privacy </v-btn>
-        <v-btn id="footer-accessibility" variant="text" color="white" href="http://gov.bc.ca/webaccessibility"> Accessibility </v-btn>
-        <v-btn id="footer-copyright" variant="text" color="white" href="http://gov.bc.ca/copyright"> Copyright </v-btn>
-        <v-btn id="footer-contact" variant="text" color="white" href="https://www2.gov.bc.ca/gov/content/home/contact-us"> Contact Us </v-btn>
+        <v-btn id="footer-home" variant="text" color="white" href="https://www.gov.bc.ca/">Home</v-btn>
+        <v-btn id="footer-about" variant="text" color="white" href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca">About gov.bc.ca</v-btn>
+        <v-btn id="footer-disclaimer" variant="text" color="white" href="http://gov.bc.ca/disclaimer">Disclaimer</v-btn>
+        <v-btn id="footer-privacy" variant="text" color="white" href="http://gov.bc.ca/privacy">Privacy</v-btn>
+        <v-btn id="footer-accessibility" variant="text" color="white" href="http://gov.bc.ca/webaccessibility">Accessibility</v-btn>
+        <v-btn id="footer-copyright" variant="text" color="white" href="http://gov.bc.ca/copyright">Copyright</v-btn>
+        <v-btn id="footer-contact" variant="text" color="white" href="https://www2.gov.bc.ca/gov/content/home/contact-us">Contact Us</v-btn>
       </v-col>
     </v-row>
   </v-footer>

diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app-bar absolute color="rgb(0, 51, 102)" class="pl-10 pr-10 sysBar" style="z-index: 1002">
+    <v-app-bar-nav-icon variant="text" class="d-md-none" @click="$emit('menuToggled')" />
     <!-- Navbar content -->
     <v-container class="ma-0" :class="{ sizingForIconXLScreen: xl }" style="width: 100%" :fluid="true">
       <v-row class="justify-space-between">
@@ -29,10 +30,8 @@
               </v-chip>
             </template>
             <v-list dark style="background-color: #003366; color: white">
-              <v-list-item compact :to="{ name: 'home' }" id="home_button" title="Home" />
-              <v-list-item v-if="isMinistryUser" compact id="impersonate_button" :to="paths.ROOT.IMPERSONATE"
-                title="Impersonate" />
-              <v-list-item compact id="logout_button" :href="authRoutes.LOGOUT" title="Log Out" />
+              <v-list-item id="impersonate_button" v-if="isMinistryUser" :to="{ name: 'impersonate' }" title="Impersonate" />
+              <v-list-item id="logout_button" :href="authRoutes.LOGOUT" title="Log Out" />
             </v-list>
           </v-menu>
         </div>
@@ -43,16 +42,16 @@
 
 <script>
 import { mapState } from 'pinia'
-import { AuthRoutes, PATHS } from '@/utils/constants'
+import { AuthRoutes } from '@/utils/constants'
 import { useAuthStore } from '@/stores/auth'
 
 export default {
   data() {
     return {
       authRoutes: AuthRoutes,
-      paths: PATHS,
     }
   },
+  emits: ['menuToggled'],
   computed: {
     ...mapState(useAuthStore, ['userInfo', 'isAuthenticated', 'isMinistryUser']),
     dataReady: function () {
@@ -75,17 +74,10 @@ export default {
       return this.$vuetify.display.xs
     },
   },
-
-  methods: {
-    goToImpersonatePage() {
-      // jstorey PATHS.ROOT.IMPERSONATE
-      this.$router.push('/impersonate')
-    },
-  }
 }
 </script>
 
-<style>
+<style scoped>
 .gov-header .v-icon {
   padding-left: 10px;
 }