| |
| |
| |
| |
| |
| |
| |
| <template> |
| <ul id="mobile-left-menu" class="sidenav hide-on-large-only"> |
| <li class="no-padding" v-for="(level2, level1) in menuWithSubmenuItems" :key="level1"> |
| <ul class="collapsible collapsible-accordion" v-side-nav="{activator: activateLeftMenu}"> |
| <li> |
| <a class="collapsible-header"> |
| {{ translateOrDefault(level1) }}<i :class="level2._icon || 'icon-chevron-down'"></i> |
| </a> |
| |
| <div class="collapsible-body"> |
| <ul> |
| <li |
| v-for="([name, params]) in Object.entries(level2).filter(([n]) => n[0] !== '_')" |
| :key="name" |
| > |
| <a |
| :title="params._tooltip ? translateIfNecessary(params._tooltip) : ''" |
| target="_self" |
| :href="getMenuUrl(params._url)" |
| > |
| {{ translateIfNecessary(name) }} |
| </a> |
| </li> |
| </ul> |
| </div> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </template> |
| |
| <script lang="ts"> |
| import { defineComponent } from 'vue'; |
| import MatomoUrl from '../MatomoUrl/MatomoUrl'; |
| import SideNav from '../SideNav/SideNav'; |
| import { translate } from '../translate'; |
| |
| interface UrlParamsInfo { |
| _tooltip: string; |
| _url: QueryParameters; |
| } |
| |
| type Menu = Record<string, Record<string, UrlParamsInfo>>; |
| |
| const { $ } = window; |
| |
| export default defineComponent({ |
| props: { |
| menu: { |
| type: Object, |
| required: true, |
| }, |
| }, |
| directives: { |
| SideNav, |
| }, |
| methods: { |
| getMenuUrl(params: QueryParameters) { |
| return `?${MatomoUrl.stringify({ |
| ...MatomoUrl.urlParsed.value, |
| ...params, |
| })}`; |
| }, |
| translateIfNecessary(name: string) { |
| if (name.includes('_')) { |
| return translate(name); |
| } |
| |
| return name; |
| }, |
| }, |
| computed: { |
| menuWithSubmenuItems() { |
| const menu = (this.menu || {}) as Menu; |
| return Object.fromEntries( |
| Object.entries(menu) |
| |
| .filter(([, level2]) => { |
| const itemsWithoutUnderscore = Object.entries(level2) |
| .filter(([name]) => name[0] !== '_'); |
| return Object.keys(itemsWithoutUnderscore).length; |
| }), |
| ); |
| }, |
| activateLeftMenu() { |
| return $('nav .activateLeftMenu')[0]; |
| }, |
| }, |
| }); |
| </script> |
| |
