feat: responsive resource explorer

datagouv-components/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -56,7 +56,7 @@
             :resource
           />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />

datagouv-components/src/components/ResourceExplorer/ResourceExplorer.vue

@@ -2,6 +2,19 @@
   <div v-if="allResources.length || hasAnyResources">
     <div class="flex gap-6">
       <div class="flex-1 min-w-0">
+        <div
+          v-if="dataset.resources.total > 1"
+          class="md:hidden flex justify-end mb-3"
+        >
+          <BrandedButton
+            size="xs"
+            color="secondary"
+            :icon="RiListUnordered"
+            @click="mobileSidebarOpen = true"
+          >
+            {{ t('Ressources ({count})', { count: dataset.resources.total }) }}
+          </BrandedButton>
+        </div>
         <ResourceExplorerViewer
           v-if="selectedResource && allResources.length"
           :key="selectedResource.id"
@@ -30,17 +43,38 @@
           </BrandedButton>
         </div>
       </div>
+      <div class="hidden md:block">
+        <ResourceExplorerSidebar
+          :resources="allResources"
+          :selected-resource-id="selectedResource?.id ?? null"
+          :collapsed="sidebarCollapsed"
+          :search
+          @select="selectResource"
+          @load-more="loadMore"
+          @update:collapsed="sidebarCollapsed = $event"
+          @update:search="updateSearch($event)"
+        />
+      </div>
+    </div>
+
+    <!-- Mobile sidebar panel -->
+    <dialog
+      ref="mobileSidebarDialog"
+      class="mobile-sidebar md:hidden fixed inset-0 m-0 ml-auto p-0 h-dvh max-h-dvh w-80 max-w-[85vw] bg-white shadow-lg overflow-y-auto overscroll-contain backdrop:bg-black/30"
+      @close="mobileSidebarOpen = false"
+      @click.self="closeMobileSidebar"
+    >
       <ResourceExplorerSidebar
         :resources="allResources"
         :selected-resource-id="selectedResource?.id ?? null"
-        :collapsed="sidebarCollapsed"
+        :collapsed="false"
         :search
         @select="selectResource"
         @load-more="loadMore"
-        @update:collapsed="sidebarCollapsed = $event"
+        @update:collapsed="closeMobileSidebar"
         @update:search="updateSearch($event)"
       />
-    </div>
+    </dialog>
   </div>
   <div
     v-else
@@ -73,6 +107,7 @@ import type { DatasetV2 } from '../../types/datasets'
 import type { Resource, ResourceGroup, ResourceType } from '../../types/resources'
 import ResourceExplorerSidebar from './ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './ResourceExplorerViewer.vue'
+import { RiListUnordered } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 
 const props = withDefaults(defineProps<{
@@ -211,6 +246,21 @@ const flatResources = computed(() =>
 
 // Fetch resource by ID if specified in URL (for SSR)
 const initialResourceId = resourceIdQuery.value
+const mobileSidebarOpen = ref(false)
+const mobileSidebarDialog = ref<HTMLDialogElement | null>(null)
+
+watch(mobileSidebarOpen, (open) => {
+  if (open) {
+    mobileSidebarDialog.value?.showModal()
+  }
+  else {
+    mobileSidebarDialog.value?.close()
+  }
+})
+
+function closeMobileSidebar() {
+  mobileSidebarOpen.value = false
+}
 const { data: fetchedResource } = initialResourceId
   ? await useFetch<Resource>(`/api/1/datasets/${props.dataset.id}/resources/${initialResourceId}/`)
   : { data: ref(null) }
@@ -238,6 +288,7 @@ function updateSearch(newSearch: string) {
 
 const selectResource = (resource: Resource) => {
   selectedResource.value = resource
+  mobileSidebarOpen.value = false
   router.replace({
     query: { ...router.currentRoute.value.query, resource_id: resource.id },
   })
@@ -252,3 +303,9 @@ watch(flatResources, () => {
   }
 })
 </script>
+
+<style>
+html:has(dialog.mobile-sidebar[open]) {
+  overflow: hidden;
+}
+</style>

datagouv-components/src/components/ResourceExplorer/ResourceExplorerSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <aside
     v-if="!collapsed"
-    class="w-72 shrink-0 pl-4"
+    class="w-full md:w-72 shrink-0 p-4 md:pr-0"
   >
     <div class="flex items-center justify-between mb-3">
       <h3 class="text-sm font-bold uppercase mb-0">
@@ -32,7 +32,7 @@
       >
     </div>
 
-    <div class="space-y-4 overflow-y-auto">
+    <div class="space-y-4 overflow-y-auto md:max-h-[calc(100vh-14rem)]">
       <div
         v-for="group in resources"
         :key="group.type"

datagouv-components/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -6,20 +6,21 @@
           <h3 class="m-0 flex items-baseline text-base font-bold leading-tight">
             <ResourceIcon
               :resource
-              class="size-3.5 mr-1"
+              class="size-3.5 mr-1 shrink-0 translate-y-px"
             />
             <span class="line-clamp-2">{{ resource.title || t('Fichier sans nom') }}</span>
           </h3>
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
             :text="resourceExternalUrl"
+            class="hidden md:inline-flex"
           />
         </div>
-        <div class="text-gray-medium text-xs flex items-center gap-1">
+        <div class="text-gray-medium text-xs flex items-center gap-1 flex-wrap">
           <SchemaBadge :resource />
           <RiSubtractLine
-            v-if="resource.schema"
+            v-if="resource.schema?.name || resource.schema?.url"
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />