feat: toc sidebar position

Author: NGPixel

client/components/admin/admin-theme.vue

@@ -55,20 +55,16 @@
               v-card.mt-3.animated.fadeInUp.wait-p1s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title.subtitle-1 {{$t(`admin:theme.options`)}}
-                  v-spacer
-                  v-chip(label, color='white', small).primary--text coming soon
                 v-card-text
                   v-select(
-                    :items='[]'
+                    :items='tocPositions'
                     outlined
                     prepend-icon='mdi-border-vertical'
-                    v-model='config.iconset'
+                    v-model='config.tocPosition'
                     label='Table of Contents Position'
                     persistent-hint
                     hint='Select whether the table of contents is shown on the left, right or not at all.'
-                    disabled
                     )
-
             v-flex(lg6 xs12)
               //- v-card.animated.fadeInUp.wait-p2s
               //-   v-toolbar(color='teal', dark, dense, flat)
@@ -155,6 +151,7 @@ export default {
         theme: 'default',
         darkMode: false,
         iconset: '',
+        tocPosition: 'left',
         injectCSS: '',
         injectHead: '',
         injectBody: ''
@@ -184,6 +181,13 @@ export default {
           width: 100
         }
       ]
+    },
+    tocPositions () {
+      return [
+        { text: 'Left (default)', value: 'left' },
+        { text: 'Right', value: 'right' },
+        { text: 'Hidden', value: 'off' }
+      ]
     }
   },
   watch: {
@@ -209,6 +213,7 @@ export default {
             theme: this.config.theme,
             iconset: this.config.iconset,
             darkMode: this.darkMode,
+            tocPosition: this.config.tocPosition,
             injectCSS: this.config.injectCSS,
             injectHead: this.config.injectHead,
             injectBody: this.config.injectBody

client/graph/admin/theme/theme-mutation-save.gql

@@ -1,6 +1,6 @@
-mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
+mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $tocPosition: String, $injectCSS: String, $injectHead: String, $injectBody: String) {
   theming {
-    setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
+    setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, tocPosition: $tocPosition, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
       responseResult {
         succeeded
         errorCode

client/graph/admin/theme/theme-query-config.gql

@@ -4,6 +4,7 @@ query {
       theme
       iconset
       darkMode
+      tocPosition
       injectCSS
       injectHead
       injectBody

client/store/site.js

@@ -6,6 +6,7 @@ const state = {
   company: siteConfig.company,
   contentLicense: siteConfig.contentLicense,
   dark: siteConfig.darkMode,
+  tocPosition: siteConfig.tocPosition,
   mascot: true,
   title: siteConfig.title,
   logoUrl: siteConfig.logoUrl,

client/themes/default/components/page.vue

@@ -50,7 +50,14 @@
         v-divider
       v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
         v-row.page-header-section(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`')
+          v-col.page-col-content.is-page-header(
+            :offset-xl='tocPosition === `left` ? 2 : 0'
+            :offset-lg='tocPosition === `left` ? 3 : 0'
+            :xl10='tocPosition === `right`'
+            :lg9='tocPosition === `right`'
+            style='margin-top: auto; margin-bottom: auto;'
+            :class='$vuetify.rtl ? `pr-4` : `pl-4`'
+            )
             .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
             .caption.grey--text.text--darken-1 {{description}}
             .page-edit-shortcuts(v-if='editShortcutsObj.editMenuBar')
@@ -74,7 +81,13 @@
       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')
+          v-flex.page-col-sd(
+            v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
+            :order-xs1='tocPosition !== `right`'
+            :order-xs2='tocPosition === `right`'
+            lg3
+            xl2
+            )
             v-card.page-toc-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` : ``')
@@ -181,10 +194,10 @@
             v-card.page-shortcuts-card(flat)
               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 }')
-                    v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
-                  span {{$t('common:page.bookmark')}}
+                //- v-tooltip(bottom)
+                //-   template(v-slot:activator='{ on }')
+                //-     v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
+                //-   span {{$t('common:page.bookmark')}}
                 v-menu(offset-y, bottom, min-width='300')
                   template(v-slot:activator='{ on: menu }')
                     v-tooltip(bottom)
@@ -203,7 +216,13 @@
                   span {{$t('common:page.printFormat')}}
                 v-spacer
 
-          v-flex.page-col-content(xs12, lg9, xl10)
+          v-flex.page-col-content(
+            xs12
+            :lg9='tocPosition !== `off`'
+            :xl10='tocPosition !== `off`'
+            :order-xs1='tocPosition === `right`'
+            :order-xs2='tocPosition !== `right`'
+            )
             v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
               template(v-slot:activator='{ on: onEditActivator }')
                 v-speed-dial(
@@ -536,6 +555,7 @@ export default {
     tocDecoded () {
       return JSON.parse(Buffer.from(this.toc, 'base64').toString())
     },
+    tocPosition: get('site/tocPosition'),
     hasAdminPermission: get('page/[email protected]'),
     hasWritePagesPermission: get('page/[email protected]'),
     hasManagePagesPermission: get('page/[email protected]'),

server/app/data.yml

@@ -59,6 +59,7 @@ defaults:
       theme: 'default'
       iconset: 'md'
       darkMode: false
+      tocPosition: 'left'
     auth:
       autoLogin: false
       enforce2FA: false

server/graph/resolvers/theming.js

@@ -24,6 +24,7 @@ module.exports = {
         theme: WIKI.config.theming.theme,
         iconset: WIKI.config.theming.iconset,
         darkMode: WIKI.config.theming.darkMode,
+        tocPosition: WIKI.config.theming.tocPosition || 'left',
         injectCSS: new CleanCSS({ format: 'beautify' }).minify(WIKI.config.theming.injectCSS).styles,
         injectHead: WIKI.config.theming.injectHead,
         injectBody: WIKI.config.theming.injectBody
@@ -44,6 +45,7 @@ module.exports = {
           theme: args.theme,
           iconset: args.iconset,
           darkMode: args.darkMode,
+          tocPosition: args.tocPosition || 'left',
           injectCSS: args.injectCSS || '',
           injectHead: args.injectHead || '',
           injectBody: args.injectBody || ''

server/graph/schemas/theming.graphql

@@ -28,6 +28,7 @@ type ThemingMutation {
     theme: String!
     iconset: String!
     darkMode: Boolean!
+    tocPosition: String
     injectCSS: String
     injectHead: String
     injectBody: String
@@ -42,6 +43,7 @@ type ThemingConfig {
   theme: String!
   iconset: String!
   darkMode: Boolean!
+  tocPosition: String
   injectCSS: String
   injectHead: String
   injectBody: String

server/master.js

@@ -149,6 +149,7 @@ module.exports = async () => {
       title: WIKI.config.title,
       theme: WIKI.config.theming.theme,
       darkMode: WIKI.config.theming.darkMode,
+      tocPosition: WIKI.config.theming.tocPosition,
       lang: WIKI.config.lang.code,
       rtl: WIKI.config.lang.rtl,
       company: WIKI.config.company,