Add sidebar collapse and expand button

apps/frontend/app/components/editor/Sidebar/index.vue

@@ -1,11 +1,21 @@
 <template>
   <VNavigationDrawer
+    v-model="modelValue"
     :width="lgAndUp ? 480 : 380"
     class="sidebar"
     color="primary-darken-2"
     elevation="5"
     mobile-breakpoint="md"
   >
+    <VBtn
+      v-tooltip:right="{ text: 'Close sidebar', openDelay: 500 }"
+      class="sidebar-collapse-btn"
+      color="primary-darken-3"
+      icon="mdi-chevron-left"
+      size="small"
+      variant="flat"
+      @click="modelValue = false"
+    />
     <div class="sidebar-container">
       <VWindow v-model="selectedTab">
         <VWindowItem :value="BROWSER_TAB">
@@ -70,6 +80,8 @@ import ActivityNavigation from './ActivityNavigation.vue';
 import ElementSidebar from './ElementSidebar/index.vue';
 import ActivityDiscussion from '@/components/repository/Discussion/index.vue';
 
+const modelValue = defineModel<boolean>({ required: true });
+
 const props = defineProps<{
   repository: Repository;
   activities: Activity[];
@@ -148,6 +160,20 @@ watch(
 .sidebar {
   text-align: left;
 
+  .sidebar-collapse-btn {
+    position: absolute;
+    bottom: 5.5rem;
+    right: 0;
+    z-index: 1;
+    border-radius: 4px 0 0 4px !important;
+    width: 2rem !important;
+    height: 3rem !important;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   :deep(.v-navigation-drawer__content) {
     -ms-overflow-style: none !important;
     /* IE and Edge */

apps/frontend/app/components/editor/Toolbar/index.vue

@@ -5,7 +5,6 @@
     elevation="3"
     order="1"
   >
-    <VAppBarNavIcon v-if="smAndDown" @click="$emit('toggle-sidebar')" />
     <div v-if="activity && !element" class="activity-toolbar w-100 px-3 py-2">
       <ActivityActions />
       <h1 v-if="mdAndUp" class="py-2 px-6 text-h5 text-truncate">
@@ -108,7 +107,7 @@ const props = withDefaults(defineProps<Props>(), {
   element: null,
 });
 
-defineEmits(['toggle-sidebar', 'toggle-guidelines']);
+defineEmits(['toggle-guidelines']);
 
 const { $schemaService } = useNuxtApp() as any;
 
@@ -117,7 +116,7 @@ const showPublishDiff = computed(() => editorStore.showPublishDiff);
 const notify = useNotification();
 const editorStore = useEditorStore();
 const userTrackingStore = useUserTracking();
-const { mdAndUp, smAndDown, mdAndDown } = useDisplay();
+const { mdAndUp, mdAndDown } = useDisplay();
 
 const activity = computed(() => editorStore.selectedActivity);
 const config = computed(

apps/frontend/app/pages/repository/[[id]]/editor.vue

@@ -4,9 +4,7 @@
       :key="`${editorStore.selectedActivityId}-${editorStore.selectedContentElementId}`"
       :active-users="activeUsers"
       :element="editorStore.selectedContentElement as ContentElement"
-      @toggle-sidebar="showSidebar = !showSidebar"
       @toggle-guidelines="showGuidelines = !showGuidelines"
-
     />
     <div class="editor-content-container">
       <VSidebar
@@ -17,6 +15,18 @@
         :selected-element="editorStore.selectedContentElement as ContentElement"
         class="sidebar"
       />
+      <VFadeTransition>
+        <VBtn
+          v-if="!showSidebar"
+          v-tooltip:right="{ text: 'Open sidebar', openDelay: 500 }"
+          class="sidebar-toggle"
+          color="primary-darken-2"
+          icon="mdi-chevron-right"
+          variant="flat"
+          size="small"
+          @click="showSidebar = true"
+        />
+      </VFadeTransition>
       <NuxtPage
         v-if="activityId"
         :key="activityId"
@@ -62,7 +72,7 @@ provide('$editorState', {
 });
 
 const activityId = ref<number | null>(null);
-const showSidebar = ref(null);
+const showSidebar = ref(true);
 const showGuidelines = ref(null);
 // TODO: Needs to be implemented
 const activeUsers: any = [];
@@ -108,6 +118,20 @@ $sidebar-width: 30rem;
     flex-basis: $sidebar-width;
   }
 
+  .sidebar-toggle {
+    position: fixed;
+    bottom: 5.5rem;
+    left: 0;
+    z-index: 1004;
+    border-radius: 0 4px 4px 0 !important;
+    width: 2rem !important;
+    height: 3rem !important;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .activity-content {
     flex-grow: 1;
     flex-basis: calc(100% - #{$sidebar-width});