From cc9f0220516412db5cb76536e20d1d7a5622c24d Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Fri, 8 May 2020 18:48:07 -0400
Subject: [PATCH] fix: nav external blank option

---
 client/components/admin.vue                   | 11 +++--
 client/components/admin/admin-general.vue     |  3 +-
 client/components/admin/admin-navigation.vue  |  3 +-
 client/components/admin/admin-rendering.vue   |  6 +--
 .../editor/editor-modal-properties.vue        |  9 ++--
 client/components/history.vue                 | 22 +++++-----
 client/components/profile.vue                 |  7 +---
 client/components/source.vue                  |  9 +---
 client/components/tags.vue                    |  4 +-
 .../themes/default/components/nav-sidebar.vue | 14 ++++---
 client/themes/default/components/page.vue     | 41 +++++++++++--------
 client/themes/default/scss/app.scss           | 35 +++++++++++++++-
 server/controllers/common.js                  | 19 +++++++--
 server/views/page.pug                         |  4 +-
 14 files changed, 110 insertions(+), 77 deletions(-)

diff --git a/client/components/admin.vue b/client/components/admin.vue
index 6965b788..4decb7ba 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -27,13 +27,13 @@
               v-list-item-avatar(size='24', tile): v-icon mdi-file-document-outline
               v-list-item-title {{ $t('admin:pages.title') }}
               v-list-item-action(style='min-width:auto;')
-                v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-5`')
+                v-chip(x-small, :color='$vuetify.theme.dark ? `grey darken-3-d4` : `grey lighten-5`')
                   .caption.grey--text {{ info.pagesTotal }}
             v-list-item(to='/tags', v-if='hasPermission([`manage:system`])')
               v-list-item-avatar(size='24', tile): v-icon mdi-tag-multiple
               v-list-item-title {{ $t('admin:tags.title') }}
               v-list-item-action(style='min-width:auto;')
-                v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-5`')
+                v-chip(x-small, :color='$vuetify.theme.dark ? `grey darken-3-d4` : `grey lighten-5`')
                   .caption.grey--text {{ info.tagsTotal }}
             v-list-item(to='/theme', color='primary', v-if='hasPermission([`manage:system`, `manage:theme`])')
               v-list-item-avatar(size='24', tile): v-icon mdi-palette-outline
@@ -45,13 +45,13 @@
               v-list-item-avatar(size='24', tile): v-icon mdi-account-group
               v-list-item-title {{ $t('admin:groups.title') }}
               v-list-item-action(style='min-width:auto;')
-                v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
+                v-chip(x-small, :color='$vuetify.theme.dark ? `grey darken-3-d4` : `grey lighten-4`')
                   .caption.grey--text {{ info.groupsTotal }}
             v-list-item(to='/users', color='primary', v-if='hasPermission([`manage:system`, `manage:groups`, `write:groups`, `manage:users`, `write:users`])')
               v-list-item-avatar(size='24', tile): v-icon mdi-account-box
               v-list-item-title {{ $t('admin:users.title') }}
               v-list-item-action(style='min-width:auto;')
-                v-chip(x-small, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
+                v-chip(x-small, :color='$vuetify.theme.dark ? `grey darken-3-d4` : `grey lighten-4`')
                   .caption.grey--text {{ info.usersTotal }}
           template(v-if='hasPermission(`manage:system`)')
             v-divider.my-2
@@ -123,7 +123,7 @@
             v-list-item-avatar(size='24', tile): v-icon mdi-heart-outline
             v-list-item-title {{ $t('admin:contribute.title') }}
 
-    v-content(:class='darkMode ? "grey darken-5" : "grey lighten-5"')
+    v-content(:class='$vuetify.theme.dark ? "grey darken-5" : "grey lighten-5"')
       transition(name='admin-router')
         router-view
 
@@ -210,7 +210,6 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
     info: sync('admin/info'),
     permissions: get('user/permissions')
   },
diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue
index c9ee8f3a..75a41ab6 100644
--- a/client/components/admin/admin-general.vue
+++ b/client/components/admin/admin-general.vue
@@ -260,7 +260,7 @@
 
 <script>
 import _ from 'lodash'
-import { get, sync } from 'vuex-pathify'
+import { sync } from 'vuex-pathify'
 import gql from 'graphql-tag'
 
 import editorStore from '../../store/editor'
@@ -323,7 +323,6 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
     siteTitle: sync('site/title'),
     logoUrl: sync('site/logoUrl'),
     company: sync('site/company'),
diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue
index 98f00344..1d2c0fcb 100644
--- a/client/components/admin/admin-navigation.vue
+++ b/client/components/admin/admin-navigation.vue
@@ -168,7 +168,7 @@
                             hide-details
                           )
                           v-text-field.mt-4(
-                            v-if='current.targetType === `external`'
+                            v-if='current.targetType === `external` || current.targetType === `externalblank`'
                             outlined
                             :label='$t("navigation.target")'
                             prepend-icon='mdi-near-me'
@@ -302,6 +302,7 @@ export default {
     navTypes () {
       return [
         { text: this.$t('navigation.navType.external'), value: 'external' },
+        { text: this.$t('navigation.navType.externalblank'), value: 'externalblank' },
         { text: this.$t('navigation.navType.home'), value: 'home' },
         { text: this.$t('navigation.navType.page'), value: 'page' }
         // { text: this.$t('navigation.navType.searchQuery'), value: 'search' }
diff --git a/client/components/admin/admin-rendering.vue b/client/components/admin/admin-rendering.vue
index ad4115a2..e874e452 100644
--- a/client/components/admin/admin-rendering.vue
+++ b/client/components/admin/admin-rendering.vue
@@ -51,7 +51,7 @@
                   v-list-item(
                     :key='rdr.key'
                     @click='selectRenderer(rdr.key)'
-                    :class='currentRenderer.key === rdr.key ? (darkMode ? `grey darken-4-l4` : `blue lighten-5`) : ``'
+                    :class='currentRenderer.key === rdr.key ? ($vuetify.theme.dark ? `grey darken-4-l4` : `blue lighten-5`) : ``'
                     )
                     v-list-item-avatar(size='24', tile)
                       v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}}
@@ -126,7 +126,6 @@
 <script>
 import _ from 'lodash'
 import { DepGraph } from 'dependency-graph'
-import { get } from 'vuex-pathify'
 
 import { StatusIndicator } from 'vue-status-indicator'
 
@@ -144,9 +143,6 @@ export default {
       currentRenderer: {}
     }
   },
-  computed: {
-    darkMode: get('site/dark')
-  },
   watch: {
     renderers(newValue, oldValue) {
       _.delay(() => {
diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue
index c4c02a99..88962a43 100644
--- a/client/components/editor/editor-modal-properties.vue
+++ b/client/components/editor/editor-modal-properties.vue
@@ -41,7 +41,7 @@
               :hint='$t(`editor:props.shortDescriptionHint`)'
               )
           v-divider
-          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+          v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d3` : `lighten-5`')
             .overline.pb-5 {{$t('editor:props.path')}}
             v-container.pa-0(fluid, grid-list-lg)
               v-layout(row, wrap)
@@ -65,7 +65,7 @@
                     @click:append='showPathSelector'
                     )
           v-divider
-          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d5` : `lighten-4`')
+          v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d5` : `lighten-4`')
             .overline.pb-5 {{$t('editor:props.categorization')}}
             v-chip-group.radius-5.mb-5(column, v-if='tags && tags.length > 0')
               v-chip(
@@ -101,7 +101,7 @@
               inset
               )
           v-divider
-          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+          v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d3` : `lighten-5`')
             v-container.pa-0(fluid, grid-list-lg)
               v-row
                 v-col(cols='6')
@@ -197,7 +197,7 @@
               persistent-hint
             )
           v-divider
-          v-card-text.grey.pt-5(:class='darkMode ? `darken-3-d3` : `lighten-5`')
+          v-card-text.grey.pt-5(:class='$vuetify.theme.dark ? `darken-3-d3` : `lighten-5`')
             .overline.pb-3 {{$t('editor:props.css')}}
             v-textarea(
               outlined
@@ -279,7 +279,6 @@ export default {
       get() { return this.value },
       set(val) { this.$emit('input', val) }
     },
-    darkMode: get('site/dark'),
     mode: get('editor/mode'),
     title: sync('page/title'),
     description: sync('page/description'),
diff --git a/client/components/history.vue b/client/components/history.vue
index ac9cdc61..095def4a 100644
--- a/client/components/history.vue
+++ b/client/components/history.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-app(:dark='darkMode').history
+  v-app(:dark='$vuetify.theme.dark').history
     nav-header
     v-content
       v-toolbar(color='primary', dark)
@@ -15,8 +15,8 @@
             v-chip.my-0.ml-6(
               label
               small
-              :color='darkMode ? `grey darken-2` : `grey lighten-2`'
-              :class='darkMode ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
+              :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-2`'
+              :class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
               )
               span Live
             v-timeline(
@@ -92,14 +92,14 @@
               v-else
               label
               small
-              :color='darkMode ? `grey darken-2` : `grey lighten-2`'
-              :class='darkMode ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
+              :color='$vuetify.theme.dark ? `grey darken-2` : `grey lighten-2`'
+              :class='$vuetify.theme.dark ? `grey--text text--lighten-2` : `grey--text text--darken-2`'
               ) End of history trail
 
           v-flex(xs12, md8)
             v-card.radius-7(:class='$vuetify.breakpoint.mdAndUp ? `mt-8` : ``')
               v-card-text
-                v-card.grey.radius-7(flat, :class='darkMode ? `darken-2` : `lighten-4`')
+                v-card.grey.radius-7(flat, :class='$vuetify.theme.dark ? `darken-2` : `lighten-4`')
                   v-row(no-gutters, align='center')
                     v-col
                       v-card-text
@@ -132,7 +132,6 @@
 <script>
 import * as Diff2Html from 'diff2html'
 import { createPatch } from 'diff'
-import { get } from 'vuex-pathify'
 import _ from 'lodash'
 import gql from 'graphql-tag'
 
@@ -224,7 +223,6 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
     fullTrail () {
       const liveTrailItem = {
         versionId: 0,
@@ -501,13 +499,13 @@ export default {
     trailBgColor (actionType) {
       switch (actionType) {
         case 'move':
-          return this.darkMode ? 'purple' : 'purple lighten-5'
+          return this.$vuetify.theme.dark ? 'purple' : 'purple lighten-5'
         case 'initial':
-          return this.darkMode ? 'teal darken-3' : 'teal lighten-5'
+          return this.$vuetify.theme.dark ? 'teal darken-3' : 'teal lighten-5'
         case 'live':
-          return this.darkMode ? 'orange darken-3' : 'orange lighten-5'
+          return this.$vuetify.theme.dark ? 'orange darken-3' : 'orange lighten-5'
         default:
-          return this.darkMode ? 'grey darken-3' : 'grey lighten-4'
+          return this.$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'
       }
     }
   },
diff --git a/client/components/profile.vue b/client/components/profile.vue
index ab8d51a1..b1206e9c 100644
--- a/client/components/profile.vue
+++ b/client/components/profile.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-app(:dark='darkMode').profile
+  v-app(:dark='$vuetify.theme.dark').profile
     nav-header
     v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
       v-list(dense, nav)
@@ -34,7 +34,7 @@
 <script>
 import VueRouter from 'vue-router'
 
-/* global WIKI, siteConfig */
+/* global WIKI */
 
 const router = new VueRouter({
   mode: 'history',
@@ -63,9 +63,6 @@ export default {
       profileDrawerShown: true
     }
   },
-  computed: {
-    darkMode() { return siteConfig.darkMode }
-  },
   router,
   created() {
     this.$store.commit('page/SET_MODE', 'profile')
diff --git a/client/components/source.vue b/client/components/source.vue
index 05ad95cc..fda24341 100644
--- a/client/components/source.vue
+++ b/client/components/source.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-app(:dark='darkMode').source
+  v-app(:dark='$vuetify.theme.dark').source
     nav-header
     v-content
       v-toolbar(color='primary', dark)
@@ -17,7 +17,7 @@
           v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') {{$t('common:page.returnNormalView')}}
       v-card(tile)
         v-card-text
-          v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')
+          v-card.grey.radius-7(flat, :class='$vuetify.theme.dark ? `darken-4` : `lighten-4`')
             v-card-text
               pre
                 code
@@ -29,8 +29,6 @@
 </template>
 
 <script>
-import { get } from 'vuex-pathify'
-
 export default {
   props: {
     pageId: {
@@ -57,9 +55,6 @@ export default {
   data() {
     return {}
   },
-  computed: {
-    darkMode: get('site/dark')
-  },
   created () {
     this.$store.commit('page/SET_ID', this.id)
     this.$store.commit('page/SET_LOCALE', this.locale)
diff --git a/client/components/tags.vue b/client/components/tags.vue
index 86b4d324..ee437ab2 100644
--- a/client/components/tags.vue
+++ b/client/components/tags.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-app(:dark='darkMode').tags
+  v-app(:dark='$vuetify.theme.dark').tags
     nav-header
     v-navigation-drawer.pb-0.elevation-1(app, fixed, clipped, :right='$vuetify.rtl', permanent, width='300')
       vue-scroll(:ops='scrollStyle')
@@ -151,7 +151,6 @@
 </template>
 
 <script>
-import { get } from 'vuex-pathify'
 import VueRouter from 'vue-router'
 import _ from 'lodash'
 
@@ -209,7 +208,6 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
     tagsGrouped () {
       return _.groupBy(this.tags, t => t.title.charAt(0).toUpperCase())
     },
diff --git a/client/themes/default/components/nav-sidebar.vue b/client/themes/default/components/nav-sidebar.vue
index aa96490b..2cb671bc 100644
--- a/client/themes/default/components/nav-sidebar.vue
+++ b/client/themes/default/components/nav-sidebar.vue
@@ -14,14 +14,16 @@
     v-list.py-2(v-if='currentMode === `custom`', dense, :class='color', :dark='dark')
       template(v-for='item of items')
         v-list-item(
-          v-if='item.kind === `link`'
-          :href='item.target'
+          v-if='item.k === `link`'
+          :href='item.t'
+          :target='item.y === `externalblank` ? `_blank` : `_self`'
+          :rel='item.y === `externalblank` ? `noopener` : ``'
           )
           v-list-item-avatar(size='24', tile)
-            v-icon {{ item.icon }}
-          v-list-item-title {{ item.label }}
-        v-divider.my-2(v-else-if='item.kind === `divider`')
-        v-subheader.pl-4(v-else-if='item.kind === `header`') {{ item.label }}
+            v-icon {{ item.c }}
+          v-list-item-title {{ item.l }}
+        v-divider.my-2(v-else-if='item.k === `divider`')
+        v-subheader.pl-4(v-else-if='item.k === `header`') {{ item.l }}
     //-> Browse
     v-list.py-2(v-else-if='currentMode === `browse`', dense, :class='color', :dark='dark')
       template(v-if='currentParent.id > 0')
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 80a7266f..a84a99bf 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  v-app(v-scroll='upBtnScroll', :dark='darkMode', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
+  v-app(v-scroll='upBtnScroll', :dark='$vuetify.theme.dark', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
     nav-header
     v-navigation-drawer(
       v-if='navMode !== `NONE`'
-      :class='darkMode ? `grey darken-4-d4` : `primary`'
+      :class='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`'
       dark
       app
       clipped
@@ -13,7 +13,7 @@
       :right='$vuetify.rtl'
       )
       vue-scroll(:ops='scrollStyle')
-        nav-sidebar(:color='darkMode ? `grey darken-4-d4` : `primary`', :items='sidebar', :nav-mode='navMode')
+        nav-sidebar(:color='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`', :items='sidebarDecoded', :nav-mode='navMode')
 
     v-fab-transition(v-if='navMode !== `NONE`')
       v-btn(
@@ -32,7 +32,7 @@
 
     v-content(ref='content')
       template(v-if='path !== `home`')
-        v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
+        v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
           //- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
           //-   v-icon(color='grey darken-2', left) menu
           //-   span Navigation
@@ -48,19 +48,19 @@
             .caption.red--text {{$t('common:page.unpublished')}}
             status-indicator.ml-3(negative, pulse)
         v-divider
-      v-container.grey.pa-0(fluid, :class='darkMode ? `darken-4-l3` : `lighten-4`')
+      v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
         v-row(no-gutters, align-content='center', style='height: 90px;')
           v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
-            .headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
+            .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
             .caption.grey--text.text--darken-1 {{description}}
       v-divider
       v-container.pl-5.pt-4(fluid, grid-list-xl)
         v-layout(row)
           v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp', align-self-start, style='margin-top: -90px; position: sticky; top: 70px;')
-            v-card.mb-5(v-if='toc.length')
-              .overline.pa-5.pb-0(:class='darkMode ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
-              v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')
-                template(v-for='(tocItem, tocIdx) in toc')
+            v-card.mb-5(v-if='tocDecoded.length')
+              .overline.pa-5.pb-0(:class='$vuetify.theme.dark ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
+              v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
+                template(v-for='(tocItem, tocIdx) in tocDecoded')
                   v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
                     v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
                     v-list-item-title.px-3 {{tocItem.title}}
@@ -68,7 +68,7 @@
                   template(v-for='tocSubItem in tocItem.children')
                     v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
                       v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
-                      v-list-item-title.px-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
+                      v-list-item-title.px-3.caption.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
                     //- v-divider(inset, v-if='tocIdx < toc.length - 1')
 
             v-card.mb-5(v-if='tags.length > 0')
@@ -100,7 +100,7 @@
                   //-     v-btn.btn-animate-edit(icon, :href='"/h/" + locale + "/" + path', v-on='on', x-small)
                   //-       v-icon(color='grey', dense) mdi-history
                   //-   span History
-                .body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
+                .body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }}
                 .caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
 
             //- v-card.mb-5
@@ -117,7 +117,7 @@
             //-       .caption.grey--text 5 votes
 
             v-card(flat)
-              v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
+              v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
                 v-spacer
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on }')
@@ -346,12 +346,12 @@ export default {
       default: false
     },
     toc: {
-      type: Array,
-      default: () => []
+      type: String,
+      default: ''
     },
     sidebar: {
-      type: Array,
-      default: () => []
+      type: String,
+      default: ''
     },
     navMode: {
       type: String,
@@ -391,7 +391,6 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark'),
     isAuthenticated: get('user/authenticated'),
     rating: {
       get () {
@@ -417,6 +416,12 @@ export default {
       } else {
         return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;`
       }
+    },
+    sidebarDecoded () {
+      return JSON.parse(atob(this.sidebar))
+    },
+    tocDecoded () {
+      return JSON.parse(atob(this.toc))
     }
   },
   created() {
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 23beab22..a0c2019d 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -226,9 +226,26 @@
 
   blockquote {
     padding: 0 1rem 1rem 1rem;
-    border-left: 5px solid mc('blue', '500');
+    background-color: mc('blue-grey', '50');
+    border-left: 55px solid mc('blue-grey', '500');
     border-radius: .5rem;
     margin: 1rem 0;
+    position: relative;
+
+    @at-root .theme--dark & {
+      background-color: mc('blue-grey', '900');
+    }
+
+    &::before {
+      display: inline-block;
+      font: normal normal normal 24px/1 "Material Design Icons";
+      position: absolute;
+      margin-top: -12px;
+      top: 50%;
+      left: -38px;
+      color: rgba(255, 255, 255, .7);
+      content: "\F02FC";
+    }
 
     > p:first-child .emoji {
       margin-right: .5rem;
@@ -244,6 +261,10 @@
       border-color: mc('blue', '300');
       color: mc('blue', '900');
 
+      &::before {
+        content: "\F02FC";
+      }
+
       code {
         background-color: mc('blue', '50');
         color: mc('blue', '800');
@@ -260,6 +281,10 @@
       border-color: mc('orange', '300');
       color: darken(mc('orange', '900'), 10%);
 
+      &::before {
+        content: "\F0026";
+      }
+
       code {
         background-color: mc('orange', '50');
         color: mc('orange', '800');
@@ -277,6 +302,10 @@
       border-color: mc('red', '300');
       color: mc('red', '900');
 
+      &::before {
+        content: "\F0159";
+      }
+
       code {
         background-color: mc('red', '50');
         color: mc('red', '800');
@@ -293,6 +322,10 @@
       border-color: mc('green', '300');
       color: mc('green', '900');
 
+      &::before {
+        content: "\F0E1E";
+      }
+
       code {
         background-color: mc('green', '50');
         color: mc('green', '800');
diff --git a/server/controllers/common.js b/server/controllers/common.js
index 0de5d245..66f4178d 100644
--- a/server/controllers/common.js
+++ b/server/controllers/common.js
@@ -395,17 +395,28 @@ router.get('/*', async (req, res, next) => {
       if (page) {
         _.set(res.locals, 'pageMeta.title', page.title)
         _.set(res.locals, 'pageMeta.description', page.description)
-        const sidebar = await WIKI.models.navigation.getTree({ cache: true, locale: pageArgs.locale, groups: req.user.groups })
+
+        let sdi = 1
+        const sidebar = (await WIKI.models.navigation.getTree({ cache: true, locale: pageArgs.locale, groups: req.user.groups })).map(n => ({
+          i: `sdi-${sdi++}`,
+          k: n.kind,
+          l: n.label,
+          c: n.icon,
+          y: n.targetType,
+          t: n.target
+        }))
+
         const injectCode = {
           css: WIKI.config.theming.injectCSS,
           head: WIKI.config.theming.injectHead,
           body: WIKI.config.theming.injectBody
         }
 
+        if (!_.isString(page.toc)) {
+          page.toc = JSON.stringify(page.toc)
+        }
+
         if (req.query.legacy || req.get('user-agent').indexOf('Trident') >= 0) {
-          if (_.isString(page.toc)) {
-            page.toc = JSON.parse(page.toc)
-          }
           res.render('legacy/page', { page, sidebar, injectCode, isAuthenticated: req.user && req.user.id !== 2 })
         } else {
           res.render('page', { page, sidebar, injectCode })
diff --git a/server/views/page.pug b/server/views/page.pug
index c181b8bf..563c51ce 100644
--- a/server/views/page.pug
+++ b/server/views/page.pug
@@ -19,9 +19,9 @@ block body
       author-name=page.authorName
       :author-id=page.authorId
       :is-published=page.isPublished.toString()
-      :toc=page.toc
+      toc=Buffer.from(page.toc).toString('base64')
       :page-id=page.id
-      :sidebar=sidebar
+      sidebar=Buffer.from(JSON.stringify(sidebar)).toString('base64')
       nav-mode=config.nav.mode
       )
       template(slot='contents')