From eecee183c827fd3ab89d40e2df8e0a63a635c841 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 13 May 2020 10:58:42 +0300
Subject: [PATCH] Redesign content submenu

---
 src/AppMenu.vue                               | 81 ++++++++++++++++++-
 src/assets/styles/app/_content.scss           | 42 ----------
 src/assets/styles/app/_menu.scss              | 23 ++++++
 src/views/accessibility/AccessibilityDemo.vue |  4 +-
 src/views/datatable/DataTableBasicDemo.vue    |  7 --
 src/views/datatable/DataTableColGroupDemo.vue |  7 --
 .../datatable/DataTableColResizeDemo.vue      |  6 --
 .../datatable/DataTableColToggleDemo.vue      |  7 --
 .../datatable/DataTableContextMenuDemo.vue    |  6 --
 src/views/datatable/DataTableCrudDemo.vue     |  6 --
 src/views/datatable/DataTableDemo.vue         |  6 +-
 .../datatable/DataTableDynamicColumnsDemo.vue |  6 --
 src/views/datatable/DataTableEditDemo.vue     | 10 ---
 src/views/datatable/DataTableExportDemo.vue   |  6 --
 src/views/datatable/DataTableFilterDemo.vue   |  6 --
 src/views/datatable/DataTableLazyDemo.vue     |  6 --
 .../datatable/DataTablePaginatorDemo.vue      |  8 +-
 src/views/datatable/DataTableReorderDemo.vue  |  6 --
 .../datatable/DataTableResponsiveDemo.vue     |  6 --
 .../datatable/DataTableRowExpandDemo.vue      |  6 --
 src/views/datatable/DataTableRowGroupDemo.vue |  6 --
 src/views/datatable/DataTableScrollDemo.vue   |  6 --
 .../datatable/DataTableSelectionDemo.vue      |  6 --
 src/views/datatable/DataTableSizeDemo.vue     |  6 --
 src/views/datatable/DataTableSortDemo.vue     |  6 --
 src/views/datatable/DataTableStateDemo.vue    |  6 --
 src/views/datatable/DataTableStyleDemo.vue    |  6 --
 src/views/datatable/DataTableSubMenu.vue      | 30 -------
 .../datatable/DataTableTemplatingDemo.vue     |  6 --
 src/views/galleria/GalleriaBasicDemo.vue      |  6 --
 src/views/galleria/GalleriaCaptionDemo.vue    |  6 --
 src/views/galleria/GalleriaCircularDemo.vue   |  6 --
 src/views/galleria/GalleriaDemo.vue           |  4 -
 src/views/galleria/GalleriaFullScreenDemo.vue |  6 --
 src/views/galleria/GalleriaIndicatorDemo.vue  |  6 --
 src/views/galleria/GalleriaPreviewDemo.vue    |  6 --
 src/views/galleria/GalleriaResponsiveDemo.vue |  6 --
 src/views/galleria/GalleriaSubMenu.vue        | 15 ----
 src/views/galleria/GalleriaThumbnailDemo.vue  |  6 --
 src/views/tree/TreeDemo.vue                   |  6 +-
 src/views/tree/TreeFilterDemo.vue             |  6 --
 src/views/tree/TreeLazyDemo.vue               |  6 --
 src/views/tree/TreeSelectionDemo.vue          |  6 --
 src/views/tree/TreeSubMenu.vue                | 11 ---
 src/views/tree/TreeTemplatingDemo.vue         |  7 --
 .../treetable/TreeTableColResizeDemo.vue      |  6 --
 .../treetable/TreeTableColToggleDemo.vue      |  6 --
 src/views/treetable/TreeTableDemo.vue         |  6 +-
 src/views/treetable/TreeTableFilterDemo.vue   |  6 --
 src/views/treetable/TreeTableLazyDemo.vue     |  7 --
 .../treetable/TreeTablePaginatorDemo.vue      |  7 --
 .../treetable/TreeTableResponsiveDemo.vue     |  6 --
 .../treetable/TreeTableSelectionDemo.vue      |  6 --
 src/views/treetable/TreeTableSizeDemo.vue     |  6 --
 src/views/treetable/TreeTableSortDemo.vue     |  6 --
 src/views/treetable/TreeTableSubMenu.vue      | 17 ----
 .../treetable/TreeTableTemplatingDemo.vue     |  6 --
 57 files changed, 106 insertions(+), 421 deletions(-)
 delete mode 100755 src/views/datatable/DataTableSubMenu.vue
 delete mode 100755 src/views/galleria/GalleriaSubMenu.vue
 delete mode 100755 src/views/tree/TreeSubMenu.vue
 delete mode 100755 src/views/treetable/TreeTableSubMenu.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 00c4ac91a..21b6d6e6c 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -60,15 +60,71 @@
             </span>
             <div>
                 <router-link to="/carousel">Carousel</router-link>
