Added ControlPanel base

src/App.vue

@@ -7,4 +7,5 @@
 
 <script setup lang="ts">
 import SpeckleViewer from './components/SpeckleViewer.vue'
+import ControlPanel from './components/ControlPanel.vue'
 </script>

src/components/ControlPanel.vue

@@ -1,5 +1,27 @@
 <template>
-  <div class="absolute top-20 left-10 bg-white rounded-lg p-4 shadow-md">
-    <h2 class="text-2xl font-bold mb-4">Control Panel</h2>
+  <div class="absolute z-10 top-4 left-4 flex gap-x-2">
+    <button
+      @click="isOpen = !isOpen"
+      class="transition rounded-lg w-10 h-10 flex items-center justify-center shadow-md bg-white outline-none border"
+      :class="{ 'bg-gray-100': isOpen }"
+    >
+      <IconCog />
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white rounded-xl overflow-hidden border border-outline-2 flex flex-col shadow-md min-w-72"
+    >
+      <div class="flex items-center py-3 px-4 border-b border-outline-2">
+        <h2 class="text-sm font-medium text-gray-800">Control Panel</h2>
+      </div>
+      <div class="py-3 px-4"></div>
+    </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import IconCog from './icon/IconCog.vue'
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>

src/components/SpeckleViewer.vue

@@ -15,7 +15,7 @@ onMounted(async () => {
   if (!canvas.value) return
   await initViewer(canvas.value)
   await loadModelFromUrl(
-    'https://app.speckle.systems/projects/24c98619ac/models/38639656b8'
+    'https://app.speckle.systems/projects/24c98619ac/models/38639656b8',
   )
 })
 </script>

src/components/icon/IconCog.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    class="w-5 h-5 text-gray-800"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+    />
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+    />
+  </svg>
+</template>

src/composables/viewer.ts

@@ -39,7 +39,7 @@ export default function useViewer() {
     if (!viewer) return
 
     const urls = await UrlHelper.getResourceUrls(url)
-    urls.forEach(async (url) => {
+    urls.forEach(async url => {
       const loader = new SpeckleLoader(viewer.getWorldTree(), url, '')
       await viewer.loadObject(loader, true)
     })