From 08b816f3fdb8889cc6017b89418ad7091118c18d Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 17 Feb 2020 16:13:48 +0100
Subject: [PATCH] Add sidebar

---
 client/src/components/icons/DefaultAvatar.vue | 63 ++++++++++++
 .../src/components/profile/ProfileSidebar.vue | 97 +++++++++++++++++++
 .../src/components/profile/ProfileWidget.vue  | 44 +++++++++
 client/src/layouts/DefaultLayout.vue          |  5 +-
 4 files changed, 208 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/icons/DefaultAvatar.vue
 create mode 100644 client/src/components/profile/ProfileSidebar.vue
 create mode 100644 client/src/components/profile/ProfileWidget.vue

diff --git a/client/src/components/icons/DefaultAvatar.vue b/client/src/components/icons/DefaultAvatar.vue
new file mode 100644
index 00000000..fe38c777
--- /dev/null
+++ b/client/src/components/icons/DefaultAvatar.vue
@@ -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>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
new file mode 100644
index 00000000..db7dfc1e
--- /dev/null
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -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>
diff --git a/client/src/components/profile/ProfileWidget.vue b/client/src/components/profile/ProfileWidget.vue
new file mode 100644
index 00000000..93e8c55a
--- /dev/null
+++ b/client/src/components/profile/ProfileWidget.vue
@@ -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>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index b29dabc7..33ca3f48 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -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: {