-                <router-link to="/datatable">DataTable</router-link>
+                <router-link to="/datatable" v-slot="{href,route,navigate,isActive,isExactActive}">
+                    <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
+                        <a :href="href" @click="navigate">DataTable</a>
+                        <ul>
+                            <li><router-link to="/datatable/basic">Basic</router-link></li>
+                            <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
+                            <li><router-link to="/datatable/templating">Templating</router-link></li>
+                            <li><router-link to="/datatable/size">Size</router-link></li>
+                            <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
+                            <li><router-link to="/datatable/paginator">Paginator</router-link></li>
+                            <li><router-link to="/datatable/sort">Sort</router-link></li>
+                            <li><router-link to="/datatable/filter">Filter</router-link></li>
+                            <li><router-link to="/datatable/selection">Selection</router-link></li>
+                            <li><router-link to="/datatable/lazy">Lazy</router-link></li>
+                            <li><router-link to="/datatable/scroll">Scroll</router-link></li>
+                            <li><router-link to="/datatable/rowexpand">Expand</router-link></li>
+                            <li><router-link to="/datatable/edit">Edit</router-link></li>
+                            <li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
+                            <li><router-link to="/datatable/colresize">ColResize</router-link></li>
+                            <li><router-link to="/datatable/reorder">Reorder</router-link></li>
+                            <li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
+                            <li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
+                            <li><router-link to="/datatable/responsive">Responsive</router-link></li>
+                            <li><router-link to="/datatable/export">Export</router-link></li>
+                            <li><router-link to="/datatable/state">State</router-link></li>
+                            <li><router-link to="/datatable/style">Style</router-link></li>
+                            <li><router-link to="/datatable/crud">Crud</router-link></li>
+                        </ul>
+                    </div>
+                </router-link>
+
                 <router-link to="/dataview">DataView</router-link>
                 <router-link to="/fullcalendar">FullCalendar</router-link>
                 <router-link to="/orderlist">OrderList</router-link>
                 <router-link to="/organizationchart">OrganizationChart</router-link>
                 <router-link to="/paginator">Paginator</router-link>
                 <router-link to="/picklist">PickList</router-link>
-                <router-link to="/tree">Tree</router-link>
-                <router-link to="/treetable">TreeTable</router-link>
+                <router-link to="/tree" v-slot="{href,route,navigate,isActive,isExactActive}">
+                    <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
+                        <a :href="href" @click="navigate">Tree</a>
+                        <ul>
+                            <li><router-link to="/tree/selection">Selection</router-link></li>
+                            <li><router-link to="/tree/lazy">Lazy</router-link></li>
+                            <li><router-link to="/tree/templating">Templating</router-link></li>
+                            <li><router-link to="/tree/filter">Filter</router-link></li>
+                        </ul>
+                    </div>
+                </router-link>
+                <router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}">
+                    <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
+                        <a :href="href" @click="navigate">TreeTable</a>
+                        <ul>
+                            <li><router-link to="/treetable/templating">Templating</router-link></li>
+                            <li><router-link to="/treetable/size">Size</router-link></li>
+                            <li><router-link to="/treetable/paginator">Paginator</router-link></li>
+                            <li><router-link to="/treetable/sort">Sort</router-link></li>
+                            <li><router-link to="/treetable/filter">Filter</router-link></li>
+                            <li><router-link to="/treetable/selection">Selection</router-link></li>
+                            <li><router-link to="/treetable/lazy">Lazy</router-link></li>
+                            <li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
+                            <li><router-link to="/treetable/colresize">Resize</router-link></li>
+                            <li><router-link to="/treetable/responsive">Responsive</router-link></li>
+                        </ul>
+                    </div>
+                </router-link>
             </div>
 
             <span>
