Add sidebar
This commit is contained in:
parent
d22a77e513
commit
08b816f3fd
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
|
||||
<defs>
|
||||
<clipPath id="clip-path">
|
||||
<circle class="cls-1" cx="200" cy="200" r="197"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="bg">
|
||||
<circle class="cls-2" cx="200" cy="200" r="197"/>
|
||||
</g>
|
||||
<g id="objects">
|
||||
<g class="cls-3">
|
||||
<path class="cls-4"
|
||||
d="M380.03229,346.82485l-99.89952-29.68554-75.91247-7.58045h-2.40707l-78.31955,7.58045-103.526,30.44984s75.62737,95.55272,183.04906,95.55272S380.03229,346.82485,380.03229,346.82485Z"/>
|
||||
<path class="cls-5"
|
||||
d="M272.15765,65.53589a86.01591,86.01591,0,0,0-20.524-14.33295,103.61294,103.61294,0,0,0-49.8204-11.92284,103.61271,103.61271,0,0,0-49.8198,11.92255A86.01706,86.01706,0,0,0,131.4688,65.53589c-47.89186,45.957-59.684,136.053-53.17653,195.51559,22.30221,28.20465,70.43168,35.98046,103.97675,29.59277-1.699-28.98109-18.28465-55.36789-18.09824-84.40807,16.82179-9.95623,9.42329-59.11938,10.702-81.59916l26.94039-6.97556,26.9404,6.97556c1.27875,22.47978-6.11974,71.64293,10.70211,81.59916.18642,29.04018-16.39928,55.427-18.09824,84.40807,33.545,6.38769,81.67447-1.38812,103.97668-29.59277C331.84167,201.58886,320.04951,111.49293,272.15765,65.53589Z"/>
|
||||
<path class="cls-6"
|
||||
d="M237.057,266.23162H166.56944c0,34.9025-27.34,45.73431-43.07576,50.90769,15.73577,67.03868,142.10688,67.03868,156.63909,0C260.78642,311.96593,241.52987,305.94826,237.057,266.23162Z"/>
|
||||
<ellipse class="cls-7" cx="202.35227" cy="179.47219" rx="79.23803" ry="97.02616"/>
|
||||
<path class="cls-8"
|
||||
d="M117.61519,154.166c10.8764-3.25836,22.30778,5.29762,25.51206,19.09451,3.20424,13.7965-3.02464,27.64251-13.90108,30.90087-10.87644,3.25678-22.30919-5.29877-25.51339-19.09389-3.20425-13.79708,3.026-27.64273,13.90241-30.90149Z"/>
|
||||
<path class="cls-5"
|
||||
d="M158.77973,88.35379c34.35007,53.44875,83.71361,66.59188,126.44529,82.83956C322.20435,145.19484,244.7734,11.96688,158.77973,88.35379Z"/>
|
||||
<path class="cls-5"
|
||||
d="M181.50651,94.88021c-10.83147,33.057-30.31262,48.8307-55.51284,58.59347C109.4863,115.38906,134.25941,72.625,181.50651,94.88021Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #d1eee7;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
clip-path: url(#clip-path);
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #17a887;
|
||||
}
|
||||
|
||||
.cls-4, .cls-5, .cls-6, .cls-8 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: #102d24;
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: #e5f5f2;
|
||||
}
|
||||
|
||||
.cls-7, .cls-8 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="profile-sidebar" v-if="sidebar.open">
|
||||
<a class="profile-sidebar__close-link" @click="closeSidebar">
|
||||
<cross class="profile-sidebar__close-icon"></cross>
|
||||
</a>
|
||||
<profile-widget class="profile-sidebar__item"></profile-widget>
|
||||
<div class="profile-sidebar__item" @click="closeSidebar">
|
||||
<router-link to="/me/activity" class="profile-sidebar__link">Meine Aktivitäten</router-link>
|
||||
</div>
|
||||
|
||||
<a class="profile-sidebar__item profile-sidebar__link">Klasse</a>
|
||||
<div class="profile-sidebar__item" @click="closeSidebar">
|
||||
<router-link :to="{name:'join-class'}" class="profile-sidebar__link">Zugangscode eingeben</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileWidget from '@/components/profile/ProfileWidget';
|
||||
import Cross from '@/components/icons/Cross';
|
||||
|
||||
import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
|
||||
import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProfileWidget,
|
||||
Cross
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeSidebar() {
|
||||
this.$apollo.mutate({
|
||||
mutation: TOGGLE_SIDEBAR,
|
||||
variables: {
|
||||
open: false
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
apollo: {
|
||||
sidebar: {
|
||||
query: SIDEBAR
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
sidebar: {
|
||||
open: false
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.profile-sidebar {
|
||||
padding: $large-spacing 0;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 333px;
|
||||
background-color: $color-white;
|
||||
z-index: 10;
|
||||
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid $color-silver-light;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@include default-link;
|
||||
displaY: block;
|
||||
padding: $large-spacing $medium-spacing;
|
||||
}
|
||||
|
||||
&__close-link {
|
||||
position: absolute;
|
||||
right: $small-spacing;
|
||||
top: $small-spacing;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div class="profile-widget">
|
||||
<div class="profile-widget__avatar">
|
||||
<avatar :editable="true"></avatar>
|
||||
</div>
|
||||
<h3 class="profile-widget__name">Susanne Portmann</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Avatar from '@/components/profile/Avatar';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Avatar
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.profile-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&__name {
|
||||
@include heading-3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: $medium-spacing;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="container skillbox" :class="specialContainerClass">
|
||||
<profile-sidebar></profile-sidebar>
|
||||
<header-bar class="header skillbox__header">
|
||||
</header-bar>
|
||||
|
||||
|
|
@ -13,11 +14,13 @@
|
|||
<script>
|
||||
import HeaderBar from '@/components/HeaderBar';
|
||||
import MobileHeader from '@/components/MobileHeader';
|
||||
import ProfileSidebar from '@/components/profile/ProfileSidebar';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
HeaderBar,
|
||||
MobileHeader
|
||||
MobileHeader,
|
||||
ProfileSidebar
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue