Sidebar collapsable

src/components/ModelViewer/SpeckleViewer.vue

@@ -1,5 +1,24 @@
 <template>
-	<div class="relative inset-y-16 w-2/3 h-[calc(100vh-4rem)] bg-gray-100">
+	<!-- TODO: This is supposed to fade in and out when resizing the viewer. Not working correct currently -->
+	<TransitionRoot as="template" :show="fadeOut">
+		<TransitionChild
+			as="template"
+			enter="ease-in-out duration-500"
+			enter-from="opacity-0"
+			enter-to="opacity-100"
+			leave="ease-in-out duration-500"
+			leave-from="opacity-100"
+			leave-to="opacity-0"
+		>
+			<div
+				class="fixed w-full h-full bg-gray-500 bg-opacity-75 transition-opacity z-30"
+			/>
+		</TransitionChild>
+	</TransitionRoot>
+	<div 
+		class="relative inset-y-16 w-full h-[calc(100vh-4rem)] bg-gray-100 overflow-auto" 
+		id="renderParent"
+	>
 		<div class="absolute text-sm select-none left-4">
 			<h3
 				class="font-semibold leading-5 text-gray-400 border-b border-gray-300 pb-2"
@@ -23,7 +42,10 @@
 			<FilterSelector />
 		</div>
 		-->
-		<div class="flex h-full w-full bg-gray-50 -z-10" id="renderer" />
+		<div 
+			class="flex h-full w-full bg-gray-50 -z-10" 
+			id="renderer" 
+		/>
 
 		<ViewerControls />
 		<DetailBar />
@@ -37,11 +59,16 @@
 		ViewerEvent,
 		type SelectionEvent
 	} from '@speckle/viewer'
+
 	import { useSpeckleStore } from '@/stores/speckle'
-	import { onMounted, watch, onBeforeUnmount } from 'vue'
-	import { useProjectStore, useNavigationStore } from '@/stores/main'
+	import { onMounted, watch, onBeforeUnmount, ref, render } from 'vue'
+	import { useProjectStore } from '@/stores/main'
 	import { storeToRefs } from 'pinia'
 
+	import {
+		TransitionChild, 
+    TransitionRoot,
+	} from '@headlessui/vue'
 	import ViewerControls from '@/components/ModelViewer/ViewerControls.vue'
 	import DetailBar from '@/components/DetailBar/DetailBar.vue'
 
@@ -51,10 +78,11 @@
 
 	const projectStore = useProjectStore()
 	const { selectedObjects } = storeToRefs(projectStore)
-	const navStore = useNavigationStore()
 
 	const serverUrl = import.meta.env.VITE_APP_SERVER_URL
 	const token = import.meta.env.VITE_SPECKLE_TOKEN
+	const resizeObserver = ref(null)
+	const fadeOut = ref(false)
 
 	const handleEscKey = (e) => {
 		if (e.key.toLowerCase() === 'escape') {
@@ -64,6 +92,21 @@
 		}
 	}
 
+	//This is to resize it properly when just div changes size as when expanding sidebar
+	const handleResize = (entries : ResizeObserverEntry[]) => {
+		for (let entry of entries) {
+			//fadeOut.value = true
+
+			const { width, height } = entry.contentRect
+			viewer.resize()
+			//Update aspect ratio manually
+			viewer.cameraHandler.activeCam.camera.aspect = width / height
+			viewer.cameraHandler.activeCam.camera.updateProjectionMatrix()
+
+			//fadeOut.value = false
+		}
+	}
+
 	/**
 	/ Renable select all if needed, see no need for it now.
 	const handleSelectAll = (e) => {
@@ -76,11 +119,11 @@
 	*/
 
 	onMounted(async () => {
+		const renderParent = document.getElementById('renderParent') as HTMLElement
+		const container = document.getElementById('renderer') as HTMLElement
 		window.addEventListener('keydown', handleEscKey)
 		//window.addEventListener('keydown', handleSelectAll)
 
-		const container = document.getElementById('renderer') as HTMLElement
-
 		viewer = new Viewer(container, DefaultViewerParams)
 		await viewer.init()
 
@@ -154,10 +197,15 @@
 		}
  		*/
 
+		resizeObserver.value = new ResizeObserver(handleResize)
+    resizeObserver.value.observe(renderParent)
+
 		// Resize the viewer when the window is resized.
+		/*
 		window.onresize = function () {
 			viewer.resize()
 		}
+		*/
 
 		const speckleStore = useSpeckleStore()
 		speckleStore.setViewerInstance(viewer)
@@ -169,7 +217,8 @@
 	})
 
 	onBeforeUnmount(() => {
-  	window.removeEventListener('keydown', handleEscKey);
+  	window.removeEventListener('keydown', handleEscKey)
+		resizeObserver.value.disconnect()
 	})
 
 	watch(

src/components/Sidebar/Sidebar.vue

@@ -3,31 +3,88 @@
   <NewGroupModal />
   <MaterialMappingModal />
   <!-- End of modal area -->
-
-  <div class="relative mt-16 z-40 flex h-[calc(100vh-4rem)] w-1/3 flex-col">
+  <button
+    v-if="!sideBarShow"
+    @click="toggleSideBar" 
+    class="absolute top-1/2 pt-16 left-2 transform -translate-y-1/2 mr-2 z-50"
+  >
+    <ChevronRightIcon class="w-6 h-6 opacity-50" />
+  </button>
+  <TransitionRoot as="template" :show="sideBarShow">
     <div 
-      class="flex grow h-[calc(100vh-12rem)] flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pt-4"
+      class="relative mt-16 z-40 flex h-[calc(100vh-4rem)] w-1/2 flex-col"
     >
-      <GroupList />
+      <TransitionChild
+        as="template"
+        enter="transform transition ease-in-out duration-500 sm:duration-700"
+        enter-from="-translate-x-full"
+        enter-to="translate-x-0"
+        leave="transform transition ease-in-out duration-500 sm:duration-700"
+        leave-from="translate-x-0"
+        leave-to="-translate-x-full"
+      >
+        <div 
+          class="flex grow h-[calc(100vh-12rem)] flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pt-4"
+        >
+          <button
+            v-if="sideBarShow"
+            @click="toggleSideBar" 
+            class="absolute top-1/2 -right-8 transform -translate-y-1/2 mr-2 opacity-50"
+          >
+            <ChevronLeftIcon class="w-6 h-6" />
+          </button>
+          <GroupList />
+        </div>
+      </TransitionChild>
     </div>
-  </div>
+  </TransitionRoot>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import {  
+  TransitionChild, 
+  TransitionRoot 
+} from '@headlessui/vue'
+
+import { 
+  ChevronRightIcon, 
+  ChevronLeftIcon 
+} from '@heroicons/vue/24/solid'
+
+import { useNavigationStore } from '@/stores/main'
+import { useSpeckleStore } from '@/stores/speckle'
+
 import GroupList from '@/components/Sidebar/GroupList.vue'
 import NewGroupModal from '@/components/Sidebar/NewGroupModal.vue'
 import MaterialMappingModal from '@/components/Mapping/MaterialMappingModal.vue'
 
+import { storeToRefs } from 'pinia'
+
 export default defineComponent({
   name: 'SideBar',
   components: {
     GroupList,
     NewGroupModal,
     MaterialMappingModal,
+    TransitionChild, 
+    TransitionRoot,
+    ChevronLeftIcon,
+    ChevronRightIcon
   },
   setup() {
-    return {}
+    const navStore = useNavigationStore()
+    const { sideBarShow } = storeToRefs(navStore)
+
+    const toggleSideBar = () => {
+      navStore.toggleSideBar()
+    }
+
+
+    return {
+      sideBarShow,
+      toggleSideBar
+    }
   }
 
 })

src/stores/main.ts

@@ -390,6 +390,7 @@ export const useNavigationStore = defineStore({
 			mappingModalOpen: false,
 			loading: false,
 			groupColorMode: false,
+			sideBarShow: true,
 		}
 	},
 	actions: {
@@ -445,6 +446,13 @@ export const useNavigationStore = defineStore({
 		 */
 		toggleColorMode() {
 			this.groupColorMode = !this.groupColorMode
+		},
+
+		/**
+		 * Toggle sidebar on the app
+		 */
+		toggleSideBar() {
+			this.sideBarShow = !this.sideBarShow
 		}
 
 	},

src/views/Dashboard.vue

@@ -2,11 +2,6 @@
 	<div class="flex">
 		<NavbarComponent />
 		<Sidebar />
-		<SpeckleStats
-			:visible="statsVisible"
-			:names="statNames"
-			:vals="statValues"
-		/>
 		<Suspense>
 			<SpeckleViewer />
 		</Suspense>
@@ -17,8 +12,6 @@
 <script lang="ts">
 	import Sidebar from '@/components/Sidebar/Sidebar.vue'
 	import Slideover from '@/components/SlideOver/Sliderover.vue'
-	import type { ViewerStats } from '@/models/speckle'
-	import SpeckleStats from '@/components/ModelViewer/SpeckleStats.vue'
 	import SpeckleViewer from '@/components/ModelViewer/SpeckleViewer.vue'
 	import NavbarComponent from '@/components/Navbar.vue'
 	import { useMaterialStore } from '@/stores/material'
@@ -31,7 +24,6 @@
 		name: 'DashboardView',
 		components: {
 			NavbarComponent,
-			SpeckleStats,
 			SpeckleViewer,
 			Sidebar,
 			Slideover,
@@ -60,30 +52,12 @@
 				required: false
 			}
 		},
-		setup(props) {
-			const materialStore = useMaterialStore()
+		setup() {
 			//Load materials from the store on startup
+			const materialStore = useMaterialStore()
     	materialStore.materialsFromJson()
-			let statNames: Array<string>
-			let statValues: Array<object>
-
-			if (props.statsVisible) {
-				// If props are not provided, use these defaults, otherwise deconstuct the given stats object.
-				const stats = (props.stats as ViewerStats)
-					? props.stats
-					: { names: null, vals: null }
 
-				statNames = stats.names ? stats.names : ['Elements', ' Stream']
-				statValues = stats.vals ? stats.vals : [18, ""]
-			} else {
-				statNames = []
-				statValues = []
-			}
-
-			return {
-				statNames,
-				statValues
-			}
+			return {}
 		}
 	}
 </script>