components/common/Masthead/MainAppBar.vue

@@ -53,6 +53,12 @@ export default {
   components: {
     SearchBar,
   },
+  props: {
+    permanentlyPinned: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
   data() {
     return {
       pinned: false,
@@ -99,6 +105,10 @@ export default {
     }),
   },
   mounted() {
+    if (this.permanentlyPinned) {
+      this.pinned = true
+      return
+    }
     const callback = (entries, observer) => {
       const navBar = this.$refs.navBar
       const navBarPlaceholder = this.$refs.navBarPlaceholder

components/common/ReportCards/EntityReportCard.vue

+<template>
+  <v-row>
+    <v-col cols="0" md="3">
+      <Navigator :report-card-structure="reportCardStructure" />
+    </v-col>
+    <v-col cols="12" md="9">
+      <h1 class="primary--text">{{ reportCardStructure.title }}</h1>
+      <v-divider />
+      <br />
+
+      <div
+        v-for="section in reportCardStructure.sections"
+        :key="section.id"
+        class="section-container"
+      >
+        <ReportCardSection :section-description="section" />
+        <v-divider />
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import Navigator from '~/web-components-submodule/components/common/ReportCards/Navigator.vue'
+import ReportCardSection from '~/web-components-submodule/components/common/ReportCards/ReportCardSection.vue'
+
+export default {
+  components: {
+    Navigator,
+    ReportCardSection,
+  },
+  props: {
+    reportCardStructure: {
+      type: Object,
+      default: () => {},
+    },
+  },
+}
+</script>
+
+<style>
+.section-container {
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+</style>

components/common/ReportCards/Navigator.vue

@@ -18,14 +18,12 @@
         />
       </div>
 
-      <v-card v-if="showPermamentDrawer" tile>
-        <v-card-title>Navigation</v-card-title>
-        <NavigatorDrawer
-          :report-card-structure="reportCardStructure"
-          :fixed="false"
-        />
-        <v-card-actions> </v-card-actions>
-      </v-card>
+      <NavigatorDrawer
+        v-if="showPermamentDrawer"
+        :report-card-structure="reportCardStructure"
+        :fixed="false"
+      />
+      <v-card-actions> </v-card-actions>
     </div>
   </div>
 </template>
@@ -103,9 +101,10 @@ export default {
 
 <style lang="scss">
 .navigator-container {
+  height: 100vh;
   &.pinned {
     position: fixed;
-    top: 100px;
+    top: 70px;
   }
   &.pinned-mobile {
     position: fixed;

components/common/ReportCards/NavigatorDrawer.vue

@@ -2,11 +2,10 @@
   <v-navigation-drawer
     v-click-outside="onClickOutside"
     permanent
-    right
     :fixed="fixed"
   >
-    <v-divider></v-divider>
     <v-list nav dense>
+      <v-subheader>Summary</v-subheader>
       <v-list-item-group :value="activeSection" color="primary">
         <a
           v-for="(section, index) in reportCardStructure.sections"

components/common/ReportCards/ReportCardSection.vue

+<template>
+  <div
+    :id="sectionDescription.id"
+    ref="sectionContainer"
+    class="report-card-section"
+  >
+    <v-row>
+      <v-col cols="12">
+        <a
+          :href="`#${sectionDescription.id}`"
+          class="d-flex section-title-link"
+          @mouseover="showLinkIcon = true"
+          @mouseout="showLinkIcon = false"
+        >
+          <h2 class="primary--text">{{ sectionDescription.title }}</h2>
+          <v-icon v-show="showLinkIcon">mdi-link</v-icon>
+        </a>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12">
+        <component :is="sectionDescription.component"></component>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  props: {
+    sectionDescription: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      showLinkIcon: false,
+      ignoreFirstIntersection: true,
+    }
+  },
+  computed: mapState({
+    activeSection: (state) => state.reportCard.activeSection,
+  }),
+  mounted() {
+    const callback = (entries, observer) => {
+      const sectionIndex = this.sectionDescription.index
+
+      if (entries[0].isIntersecting) {
+        this.$store.dispatch('reportCard/setActiveSection', sectionIndex)
+      }
+    }
+    const options = {
+      threshold: 0.5,
+    }
+
+    const observer = new IntersectionObserver(callback, options)
+    observer.observe(this.$refs.sectionContainer)
+  },
+}
+</script>
+
+<style lang="scss">
+.report-card-section {
+  .section-title-link {
+    text-decoration: none;
+  }
+  &::before {
+    display: block;
+    content: ' ';
+    margin-top: -68px;
+    height: 68px;
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
+</style>