Refactor handling of mobile view
This commit is contained in:
parent
2ebceec717
commit
b5d9d6a998
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<header class="header-bar">
|
||||
<content-navigation/>
|
||||
<router-link
|
||||
to="/"
|
||||
class="header-bar__logo"
|
||||
data-cy="home-link">
|
||||
<logo class="header-bar__logo-icon"/>
|
||||
</router-link>
|
||||
<a
|
||||
class="header-bar__sidebar-link"
|
||||
@click="openSidebar('navigation')">
|
||||
<hamburger class="header-bar__sidebar-icon"/>
|
||||
</a>
|
||||
<content-navigation class="header-bar__content-navigation"/>
|
||||
<div class="user-header">
|
||||
<a
|
||||
class="user-header__sidebar-link"
|
||||
|
|
@ -18,16 +17,15 @@
|
|||
v-bind="me"
|
||||
data-cy="header-user-widget"/>
|
||||
</div>
|
||||
<book-navigation v-if="showSubnavigation"/>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
|
||||
import BookNavigation from '@/components/book-navigation/BookNavigation';
|
||||
import UserWidget from '@/components/UserWidget.vue';
|
||||
import Logo from '@/components/icons/Logo';
|
||||
import CurrentClass from '@/components/school-class/CurrentClass';
|
||||
import Hamburger from '@/components/icons/Hamburger';
|
||||
|
||||
import openSidebar from '@/mixins/open-sidebar';
|
||||
import me from '@/mixins/me';
|
||||
|
|
@ -38,9 +36,9 @@
|
|||
components: {
|
||||
ContentNavigation,
|
||||
UserWidget,
|
||||
BookNavigation,
|
||||
Logo,
|
||||
CurrentClass
|
||||
CurrentClass,
|
||||
Hamburger
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,61 +1,99 @@
|
|||
<template>
|
||||
<nav
|
||||
:class="{'top-navigation--mobile': mobile}"
|
||||
class="top-navigation">
|
||||
<div class="top-navigation__item">
|
||||
<router-link
|
||||
:class="{'top-navigation__link--active': isActive('book')}"
|
||||
to="/book/topic/berufliche-grundbildung"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Inhalte
|
||||
</router-link>
|
||||
:class="{'content-navigation--sidebar': isSidebar}"
|
||||
class="content-navigation">
|
||||
<div class="content-navigation__primary">
|
||||
<div class="content-navigation__item">
|
||||
<router-link
|
||||
:class="{'content-navigation__link--active': isActive('book')}"
|
||||
to="/book/topic/berufliche-grundbildung"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link"
|
||||
@click.native="close">Themen
|
||||
</router-link>
|
||||
|
||||
<mobile-subnavigation v-if="mobile"/>
|
||||
<book-topic-navigation
|
||||
v-if="isSidebar"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-navigation__item">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link"
|
||||
@click.native="close">Instrumente
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="content-navigation__item">
|
||||
<router-link
|
||||
to="/portfolio"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link"
|
||||
@click.native="close">News
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-navigation__item">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Räume
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link
|
||||
to="/"
|
||||
class="content-navigation__logo"
|
||||
data-cy="home-link"
|
||||
v-if="!isSidebar"
|
||||
>
|
||||
<logo class="content-navigation__logo-icon"/>
|
||||
</router-link>
|
||||
|
||||
<div class="top-navigation__item">
|
||||
<router-link
|
||||
to="/portfolio"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Portfolio
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="content-navigation__secondary">
|
||||
<div class="content-navigation__item content-navigation__item--secondary">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link content-navigation__link--secondary"
|
||||
@click.native="close">Räume
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="content-navigation__item content-navigation__item--secondary">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link content-navigation__link--secondary"
|
||||
@click.native="close">Portfolio
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';
|
||||
import Logo from '@/components/icons/Logo';
|
||||
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
|
||||
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mobile: {
|
||||
isSidebar: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
MobileSubnavigation
|
||||
BookTopicNavigation,
|
||||
Logo
|
||||
},
|
||||
|
||||
methods: {
|
||||
isActive(linkName) {
|
||||
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
|
||||
},
|
||||
hideMobileNavigation() {
|
||||
this.$store.dispatch('showMobileNavigation', false);
|
||||
close() {
|
||||
this.closeSidebar('navigation');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,82 @@
|
|||
<template>
|
||||
<div
|
||||
v-click-outside="closeSidebar"
|
||||
class="profile-sidebar"
|
||||
v-if="sidebar.profile">
|
||||
<a
|
||||
class="profile-sidebar__close-link"
|
||||
@click="close">
|
||||
<cross class="profile-sidebar__close-icon"/>
|
||||
</a>
|
||||
<profile-widget class="profile-sidebar__item"/>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close">
|
||||
<router-link
|
||||
to="/me/activity"
|
||||
class="profile-sidebar__link">Meine Aktivitäten
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="profile-sidebar__item">
|
||||
<h3 class="profile-sidebar__subtitle">Klasse</h3>
|
||||
<class-selection-widget/>
|
||||
<div @click="close">
|
||||
<router-link
|
||||
:to="{name: 'my-class'}"
|
||||
class="profile-sidebar__link">Klassenliste anzeigen
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close">
|
||||
<router-link
|
||||
:to="{name:'join-class'}"
|
||||
data-cy="join-class-link"
|
||||
class="profile-sidebar__link">Zugangscode
|
||||
eingeben
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="profile-sidebar__item">
|
||||
<logout-widget/>
|
||||
</div>
|
||||
v-click-outside="closeSidebar"
|
||||
class="profile-sidebar"
|
||||
v-if="sidebar.profile">
|
||||
<a
|
||||
class="profile-sidebar__close-link"
|
||||
@click="close">
|
||||
<cross class="profile-sidebar__close-icon"/>
|
||||
</a>
|
||||
<div class="profile-sidebar__section">
|
||||
<profile-widget class="profile-sidebar__item"/>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close">
|
||||
<router-link
|
||||
to="/me/activity"
|
||||
class="profile-sidebar__link">Meine Aktivitäten
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-sidebar__section">
|
||||
<div class="profile-sidebar__item">
|
||||
<class-selection-widget/>
|
||||
<div @click="close">
|
||||
<router-link
|
||||
:to="{name: 'my-class'}"
|
||||
class="profile-sidebar__link">Klassenliste
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-sidebar__section">
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close">
|
||||
<router-link
|
||||
:to="{name:'join-class'}"
|
||||
data-cy="join-class-link"
|
||||
class="profile-sidebar__link">Zugangscode
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="profile-sidebar__item">
|
||||
<logout-widget/>
|
||||
</div>
|
||||
|
||||
<p class="profile-sidebar__support">
|
||||
Supportanfragen: rahel.wenger@hep-verlag.ch
|
||||
</p>
|
||||
</div>
|
||||
<p class="profile-sidebar__support">
|
||||
Supportanfragen: rahel.wenger@hep-verlag.ch
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileWidget from '@/components/profile/ProfileWidget';
|
||||
import Cross from '@/components/icons/Cross';
|
||||
import ProfileWidget from '@/components/profile/ProfileWidget';
|
||||
import Cross from '@/components/icons/Cross';
|
||||
|
||||
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
|
||||
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
|
||||
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
import LogoutWidget from '@/components/LogoutWidget';
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
import LogoutWidget from '@/components/LogoutWidget';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
|
||||
mixins: [sidebarMixin],
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
LogoutWidget,
|
||||
ClassSelectionWidget,
|
||||
ProfileWidget,
|
||||
Cross
|
||||
},
|
||||
components: {
|
||||
LogoutWidget,
|
||||
ClassSelectionWidget,
|
||||
ProfileWidget,
|
||||
Cross
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('profile')
|
||||
}
|
||||
},
|
||||
}
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('profile')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
<div class="start-page">
|
||||
<header-bar class="start-page__header"/>
|
||||
|
||||
<mobile-header class="start-page__header start-page__header--mobile"/>
|
||||
|
||||
<div class="start-page__sections start-sections">
|
||||
|
||||
<section-block
|
||||
|
|
|
|||
Loading…
Reference in New Issue