From 175f6c3fcb62b7c19981577fc69aa5b1569863e9 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 2 Sep 2024 17:28:30 +0200
Subject: [PATCH] Responsive design

---
 components/SearchView.vue                  |  8 ++--
 components/canvas/CanvasRenderer.vue       |  6 +--
 components/explorer/ExplorerNavigation.vue |  8 ++--
 components/explorer/NavigationLink.vue     |  8 ++--
 components/prose/ProseA.vue                |  2 +-
 layouts/default.vue                        | 52 +++++++++++++-------
 layouts/explorer.vue                       | 56 +++++++++++++++-------
 7 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/components/SearchView.vue b/components/SearchView.vue
index 422bcc6..6959651 100644
--- a/components/SearchView.vue
+++ b/components/SearchView.vue
@@ -6,6 +6,8 @@ const pos = ref<DOMRect>(), loading = ref(false);
 
 let timeout: NodeJS.Timeout;
 
+const emit = defineEmits(['navigate']);
+
 function search(e: Event)
 {
     pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();
@@ -50,7 +52,7 @@ async function debounced()
                 <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''">
+                    @mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''; emit('navigate');">
                     <div class="">
                         <BoldContent class="text-lg" :text="result.name" :matched="input" />
                         <div class="flex justify-between text-sm">
@@ -62,7 +64,7 @@ async function debounced()
                 <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''">
+                    @mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''; emit('navigate');">
                     <div class="">
                         <BoldContent class="text-lg" :text="result.title" :matched="input" />
                         <div class="flex justify-between text-sm">
@@ -74,7 +76,7 @@ async function debounced()
                 <div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
                     @mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
                     @mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
-                    @mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
+                    @mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''; emit('navigate');">
                     <div class="">
                         <BoldContent class="text-lg" :text="result.username" :matched="input" />
                     </div>
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 0f10c72..ed48fe9 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -224,10 +224,10 @@ dark:border-dark-purple
 <template>
     <Suspense>
         <template #default>
-            <div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
-                @dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full"
+            <div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
+                @dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
                 :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
+                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
                     <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
                         aria-label="Zoom in" data-tooltip-position="left">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
diff --git a/components/explorer/ExplorerNavigation.vue b/components/explorer/ExplorerNavigation.vue
index 861be50..795f8f9 100644
--- a/components/explorer/ExplorerNavigation.vue
+++ b/components/explorer/ExplorerNavigation.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 const route = useRoute();
-
 const project = computed(() => parseInt(route.params.projectId as string));
 
 const { data: navigation, refresh } = await useLazyFetch(() => `/api/project/${project.value}/navigation`, { immediate: false });
-
 if(!isNaN(project.value))
 {
     await refresh();
 }
+
+const emit = defineEmits(['navigate']);
 </script>
 
 <template>
     <div class="relative flex-auto">
-        <div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
-            <NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
+        <div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto xl:px-4 px-2">
+            <NavigationLink @navigate="e => emit('navigate')" class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/explorer/NavigationLink.vue b/components/explorer/NavigationLink.vue
index 98c8a19..0a5af20 100644
--- a/components/explorer/NavigationLink.vue
+++ b/components/explorer/NavigationLink.vue
@@ -12,6 +12,8 @@ const hasChildren = computed(() => {
 });
 
 const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
+
+const emit = defineEmits(['navigate']);
 </script>
 
 <template>
@@ -24,13 +26,13 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
                         <path d="M3 8L12 17L21 8"></path>
                     </svg>
                 </div>
-                <div class="font-semibold">{{ link.title }}</div>
+                <div class="font-semibold xl:text-base text-sm">{{ link.title }}</div>
             </div>
             <div v-if="!collapsed">
-                <NavigationLink class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
+                <NavigationLink @navigate="e => emit('navigate')" class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
             </div>
         </template>
-        <NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
+        <NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
             active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
             <div class="">{{ link.title }}</div>
         </NuxtLink>
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index 5fc8de8..647d493 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -55,7 +55,7 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
     @apply text-sm;
     @apply px-1;
     @apply ms-1;
-    @apply py-1;
+    @apply pb-0.5;
     @apply rounded-full;
     @apply rounded-se-none;
     @apply border;
diff --git a/layouts/default.vue b/layouts/default.vue
index 5ebb274..26f7c15 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,23 +1,43 @@
+<script setup lang="ts">
+const container = ref<HTMLElement>();
+
+function toggleNavigation(bool?: boolean)
+{
+	container.value?.setAttribute('aria-expanded', bool === undefined ? (container.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
+}
+</script>
+
 <template>
-	<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
-		<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
-			<div class="flex justify-between items-center">
-				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
-				<div class="flex gap-4 items-center">
-					<ThemeSwitch />
-					<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
+	<div ref="container" aria-expanded="false" class="group flex flex-1 h-screen overflow-hidden">
+		<div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+				class="w-4 h-4 fill-light-100 dark:fill-dark-100">
+				<line x1="21" y1="6" x2="3" y2="6"></line>
+				<line x1="15" y1="12" x2="3" y2="12"></line>
+				<line x1="17" y1="18" x2="3" y2="18"></line>
+			</svg>
+		</div>
+		<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
+			<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
+				<div class="flex justify-between items-center">
+					<NuxtLink @click="e => toggleNavigation(false)" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
+					<div class="flex gap-4 items-center">
+						<ThemeSwitch />
+						<NuxtLink @click="e => toggleNavigation(false)" class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
+					</div>
 				</div>
+				<div class="flex"><SearchView @navigate="e => toggleNavigation(false)" /></div>
+				<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
+				<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
+			</div>
+			<div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
+				<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
+				<p>Copyright Peaceultime - 2024</p>
 			</div>
-			<div class="flex"><SearchView /></div>
-			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
-			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
 		</div>
-		<div class="text-center text-sm text-light-70 dark:text-dark-70">
-			<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
-			<p>Copyright Peaceultime - 2024</p>
+		<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
+			<slot></slot>
 		</div>
 	</div>
-	<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
-		<slot></slot>
-	</div>
 </template>
\ No newline at end of file
diff --git a/layouts/explorer.vue b/layouts/explorer.vue
index 00558de..ead0507 100644
--- a/layouts/explorer.vue
+++ b/layouts/explorer.vue
@@ -1,25 +1,45 @@
+<script setup lang="ts">
+const container = ref<HTMLElement>();
+
+function toggleNavigation(bool?: boolean)
+{
+	container.value?.setAttribute('aria-expanded', bool === undefined ? (container.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
+}
+</script>
+
 <template>
-	<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
-		<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
-			<div class="flex justify-between items-center">
-				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
-				<div class="flex gap-4 items-center">
-					<ThemeSwitch />
-					<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
+	<div ref="container" aria-expanded="false" class="group flex flex-1 h-screen overflow-hidden">
+		<div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+				class="w-4 h-4 fill-light-100 dark:fill-dark-100">
+				<line x1="21" y1="6" x2="3" y2="6"></line>
+				<line x1="15" y1="12" x2="3" y2="12"></line>
+				<line x1="17" y1="18" x2="3" y2="18"></line>
+			</svg>
+		</div>
+		<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
+			<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
+				<div class="flex justify-between items-center">
+					<NuxtLink @click="e => toggleNavigation(false)" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
+					<div class="flex gap-4 items-center">
+						<ThemeSwitch />
+						<NuxtLink @click="e => toggleNavigation(false)" class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
+					</div>
 				</div>
+				<div class="flex"><SearchView @navigate="e => toggleNavigation(false)" /></div>
+				<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
+				<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
+				<hr class="border-light-35 dark:border-dark-35"/>
+				<ExplorerNavigation @navigate="e => toggleNavigation(false)"></ExplorerNavigation>
+			</div>
+			<div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
+				<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
+				<p>Copyright Peaceultime - 2024</p>
 			</div>
-			<div class="flex"><SearchView /></div>
-			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
-			<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
-			<hr class="border-light-35 dark:border-dark-35"/>
-			<ExplorerNavigation></ExplorerNavigation>
 		</div>
-		<div class="text-center text-sm text-light-70 dark:text-dark-70">
-			<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
-			<p>Copyright Peaceultime - 2024</p>
+		<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
+			<slot></slot>
 		</div>
 	</div>
-	<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
-		<slot></slot>
-	</div>
 </template>
\ No newline at end of file