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>
|
<template>
|
||||||
<div class="container skillbox" :class="specialContainerClass">
|
<div class="container skillbox" :class="specialContainerClass">
|
||||||
|
<profile-sidebar></profile-sidebar>
|
||||||
<header-bar class="header skillbox__header">
|
<header-bar class="header skillbox__header">
|
||||||
</header-bar>
|
</header-bar>
|
||||||
|
|
||||||
|
|
@ -13,11 +14,13 @@
|
||||||
<script>
|
<script>
|
||||||
import HeaderBar from '@/components/HeaderBar';
|
import HeaderBar from '@/components/HeaderBar';
|
||||||
import MobileHeader from '@/components/MobileHeader';
|
import MobileHeader from '@/components/MobileHeader';
|
||||||
|
import ProfileSidebar from '@/components/profile/ProfileSidebar';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
HeaderBar,
|
HeaderBar,
|
||||||
MobileHeader
|
MobileHeader,
|
||||||
|
ProfileSidebar
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue