|
|
@ -17,52 +17,34 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
|
|
<template> |
|
|
|
<div id="side-menu" class="side-menu-big"> |
|
|
|
<div class="side-menu-header"> |
|
|
|
<button class="side-menu-opener side-menu-closer"></button> |
|
|
|
<CloserButton /> |
|
|
|
|
|
|
|
<div class="side-menu-settings" v-if="settings"> |
|
|
|
<a v-bind:href="settings.href"> |
|
|
|
{{ settings.name }} |
|
|
|
<SettingsButton |
|
|
|
v-if="settings" |
|
|
|
v-bind:href="settings.href" |
|
|
|
v-bind:label="settings.name" |
|
|
|
v-bind:avatar="settings.avatar" |
|
|
|
/> |
|
|
|
|
|
|
|
<span class="avatardiv avatardiv-shown"> |
|
|
|
<img v-bind:src="settings.avatar" v-bind:alt="settings.name" v-bind:title="settings.name"> |
|
|
|
</span> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button class="side-menu-opener"></button> |
|
|
|
<OpenerButton /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="side-menu-categories-wrapper"> |
|
|
|
<div class="side-menu-categories"> |
|
|
|
<div v-if="!items.length" class="side-menu-loader"> |
|
|
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
<g fill="none" fill-rule="evenodd"> |
|
|
|
<g transform="translate(1 1)" stroke-width="2"> |
|
|
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/> |
|
|
|
<path d="M36 18c0-9.94-8.06-18-18-18"> |
|
|
|
<animateTransform |
|
|
|
attributeName="transform" |
|
|
|
type="rotate" |
|
|
|
from="0 18 18" |
|
|
|
to="360 18 18" |
|
|
|
dur="1s" |
|
|
|
repeatCount="indefinite"/> |
|
|
|
</path> |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
<Loader v-if="!items.length" /> |
|
|
|
|
|
|
|
<div class="side-menu-category" v-for="category in items"> |
|
|
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2> |
|
|
|
|
|
|
|
<ul class="side-menu-apps-list"> |
|
|
|
<li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps"> |
|
|
|
<a v-bind:href="app.href" :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined" v-bind:title="app.name"> |
|
|
|
<img class="side-menu-app-icon" v-bind:src="app.icon"></span> |
|
|
|
<span class="side-menu-app-text" v-html="app.name"></span> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
<SideMenuBigApp |
|
|
|
v-for="(app, appId) in category.apps" |
|
|
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}" |
|
|
|
v-bind:icon="app.icon" |
|
|
|
v-bind:label="app.name" |
|
|
|
v-bind:href="app.href" |
|
|
|
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined" |
|
|
|
/> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -73,9 +55,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
|
|
<script> |
|
|
|
import trim from 'trim' |
|
|
|
import axios from 'axios' |
|
|
|
import OpenerButton from './OpenerButton' |
|
|
|
import CloserButton from './CloserButton' |
|
|
|
import SettingsButton from './SettingsButton' |
|
|
|
import Loader from './Loader' |
|
|
|
import SideMenuBigApp from './SideMenuBigApp' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'SideMenuBig', |
|
|
|
components: { |
|
|
|
SettingsButton, |
|
|
|
OpenerButton, |
|
|
|
CloserButton, |
|
|
|
Loader, |
|
|
|
SideMenuBigApp, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
items: [], |
|
|
|