diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-03 23:25:50 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-09-17 01:47:38 +0300 |
| commit | 0214fedb49c4fcae85be9f6e6c542932518a5ffc (patch) | |
| tree | 1aadcb2767e4a21d8b19ff69b562a2eb0d1cdbc1 /src/env/env.md | |
| parent | 14717e338482cceb0f417d4af20a22fb165d6bc5 (diff) | |
| download | webui-vue-0214fedb49c4fcae85be9f6e6c542932518a5ffc.tar.xz | |
Update config to enable custom app navigation
- Update documentation to include navigation customizations
- Created an IBM specific application navigation file to demonstrate
how to remove KVM navigation item
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I2ea61e9f3a43e6821f274ed90e0eed18afabccb7
Diffstat (limited to 'src/env/env.md')
| -rw-r--r-- | src/env/env.md | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/src/env/env.md b/src/env/env.md index 191cd045..8d53b023 100644 --- a/src/env/env.md +++ b/src/env/env.md @@ -5,6 +5,7 @@ This document provides instructions for how to add environment specific modifica - [Setup](#setup) - [Store](#store) - [Router](#router) +- [App Navigation](#app-navigation) - [Theming](#theming) - [Local development](#local-development) - [Production build](#production-build) @@ -81,6 +82,18 @@ router.addRoutes([ export default router; ``` +## App navigation + +The Vue Router definition is closely tied to the app navigation but should be configured separately. +The Vue Router is responsible for defining the application routes which is not always the same as what is visible in the app navigation. +This configuration will make customizations to the rendered markup in src/components/AppNavigation/AppNavigation.vue. + +1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key value pair to the new .env file. +2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation` + >The filename needs to match the `VUE_APP_ENV_NAME` value defined in the .env file. The AppNavigationMixin import in `src/components/AppNavigation/AppNavigation.vue` will resolve to this new file. +3. Your custom mixin should follow a very similar structure to the default AppNavigationMixin.js file. It should include a data property named `navigationItems` that should be an array of of navigation objects. Each navigation object should have an `id` and `label` property defined. Optionally it can include `icon`, `route`, or `children` properties. +4. Add default export + ## Theming >[Bootstrap theming](https://getbootstrap.com/docs/4.5/getting-started/theming/) allows for easy visual customizations. |