ToU: merge content + navigation

src/components/Pages/Components/PolicyNavigationPanel.vue

@@ -0,0 +1,36 @@
+<template>
+    <v-expansion-panels v-bind:value="$vuetify.breakpoint.mdAndUp ? 0 : null" v-if="links">
+        <v-expansion-panel>
+            <v-expansion-panel-header>{{ title }}</v-expansion-panel-header>
+
+            <v-expansion-panel-content>
+            <v-list class="wrap">
+                <v-list-item v-for="(link) in links" :key="link.routePath">
+                    <v-list-item-content>
+                        <v-list-item-title v-if="link.routePath === currentPath">
+                            {{ link.title }}
+                        </v-list-item-title>
+
+                        <v-list-item-title v-else>
+                            <router-link :to="{ path: link.routePath }" class="text-decoration-none">
+                                {{ link.title }}
+                            </router-link>
+                        </v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list>
+            </v-expansion-panel-content>
+        </v-expansion-panel>
+    </v-expansion-panels>
+</template>
+
+<script>
+export default {
+  name: 'NavigationPanel',
+  props: {
+    title: String,
+    currentPath: String,
+    links: Array,
+  },
+}
+</script>

src/components/Pages/TermsOfUse.vue → src/components/Pages/TermsOfUse/Current.vue

@@ -2,7 +2,11 @@
   <v-main>
     <v-container class="fill-height" fluid>
       <v-row justify="center">
-        <v-col cols="8">
+        <v-col cols="11" md="4" order-md="last">
+            <TermsOfUseNavigationPanel />
+        </v-col>
+
+        <v-col cols="11" md="8">
           <h1>Terms Of Use</h1>
           <p>
             PLEASE READ THESE TERMS OF USE CAREFULLY BEFORE USING THE SERVICES.
@@ -1288,8 +1292,13 @@
 </template>
 
 <script>
+import TermsOfUseNavigationPanel from './TermsOfUseNavigationPanel.vue'
+
 export default {
   name: 'TermsOfUse',
+  components: {
+    TermsOfUseNavigationPanel,
+  },
   computed: {},
 }
 </script>

src/components/Pages/TermsOfUse/TermsOfUseNavigationPanel.vue

@@ -0,0 +1,27 @@
+<template>
+    <PolicyNavigationPanel title="All Versions" :links="termsOfUseLinks" :currentPath="currentPath" />
+</template>
+
+<script>
+import PolicyNavigationPanel from '../Components/PolicyNavigationPanel.vue'
+
+export default {
+  name: 'TermsOfUseNavigationPanel',
+  components: {
+    PolicyNavigationPanel,
+  },
+  data: () => ({
+    termsOfUseLinks: [
+      { title: 'Upcoming Version', routePath: '/terms-of-use/upcoming' },
+      { title: 'April 11th 2022 (current)', routePath: '/terms-of-use' },
+    ],
+    currentPath: null,
+  }),
+  mounted () {
+    this.currentPath = this.$route.path
+  },
+}
+
+</script>
+
+<style scoped></style>