Toggle the new sidebar

client/src/components/UserWidget.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
-    <div class="user-widget__avatar" @click="toggleShowPopover()">
+    <div class="user-widget__avatar" @click="openSidebar()">
       <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
     </div>
+    <!-- todo: migrate and remove -->
     <widget-popover v-if="showPopover && showMenu"
                     @hide-me="showPopover = false"
                     :mobile="mobile"
@@ -27,6 +28,7 @@
 
 <script>
   import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
+  import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
   import Avatar from '@/components/profile/Avatar';
   import WidgetPopover from '@/components/WidgetPopover';
 
@@ -58,6 +60,15 @@
     },
 
     methods: {
+      openSidebar() {
+        this.$apollo.mutate({
+          mutation: TOGGLE_SIDEBAR,
+          variables: {
+            open: true
+          }
+        });
+      },
+      // todo: remove
       toggleShowPopover() {
         if (this.showMenu) {
           this.showPopover = !this.showPopover;

client/src/graphql/client.js

@@ -102,6 +102,10 @@ export default function (uri) {
       scrollPosition: {
         __typename: 'ScrollPosition',
         scrollTo: ''
+      },
+      sidebar: {
+        __typename: 'Sidebar',
+        open: false
       }
     }
   });

client/src/graphql/gql/local/mutations/toggleSidebar.gql

@@ -0,0 +1,3 @@
+mutation($open: Boolean!) {
+  toggleSidebar(open: $open) @client
+}

client/src/graphql/gql/local/sidebar.gql

@@ -0,0 +1,5 @@
+query Sidebar {
+  sidebar @client {
+    open
+  }
+}

client/src/graphql/resolvers.js

@@ -1,4 +1,5 @@
 import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
 
 export const resolvers = {
   Mutation: {
@@ -7,6 +8,12 @@ export const resolvers = {
       data.scrollPosition.scrollTo = scrollTo;
       cache.writeQuery({query: SCROLL_POSITION, data});
       return data.scrollPosition;
+    },
+    toggleSidebar: (_, {open}, {cache}) => {
+      const data = cache.readQuery({query: SIDEBAR});
+      data.sidebar.open = open;
+      cache.writeQuery({query: SIDEBAR, data});
+      return data.sidebar;
     }
   }
 };

client/src/graphql/typedefs.js

@@ -5,6 +5,10 @@ export const typeDefs = gql`
     scrollTo: String!
   }
   
+  type Sidebar {    
+    open: Boolean!
+  }
+  
   type Mutation {
     scrollTo(scrollTo: String!): ScrollPosition
   }