update new app header

Author: chienleng

components/Toolbar/Energy/Narrow.vue

@@ -308,17 +308,17 @@ export default {
   .header-dropdowns {
     display: flex;
     align-items: center;
-    padding: 6px;
+    padding: 10px;
 
     .dropdown {
       font-size: 1rem;
     }
   }
 
   .options {
-    padding: 6px 12px 6px;
+    padding: 10px;
     display: flex;
-    gap: 6px;
+    gap: 10px;
   }
 
   .export-bar {

components/layout/NewAppHeader.vue

@@ -6,7 +6,7 @@
       <OpenElectricityLogo />
     </a>
 
-    <nav>
+    <nav :class="{ active: mobileNavActive }">
       <a 
         v-for="link in links" 
         :key="link.name"
@@ -64,10 +64,20 @@ export default {
 
   data() {
     return {
-      links: topLevelLinks,
-      mobileNavActive: false
+      links: topLevelLinks
     };
   },
+
+  computed: {
+    mobileNavActive: {
+      get() {
+        return this.$store.state.app.mobileNavActive;
+      },
+      set(value) {
+        this.$store.commit('app/mobileNavActive', value);
+      }
+    }
+  }
 }
 </script>
 
@@ -89,6 +99,16 @@ header {
     display: flex;
     align-items: center;
   }
+
+  @media screen and (max-width: 1036px) {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    border-bottom: 0;
+    z-index: 1000;
+  }
 }
 
 nav {
@@ -97,7 +117,24 @@ nav {
   gap: 2rem;
 
   @media screen and (max-width: 1036px) {
+    flex-direction: column;
+    gap: 20px;
+    position: fixed;
+    justify-content: flex-start;
+    top: 70px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+    background-color: #fff;
+    font-weight: 500;
+    font-size: 20px;
+    padding: 20px;
     display: none;
+
+    &.active {
+      display: flex;
+    }
   }
 
   a {

layouts/main.vue

@@ -30,9 +30,13 @@
     </transition>
 
     <NewAppHeader />
-    <Toolbar />
-    <!-- <app-header /> -->
-    <nuxt />
+
+    <div style="border-top: 1px solid #e5e5e5">
+      <Toolbar />
+      <!-- <app-header /> -->
+      <nuxt />
+    </div>
+    
     <app-footer v-if="!tabletBreak" />
   </div>
 </template>

store/app.js

@@ -9,7 +9,8 @@ export const state = () => ({
   dashboardView: 'discrete-time', // 'time-of-day'
   facilitiesQuery: null,
   showFeatureToggle: false,
-  siteAnnouncement: process.env.SITEWIDE_ANNOUNCEMENT
+  siteAnnouncement: process.env.SITEWIDE_ANNOUNCEMENT,
+  mobileNavActive: false
 })
 
 export const getters = {
@@ -28,7 +29,8 @@ export const getters = {
   dashboardView: (state) => state.dashboardView,
   facilitiesQuery: (state) => state.facilitiesQuery,
   showFeatureToggle: (state) => state.showFeatureToggle,
-  siteAnnouncement: (state) => state.siteAnnouncement
+  siteAnnouncement: (state) => state.siteAnnouncement,
+  mobileNavActive: (state) => state.mobileNavActive
 }
 
 export const mutations = {
@@ -61,6 +63,9 @@ export const mutations = {
   },
   showFeatureToggle(state, showFeatureToggle) {
     state.showFeatureToggle = showFeatureToggle
+  },
+  mobileNavActive(state, mobileNavActive) {
+    state.mobileNavActive = mobileNavActive
   }
 }