Tidy sidenav

This commit is contained in:
graham-dds
2019-12-27 13:10:00 -05:00
parent 903edb8068
commit cdd4a4eee1
5 changed files with 156 additions and 197 deletions

View File

@@ -1,39 +1,34 @@
{% from "components/icon.html" import Icon %}
{% from "components/sidenav_item.html" import SidenavItem %}
<div v-cloak is="SidenavToggler" class="global-navigation">
<template slot-scope='props'>
<div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
<div class="sidenav-container__fixed">
<div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
<div v-bind:class="{'sidenav__header': props.isVisible, 'sidenav__header--minimized': !props.isVisible}" class="row">
<template v-if="props.isVisible">
<span class="sidenav__title col col--grow">My Portfolios</span>
<a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
{{ Icon('angle-double-left-solid', classes="toggle-arrows icon--primary") }}
<span>Hide</span>
</a>
</template>
<template v-else>
<a href="#" v-on:click="props.toggle" class="sidenav__toggle col">
<span>Show</span>
{{ Icon('angle-double-right-solid', classes="toggle-arrows icon--primary") }}
</a>
</template>
</div>
<div v-if="props.isVisible">
<ul class="sidenav__list--padded">
{% for other_portfolio in portfolios|sort(attribute='name') %}
{{ SidenavItem(other_portfolio.name,
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
) }}
{% endfor %}
</ul>
</div>
<div class="global-navigation">
<sidenav-toggler v-cloak inline-template>
<div v-bind:class="{'sidenav-container': isVisible, 'sidenav-container--minimized': !isVisible}">
<div v-bind:class="{'sidenav': isVisible, 'sidenav--minimized': !isVisible}">
<div v-bind:class="{'sidenav__header': isVisible, 'sidenav__header--minimized': !isVisible}" class="row">
<template v-if="isVisible">
<span class="sidenav__title col col--grow">My Portfolios</span>
<a href="#" v-on:click="toggle" class="sidenav__toggle col">
{{ Icon('angle-double-left-solid', classes="sidenav__toggle-arrows icon--primary") }}
<span>Hide</span>
</a>
</template>
<template v-else>
<a href="#" v-on:click="toggle" class="sidenav__toggle col">
<span>Show</span>
{{ Icon('angle-double-right-solid', classes="sidenav__toggle-arrows icon--primary") }}
</a>
</template>
</div>
<ul class="sidenav__list" v-if="isVisible">
{% for other_portfolio in portfolios|sort(attribute='name') %}
{{ SidenavItem(other_portfolio.name,
href=url_for("applications.portfolio_applications", portfolio_id=other_portfolio.id),
active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
) }}
{% endfor %}
</ul>
</div>
</div>
</template>
</sidenav-toggler>
</div>