|
@@ -51,13 +51,25 @@
|
|
|
/>
|
|
/>
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-footer">
|
|
|
<NavigationItem
|
|
<NavigationItem
|
|
|
- v-if="helpItem"
|
|
|
|
|
|
|
+ v-if="helpItem && useDrawerForHelp"
|
|
|
|
|
+ :item="helpItem"
|
|
|
|
|
+ :is-collapsed="isCollapsed"
|
|
|
|
|
+ :active-item-name="activeItemName"
|
|
|
|
|
+ />
|
|
|
|
|
+ <AccordionItem
|
|
|
|
|
+ v-if="helpItem && !useDrawerForHelp"
|
|
|
:item="helpItem"
|
|
:item="helpItem"
|
|
|
:is-collapsed="isCollapsed"
|
|
:is-collapsed="isCollapsed"
|
|
|
:active-item-name="activeItemName"
|
|
:active-item-name="activeItemName"
|
|
|
/>
|
|
/>
|
|
|
<NavigationItem
|
|
<NavigationItem
|
|
|
- v-if="userItem"
|
|
|
|
|
|
|
+ v-if="userItem && useDrawerForUser"
|
|
|
|
|
+ :item="userItem"
|
|
|
|
|
+ :is-collapsed="isCollapsed"
|
|
|
|
|
+ :active-item-name="activeItemName"
|
|
|
|
|
+ />
|
|
|
|
|
+ <AccordionItem
|
|
|
|
|
+ v-if="userItem && !useDrawerForUser"
|
|
|
:item="userItem"
|
|
:item="userItem"
|
|
|
:is-collapsed="isCollapsed"
|
|
:is-collapsed="isCollapsed"
|
|
|
:active-item-name="activeItemName"
|
|
:active-item-name="activeItemName"
|
|
@@ -91,6 +103,8 @@
|
|
|
import Component from 'vue-class-component';
|
|
import Component from 'vue-class-component';
|
|
|
import { Fragment } from 'vue-fragment';
|
|
import { Fragment } from 'vue-fragment';
|
|
|
import { Prop } from 'vue-property-decorator';
|
|
import { Prop } from 'vue-property-decorator';
|
|
|
|
|
+
|
|
|
|
|
+ import AccordionItem from './AccordionItem.vue';
|
|
|
import BaseNavigationItem from './BaseNavigationItem.vue';
|
|
import BaseNavigationItem from './BaseNavigationItem.vue';
|
|
|
import './drawer.scss';
|
|
import './drawer.scss';
|
|
|
import HelpDrawerContent from './HelpDrawerContent.vue';
|
|
import HelpDrawerContent from './HelpDrawerContent.vue';
|
|
@@ -99,6 +113,7 @@
|
|
|
import SidebarBody from './SidebarBody.vue';
|
|
import SidebarBody from './SidebarBody.vue';
|
|
|
import SidebarDrawer from './SidebarDrawer.vue';
|
|
import SidebarDrawer from './SidebarDrawer.vue';
|
|
|
import {
|
|
import {
|
|
|
|
|
+ SidebarAccordionItem,
|
|
|
SidebarAccordionSubItem,
|
|
SidebarAccordionSubItem,
|
|
|
SidebarItem,
|
|
SidebarItem,
|
|
|
SidebarNavigationItem,
|
|
SidebarNavigationItem,
|
|
@@ -108,6 +123,7 @@
|
|
|
|
|
|
|
|
@Component({
|
|
@Component({
|
|
|
components: {
|
|
components: {
|
|
|
|
|
+ AccordionItem,
|
|
|
HelpDrawerContent,
|
|
HelpDrawerContent,
|
|
|
UserDrawerContent,
|
|
UserDrawerContent,
|
|
|
SidebarDrawer,
|
|
SidebarDrawer,
|
|
@@ -121,11 +137,15 @@
|
|
|
@Prop()
|
|
@Prop()
|
|
|
sidebarItems!: SidebarItem[];
|
|
sidebarItems!: SidebarItem[];
|
|
|
|
|
|
|
|
|
|
+ @Prop({ required: false, default: true })
|
|
|
|
|
+ useDrawerForUser: boolean;
|
|
|
@Prop({ required: false })
|
|
@Prop({ required: false })
|
|
|
userDrawerItem: UserDrawerItem | null = null;
|
|
userDrawerItem: UserDrawerItem | null = null;
|
|
|
@Prop({ required: false })
|
|
@Prop({ required: false })
|
|
|
userDrawerChildren: SidebarAccordionSubItem[] = [];
|
|
userDrawerChildren: SidebarAccordionSubItem[] = [];
|
|
|
|
|
|
|
|
|
|
+ @Prop({ required: false, default: true })
|
|
|
|
|
+ useDrawerForHelp: boolean;
|
|
|
@Prop({ required: false })
|
|
@Prop({ required: false })
|
|
|
helpDrawerItem: HelpDrawerItem | null = null;
|
|
helpDrawerItem: HelpDrawerItem | null = null;
|
|
|
@Prop({ required: false })
|
|
@Prop({ required: false })
|
|
@@ -144,33 +164,53 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- get helpItem(): SidebarNavigationItem | null {
|
|
|
|
|
|
|
+ get helpItem(): SidebarAccordionItem | SidebarNavigationItem | null {
|
|
|
if (!this.helpDrawerItem) {
|
|
if (!this.helpDrawerItem) {
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
- return {
|
|
|
|
|
- type: 'navigation',
|
|
|
|
|
|
|
+ const sharedProps = {
|
|
|
name: 'help',
|
|
name: 'help',
|
|
|
displayName: this.helpDrawerItem.displayName,
|
|
displayName: this.helpDrawerItem.displayName,
|
|
|
- iconHtml: this.helpDrawerItem.iconHtml,
|
|
|
|
|
- handler: () => {
|
|
|
|
|
- this.drawerTopic = 'help';
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ iconHtml: this.helpDrawerItem.iconHtml
|
|
|
|
|
+ };
|
|
|
|
|
+ if (this.useDrawerForHelp) {
|
|
|
|
|
+ return {
|
|
|
|
|
+ type: 'navigation',
|
|
|
|
|
+ ...sharedProps,
|
|
|
|
|
+ handler: () => {
|
|
|
|
|
+ this.drawerTopic = 'help';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ return {
|
|
|
|
|
+ type: 'accordion',
|
|
|
|
|
+ ...sharedProps,
|
|
|
|
|
+ children: this.helpDrawerChildren
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- get userItem(): SidebarNavigationItem | null {
|
|
|
|
|
|
|
+ get userItem(): SidebarAccordionItem | SidebarNavigationItem | null {
|
|
|
if (!this.userDrawerItem) {
|
|
if (!this.userDrawerItem) {
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
- return {
|
|
|
|
|
- type: 'navigation',
|
|
|
|
|
|
|
+ const sharedProps = {
|
|
|
name: 'user',
|
|
name: 'user',
|
|
|
displayName: this.userDrawerItem.displayName,
|
|
displayName: this.userDrawerItem.displayName,
|
|
|
- iconHtml: `<div class="sidebar-user-icon" role="img">${this.userDrawerItem.displayName[0].toUpperCase()}</div>`,
|
|
|
|
|
- handler: () => {
|
|
|
|
|
- this.drawerTopic = 'user';
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ iconHtml: `<div class="sidebar-user-icon" role="img">${this.userDrawerItem.displayName[0].toUpperCase()}</div>`
|
|
|
|
|
+ };
|
|
|
|
|
+ if (this.useDrawerForUser) {
|
|
|
|
|
+ return {
|
|
|
|
|
+ type: 'navigation',
|
|
|
|
|
+ ...sharedProps,
|
|
|
|
|
+ handler: () => {
|
|
|
|
|
+ this.drawerTopic = 'user';
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ return {
|
|
|
|
|
+ type: 'accordion',
|
|
|
|
|
+ ...sharedProps,
|
|
|
|
|
+ children: this.userDrawerChildren
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|