@@ -150,9 +206,26 @@
                 <span>Image</span>
             </span>
             <div>
-                <router-link to="/galleria">Galleria</router-link>
+                <router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}">
+                    <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
+                        <a :href="href" @click="navigate">Galleria</a>
+                        <ul>
+                            <li><router-link to="/galleria">Documentation</router-link></li>
+                            <li><router-link to="/galleria/basic">Basic</router-link></li>
+                            <li><router-link to="/galleria/indicator">Indicator</router-link></li>
+                            <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
+                            <li><router-link to="/galleria/preview">Preview</router-link></li>
+                            <li><router-link to="/galleria/responsive">Responsive</router-link></li>
+                            <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
+                            <li><router-link to="/galleria/circular">Circular</router-link></li>
+                            <li><router-link to="/galleria/caption">Caption</router-link></li>
+                        </ul>
+                    </div>
+                </router-link>
             </div>
 
+            
+
             <span>
                 <i class="pi pi-share-alt"></i>
                 <span>Misc</span>
diff --git a/src/assets/styles/app/_content.scss b/src/assets/styles/app/_content.scss
index 770fbb2f6..7611b870d 100644
--- a/src/assets/styles/app/_content.scss
+++ b/src/assets/styles/app/_content.scss
@@ -5,48 +5,6 @@
     .content-section {
         padding: 2rem;
 
-        &.content-submenu {
-            background-color: var(--layer-1);
-            color: var(--text-color);
-
-            ul {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-
-                li {
-                    list-style: none;
-                    width: 20%;
-                    display: inline-block;
-                    padding: .25rem;
-
-                    a {
-                        color: var(--text-color);
-                        display: block;
-                        width: 100%;
-                        border: 1px solid transparent;
-                        padding: .5rem 1rem;
-                        border-radius: 3px;
-                        transition: background-color .2s;
-
-                        &:hover {
-                            background-color: var(--layer-2);
-                        }
-
-                        &:focus {
-                            outline: 0 none;
-                            transition: box-shadow .2s;
-                            box-shadow: 0 0 0 0.2em $focusBorderColor;
-                        }
-
-                        &.router-link-exact-active {
-                            font-weight: 700;
-                        }
-                    }
-                }
-            }
-        }
-
         &.introduction {
             background-color: var(--primary-color);
             color: var(--primary-color-text);
diff --git a/src/assets/styles/app/_menu.scss b/src/assets/styles/app/_menu.scss
index b9f94e0e7..f54f45eb3 100644
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@@ -56,6 +56,29 @@
                     font-weight: 700;
                 }
             }
+
+            > div {
+                &.router-link-active {
+                    > a {
+                        font-weight: 700;
+                    }      
+                    
+                    ul {
+                        display: block;
+                    }
+                }
+
+                ul {
+                    display: none;
+                    padding: .5rem 0;
+                    margin: 0;
+                    list-style-type: none;
+
+                    a {
+                        padding: .5rem .5rem .5rem 2rem;
+                    }
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/views/accessibility/AccessibilityDemo.vue b/src/views/accessibility/AccessibilityDemo.vue
index 8627c5b0f..d9442664b 100644
--- a/src/views/accessibility/AccessibilityDemo.vue
+++ b/src/views/accessibility/AccessibilityDemo.vue
@@ -9,9 +9,9 @@
 
         <div class="content-section documentation">
             <h3 style="margin-top:0">WCAG</h3>
-            <p>The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) 
+            <p>The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI)
                 of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.</p>
-            
+
             <h3>Accessible Components</h3>
             <p>PrimeVue components are implemented based on the WCAG guidelines and follow the best practices outlined here.</p>
             <ul>
diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
index 723c79b35..f182f0fa1 100755
--- a/src/views/datatable/DataTableBasicDemo.vue
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Basic</h1>
@@ -58,8 +56,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
-
 export default {
     data() {
         return {
@@ -72,9 +68,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index 46122fd93..286196609 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Column Group</h1>
@@ -161,8 +159,6 @@ export default {
 </template>
 
 <script>
-import DataTableSubMenu from './DataTableSubMenu';
-
 export default {
     data() {
         return {
@@ -201,9 +197,6 @@ export default {
 
             return '$' + total.toLocaleString();
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index ba33690e5..fc52ccbb8 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Column Resize</h1>
@@ -77,7 +75,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -91,9 +88,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableColToggleDemo.vue b/src/views/datatable/DataTableColToggleDemo.vue
index fae67a631..fbd62888c 100755
--- a/src/views/datatable/DataTableColToggleDemo.vue
+++ b/src/views/datatable/DataTableColToggleDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Column Toggle</h1>
@@ -74,8 +72,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
-
 export default {
     data() {
         return {
@@ -98,9 +94,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableContextMenuDemo.vue b/src/views/datatable/DataTableContextMenuDemo.vue
index 646ac7edb..b84db5e76 100755
--- a/src/views/datatable/DataTableContextMenuDemo.vue
+++ b/src/views/datatable/DataTableContextMenuDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - ContextMenu</h1>
@@ -80,7 +78,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -112,9 +109,6 @@ export default {
             this.$toast.add({severity: 'info', summary: 'Car Deleted', detail: car.vin + ' - ' + car.brand});
             this.selectedCar = null;
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index aaaef85ab..6dc1413c7 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Crud</h1>
@@ -191,7 +189,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -258,9 +255,6 @@ export default {
 
             return index;
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 559fae23f..50447df7f 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable</h1>
@@ -111,7 +109,6 @@
 
 <script>
 import CustomerService from '../../service/CustomerService';
-import DataTableSubMenu from './DataTableSubMenu';
 import DataTableDoc from './DataTableDoc';
 import '../../assets/styles/flags.css';
 
@@ -174,8 +171,7 @@ export default {
         }
     },
     components: {
-        'DataTableDoc': DataTableDoc,
-        'DataTableSubMenu': DataTableSubMenu
+        'DataTableDoc': DataTableDoc
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableDynamicColumnsDemo.vue b/src/views/datatable/DataTableDynamicColumnsDemo.vue
index 250ea0dc1..5fb9562b2 100755
--- a/src/views/datatable/DataTableDynamicColumnsDemo.vue
+++ b/src/views/datatable/DataTableDynamicColumnsDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Dynamic Columns</h1>
@@ -60,7 +58,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -82,9 +79,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index e38b97755..a4fe3eeba 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - InCell Edit</h1>
@@ -150,7 +148,6 @@
 
 <CodeHighlight lang="javascript">
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 import Vue from 'vue';
 
 export default {
@@ -241,9 +238,6 @@ export default {
         this.carService.getCarsSmall().then(data => this.cars1 = data);
         this.carService.getCarsSmall().then(data => this.cars2 = data);
         this.carService.getCarsSmall().then(data => this.cars3 = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </CodeHighlight>
@@ -255,7 +249,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 import Vue from 'vue';
 
 export default {
@@ -346,9 +339,6 @@ export default {
         this.carService.getCarsSmall().then(data => this.cars1 = data);
         this.carService.getCarsSmall().then(data => this.cars2 = data);
         this.carService.getCarsSmall().then(data => this.cars3 = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableExportDemo.vue b/src/views/datatable/DataTableExportDemo.vue
index f0991256c..bdee0b310 100755
--- a/src/views/datatable/DataTableExportDemo.vue
+++ b/src/views/datatable/DataTableExportDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Export</h1>
@@ -73,7 +71,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -92,9 +89,6 @@ export default {
         exportCSV() {
             this.$refs.dt.exportCSV();
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index aa6f5b78e..5af3b0709 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Filter</h1>
@@ -145,7 +143,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -182,9 +179,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsLarge().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableLazyDemo.vue b/src/views/datatable/DataTableLazyDemo.vue
index c37987575..5c0a03663 100755
--- a/src/views/datatable/DataTableLazyDemo.vue
+++ b/src/views/datatable/DataTableLazyDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Lazy</h1>
@@ -85,7 +83,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -121,9 +118,6 @@ export default {
                 this.loading = false;
             }, 1000);
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 92490b970..40c0293ec 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -1,8 +1,6 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
-		<div class="content-section introduction">
+        <div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Paginator</h1>
 				<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
@@ -70,7 +68,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -84,9 +81,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsLarge().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableReorderDemo.vue b/src/views/datatable/DataTableReorderDemo.vue
index 9ffeb643d..775a861ba 100755
--- a/src/views/datatable/DataTableReorderDemo.vue
+++ b/src/views/datatable/DataTableReorderDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Reorder</h1>
@@ -71,7 +69,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -102,9 +99,6 @@ export default {
             this.cars = event.value;
             this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index 6a90b119f..f24f8c959 100755
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Responsive</h1>
@@ -138,7 +136,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -152,9 +149,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsMedium().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index 09daf5440..c5f147438 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Row Expansion</h1>
@@ -119,7 +117,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -150,9 +147,6 @@ export default {
             this.expandedRows = null;
             this.$toast.add({severity: 'success', summary: 'All Rows Collapsed', life: 3000});
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index e44820a9a..e564fd3dc 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Row Grouping</h1>
@@ -168,7 +166,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -204,9 +201,6 @@ export default {
 
             return total;
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index 97193dc26..a14577c21 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Scroll</h1>
@@ -285,7 +283,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -387,9 +384,6 @@ export default {
                     this.lazyCars = this.loadChunk(event.first, event.rows)
             }, 250);
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index b70b8ace2..a592fc1fc 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Selection</h1>
@@ -182,7 +180,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -210,9 +207,6 @@ export default {
         onRowUnselect(event) {
             this.$toast.add({severity: 'warn', summary: 'Car Unselected', detail: 'Vin: ' + event.data.vin, life: 3000});
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index 8c4da2195..481c706e9 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Size</h1>
@@ -104,7 +102,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -118,9 +115,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index b4f90bb6a..3fd8b72c4 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Sort</h1>
@@ -108,7 +106,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -122,9 +119,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index c1259b543..6772f7a2b 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - State</h1>
@@ -237,7 +235,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -276,9 +273,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsMedium().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableStyleDemo.vue b/src/views/datatable/DataTableStyleDemo.vue
index 1bf6b6258..c3ea33aa9 100755
--- a/src/views/datatable/DataTableStyleDemo.vue
+++ b/src/views/datatable/DataTableStyleDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Style</h1>
@@ -93,7 +91,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -113,9 +110,6 @@ export default {
         rowClass(data) {
             return data.color === 'Orange' ? 'orange-car': null;
         }
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/datatable/DataTableSubMenu.vue b/src/views/datatable/DataTableSubMenu.vue
deleted file mode 100755
index eff7fd7bc..000000000
--- a/src/views/datatable/DataTableSubMenu.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <div class="content-section content-submenu p-clearfix">
-        <ul>
-            <li><router-link to="/datatable">Documentation</router-link></li>
-            <li><router-link to="/datatable/basic">Basic</router-link></li>
-            <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
-            <li><router-link to="/datatable/templating">Templating</router-link></li>
-            <li><router-link to="/datatable/size">Size</router-link></li>
-            <li><router-link to="/datatable/colgroup">ColGroup</router-link></li>
-            <li><router-link to="/datatable/paginator">Paginator</router-link></li>
-            <li><router-link to="/datatable/sort">Sort</router-link></li>
-            <li><router-link to="/datatable/filter">Filter</router-link></li>
-            <li><router-link to="/datatable/selection">Selection</router-link></li>
-            <li><router-link to="/datatable/lazy">Lazy</router-link></li>
-            <li><router-link to="/datatable/scroll">Scroll</router-link></li>
-            <li><router-link to="/datatable/rowexpand">Expand</router-link></li>
-            <li><router-link to="/datatable/edit">Edit</router-link></li>
-            <li><router-link to="/datatable/coltoggle">ColToggle</router-link></li>
-            <li><router-link to="/datatable/colresize">ColResize</router-link></li>
-            <li><router-link to="/datatable/reorder">Reorder</router-link></li>
-            <li><router-link to="/datatable/rowgroup">RowGroup</router-link></li>
-            <li><router-link to="/datatable/contextmenu">ContextMenu</router-link></li>
-            <li><router-link to="/datatable/responsive">Responsive</router-link></li>
-            <li><router-link to="/datatable/export">Export</router-link></li>
-            <li><router-link to="/datatable/state">State</router-link></li>
-            <li><router-link to="/datatable/style">Style</router-link></li>
-            <li><router-link to="/datatable/crud">Crud</router-link></li>
-        </ul>
-    </div>
-</template>
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 9bc7d5fdd..60a6198ef 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -1,7 +1,5 @@
 <template>
 	<div>
-        <DataTableSubMenu />
-
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Templating</h1>
@@ -103,7 +101,6 @@ export default {
 
 <script>
 import CarService from '../../service/CarService';
-import DataTableSubMenu from './DataTableSubMenu';
 
 export default {
     data() {
@@ -117,9 +114,6 @@ export default {
     },
     mounted() {
         this.carService.getCarsSmall().then(data => this.cars = data);
-    },
-    components: {
-        'DataTableSubMenu': DataTableSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaBasicDemo.vue b/src/views/galleria/GalleriaBasicDemo.vue
index 41d8b88e7..489a9ec48 100755
--- a/src/views/galleria/GalleriaBasicDemo.vue
+++ b/src/views/galleria/GalleriaBasicDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Basic</h1>
@@ -129,7 +127,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -170,9 +167,6 @@ export default {
                 }
             }
         }
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index 0c9478ce8..c75ce4648 100755
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Caption</h1>
@@ -88,7 +86,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -116,9 +113,6 @@ export default {
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaCircularDemo.vue b/src/views/galleria/GalleriaCircularDemo.vue
index e36d1aa1d..8ebd3b720 100755
--- a/src/views/galleria/GalleriaCircularDemo.vue
+++ b/src/views/galleria/GalleriaCircularDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Circular</h1>
@@ -108,7 +106,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -136,9 +133,6 @@ export default {
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaDemo.vue b/src/views/galleria/GalleriaDemo.vue
index 99d623e08..e617920a7 100755
--- a/src/views/galleria/GalleriaDemo.vue
+++ b/src/views/galleria/GalleriaDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div class="galleria-demo">
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Galleria</h1>
@@ -41,7 +39,6 @@
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 import GalleriaDoc from './GalleriaDoc';
 
 export default {
@@ -127,7 +124,6 @@ export default {
         }
     },
     components: {
-        'GalleriaSubMenu': GalleriaSubMenu,
         'GalleriaDoc': GalleriaDoc
     }
 }
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index 5fabc17a3..139c8c91f 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - FullScreen</h1>
@@ -184,7 +182,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -240,9 +237,6 @@ export default {
             this.activeItemIndex = index;
             this.displayCustom = true;
         }
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaIndicatorDemo.vue b/src/views/galleria/GalleriaIndicatorDemo.vue
index 3196ebd88..5ac394dae 100755
--- a/src/views/galleria/GalleriaIndicatorDemo.vue
+++ b/src/views/galleria/GalleriaIndicatorDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Indicator</h1>
@@ -463,7 +461,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -495,9 +492,6 @@ export default {
             this.images = data;
             this.images2 = data.slice(0, 5);
         });
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaPreviewDemo.vue b/src/views/galleria/GalleriaPreviewDemo.vue
index 80e2c72a8..aab2eef01 100755
--- a/src/views/galleria/GalleriaPreviewDemo.vue
+++ b/src/views/galleria/GalleriaPreviewDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Preview</h1>
@@ -234,7 +232,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -262,9 +259,6 @@ export default {
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaResponsiveDemo.vue b/src/views/galleria/GalleriaResponsiveDemo.vue
index e4163efa5..f98985a2c 100755
--- a/src/views/galleria/GalleriaResponsiveDemo.vue
+++ b/src/views/galleria/GalleriaResponsiveDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Responsive</h1>
@@ -84,7 +82,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -116,9 +113,6 @@ export default {
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/galleria/GalleriaSubMenu.vue b/src/views/galleria/GalleriaSubMenu.vue
deleted file mode 100755
index 957c41c2e..000000000
--- a/src/views/galleria/GalleriaSubMenu.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div class="content-section content-submenu p-clearfix">
-        <ul>
-            <li><router-link to="/galleria">Documentation</router-link></li>
-            <li><router-link to="/galleria/basic">Basic</router-link></li>
-            <li><router-link to="/galleria/indicator">Indicator</router-link></li>
-            <li><router-link to="/galleria/thumbnail">Thumbnail</router-link></li>
-            <li><router-link to="/galleria/preview">Preview</router-link></li>
-            <li><router-link to="/galleria/responsive">Responsive</router-link></li>
-            <li><router-link to="/galleria/fullscreen">FullScreen</router-link></li>
-            <li><router-link to="/galleria/circular">Circular</router-link></li>
-            <li><router-link to="/galleria/caption">Caption</router-link></li>
-        </ul>
-    </div>
-</template>
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index 6c31b70ee..927315e8d 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <GalleriaSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1 style="margin-bottom: 0px;">Galleria - Thumbnail</h1>
@@ -206,7 +204,6 @@ export default {
 
 <script>
 import GalleriaService from '../../service/GalleriaService';
-import GalleriaSubMenu from './GalleriaSubMenu';
 
 export default {
     data() {
@@ -244,9 +241,6 @@ export default {
 	},
 	mounted() {
 		this.galleriaService.getImages().then(data => this.images = data);
-    },
-    components: {
-        'GalleriaSubMenu': GalleriaSubMenu
     }
 }
 </script>
diff --git a/src/views/tree/TreeDemo.vue b/src/views/tree/TreeDemo.vue
index 6524ed5af..c097681d9 100755
--- a/src/views/tree/TreeDemo.vue
+++ b/src/views/tree/TreeDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree</h1>
@@ -27,7 +25,6 @@
 <script>
 import NodeService from '../../service/NodeService';
 import TreeDoc from './TreeDoc';
-import TreeSubMenu from './TreeSubMenu';
 
 export default {
     data() {
@@ -65,8 +62,7 @@ export default {
         }
     },
     components: {
-        'TreeDoc': TreeDoc,
-        'TreeSubMenu': TreeSubMenu
+        'TreeDoc': TreeDoc
     }
 }
 </script>
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index c57e12d84..66c54ce8d 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree - Filter</h1>
@@ -77,7 +75,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeSubMenu from './TreeSubMenu';
 
 export default {
     data() {
@@ -112,9 +109,6 @@ export default {
                 }
             }
         }
-    },
-    components: {
-        'TreeSubMenu': TreeSubMenu
     }
 }
 </script>
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index 8c8ca9829..19eba8019 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree - Lazy</h1>
@@ -96,7 +94,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeSubMenu from './TreeSubMenu';
 
 export default {
     data() {
@@ -158,9 +155,6 @@ export default {
                 leaf: false
             }];
         }
-    },
-    components: {
-        'TreeSubMenu': TreeSubMenu
     }
 }
 </script>
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index ed8a37310..7f7c711e4 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree - Selection</h1>
@@ -89,7 +87,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeSubMenu from './TreeSubMenu';
 
 export default {
     data() {
@@ -116,9 +113,6 @@ export default {
         onNodeUnselect(node) {
             this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
         }
-    },
-    components: {
-        'TreeSubMenu': TreeSubMenu
     }
 }
 </script>
diff --git a/src/views/tree/TreeSubMenu.vue b/src/views/tree/TreeSubMenu.vue
deleted file mode 100755
index 3ae91cb8e..000000000
--- a/src/views/tree/TreeSubMenu.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <div class="content-section content-submenu p-clearfix">
-        <ul>
-            <li><router-link to="/tree">Documentation</router-link></li>
-            <li><router-link to="/tree/selection">Selection</router-link></li>
-            <li><router-link to="/tree/lazy">Lazy</router-link></li>
-            <li><router-link to="/tree/templating">Templating</router-link></li>
-            <li><router-link to="/tree/filter">Filter</router-link></li>
-        </ul>
-    </div>
-</template>
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index cf2ea3ba8..fe890cece 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree - Templating</h1>
@@ -73,8 +71,6 @@ export default {
 </template>
 
 <script>
-import TreeSubMenu from './TreeSubMenu';
-
 export default {
     data() {
         return {
@@ -101,9 +97,6 @@ export default {
                 }
             ]
         }
-    },
-    components: {
-        'TreeSubMenu': TreeSubMenu
     }
 }
 </script>
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index aad561d3f..743e51f65 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>TreeTable - Column Resize</h1>
@@ -74,7 +72,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -88,9 +85,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index b72a9abb5..fdfea8509 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Column Toggle</h1>
@@ -74,7 +72,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -97,9 +94,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableDemo.vue b/src/views/treetable/TreeTableDemo.vue
index 33b3bb016..824d42047 100755
--- a/src/views/treetable/TreeTableDemo.vue
+++ b/src/views/treetable/TreeTableDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable</h1>
@@ -42,7 +40,6 @@
 <script>
 import NodeService from '../../service/NodeService';
 import TreeTableDoc from './TreeTableDoc';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -87,8 +84,7 @@ export default {
         }
     },
     components: {
-        'TreeTableDoc': TreeTableDoc,
-        'TreeTableSubMenu': TreeTableSubMenu
+        'TreeTableDoc': TreeTableDoc
     }
 }
 </script>
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index 697c6d9f6..54b8c99c8 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Filter</h1>
@@ -146,7 +144,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -161,9 +158,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 499094289..dd2da17a2 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Lazy</h1>
@@ -129,8 +127,6 @@ export default {
 </template>
 
 <script>
-import TreeTableSubMenu from './TreeTableSubMenu';
-
 export default {
     data() {
         return {
@@ -215,9 +211,6 @@ export default {
 
             return nodes;
         }
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index 498412037..0bd190d58 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Paginator</h1>
@@ -73,8 +71,6 @@ export default {
 </template>
 
 <script>
-import TreeTableSubMenu from './TreeTableSubMenu';
-
 export default {
     data() {
         return {
@@ -107,9 +103,6 @@ export default {
         }
 
         this.nodes = files;
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index c98b9f1c0..ccdd7a550 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Responsive</h1>
@@ -94,7 +92,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -108,9 +105,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
diff --git a/src/views/treetable/TreeTableSelectionDemo.vue b/src/views/treetable/TreeTableSelectionDemo.vue
index f2a54789e..60a616a51 100755
--- a/src/views/treetable/TreeTableSelectionDemo.vue
+++ b/src/views/treetable/TreeTableSelectionDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Selection</h1>
@@ -129,7 +127,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -156,9 +153,6 @@ export default {
         onNodeUnselect(node) {
             this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
         }
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableSizeDemo.vue b/src/views/treetable/TreeTableSizeDemo.vue
index 4e281e48c..37bfb8c1f 100644
--- a/src/views/treetable/TreeTableSizeDemo.vue
+++ b/src/views/treetable/TreeTableSizeDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Size</h1>
@@ -98,7 +96,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -112,9 +109,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index c9b027b15..5d466c184 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Sort</h1>
@@ -87,7 +85,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -101,9 +98,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/treetable/TreeTableSubMenu.vue b/src/views/treetable/TreeTableSubMenu.vue
deleted file mode 100755
index 366c14efb..000000000
--- a/src/views/treetable/TreeTableSubMenu.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div class="content-section content-submenu p-clearfix">
-        <ul>
-            <li><router-link to="/treetable">Documentation</router-link></li>
-            <li><router-link to="/treetable/templating">Templating</router-link></li>
-            <li><router-link to="/treetable/size">Size</router-link></li>
-            <li><router-link to="/treetable/paginator">Paginator</router-link></li>
-            <li><router-link to="/treetable/sort">Sort</router-link></li>
-            <li><router-link to="/treetable/filter">Filter</router-link></li>
-            <li><router-link to="/treetable/selection">Selection</router-link></li>
-            <li><router-link to="/treetable/lazy">Lazy</router-link></li>
-            <li><router-link to="/treetable/coltoggle">ColToggle</router-link></li>
-            <li><router-link to="/treetable/colresize">Resize</router-link></li>
-            <li><router-link to="/treetable/responsive">Responsive</router-link></li>
-        </ul>
-    </div>
-</template>
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index 27672e2c4..1688f1c74 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -1,7 +1,5 @@
 <template>
     <div>
-        <TreeTableSubMenu />
-
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable - Templating</h1>
@@ -90,7 +88,6 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
-import TreeTableSubMenu from './TreeTableSubMenu';
 
 export default {
     data() {
@@ -104,9 +101,6 @@ export default {
     },
     mounted() {
         this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
-    },
-    components: {
-        'TreeTableSubMenu': TreeTableSubMenu
     }
 }
 </script>
\ No newline at end of file