Use segmented control as tab (#208)

Co-authored-by: Thibaud Dauce <[email protected]>
datagouv · Dec 16, 2024 · 6daf0db · 6daf0db
1 parent e9342aa
commit 6daf0db
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 29 deletions.
diff --git a/components/TabLinks.vue b/components/TabLinks.vue
@@ -1,15 +1,19 @@
 <template>
-  <nav class="flex px-8 border-b space-x-2 font-bold">
-    <NuxtLinkLocale
-      v-for="link in links"
-      :key="link.label"
-      :to="link.href"
-      class="bloc bg-blue-light hover:!bg-blue-tint px-4 py-2 no-underline border-x border-t !border-transparent -mb-px outline-none !bg-none aria-current-page:bg-white aria-current-page:!border-gray-200 aria-current-page:hover:!bg-white"
-      :aria-current="isCurrent(link.href) ? 'page': false"
-    >
-      {{ link.label }}
-    </NuxtLinkLocale>
-  </nav>
+  <div class="flex justify-start">
+    <nav class="flex space-x-1 font-medium rounded border border-neutral-300">
+      <NuxtLinkLocale
+        v-for="link in links"
+        :key="link.label"
+        :to="link.href"
+        class="group block rounded !bg-none !bg-transparent !border border-transparent  -m-px no-underline outline-none aria-current-page:border aria-current-page:!border-primary aria-current-page:text-primary p-1"
+        :aria-current="isCurrent(link.href) ? 'page': false"
+      >
+        <span class="rounded  px-2 ">
+          {{ link.label }}
+        </span>
+      </NuxtLinkLocale>
+    </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -24,3 +28,10 @@ const isCurrent = (href: string) => {
   return localePath(href) === route.fullPath
 }
 </script>
+
+<style scoped>
+.group:not([aria-current='page']):hover span {
+  /* Could maybe be replaced by group-hover-not-aria-current-page:bg-white/50 ? */
+  background-color: rgba(255, 255, 255, 0.5);
+}
+</style>
diff --git a/pages/beta/admin/datasets/[id].vue b/pages/beta/admin/datasets/[id].vue
@@ -38,8 +38,8 @@
     </Breadcrumb>
 
     <div v-if="dataset">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataset.title }}
         </h1>
         <a
@@ -51,6 +51,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDatasetAdminUrl(dataset), label: t('Metadata') },
           { href: `${getDatasetAdminUrl(dataset)}/files`, label: t('Files') },

diff --git a/pages/beta/admin/me/dataservices/[id].vue b/pages/beta/admin/me/dataservices/[id].vue
@@ -28,8 +28,8 @@
     </Breadcrumb>
 
     <div v-if="dataservice">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataservice.title }}
         </h1>
         <a
@@ -41,6 +41,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDataserviceAdminUrl(dataservice), label: t('Metadata') },
           { href: `${getDataserviceAdminUrl(dataservice)}/datasets`, label: t('Datasets') },

diff --git a/pages/beta/admin/me/datasets/[id].vue b/pages/beta/admin/me/datasets/[id].vue
@@ -20,8 +20,8 @@
     </Breadcrumb>
 
     <div v-if="dataset">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataset.title }}
         </h1>
         <a
@@ -33,6 +33,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDatasetAdminUrl(dataset), label: t('Metadata') },
           { href: `${getDatasetAdminUrl(dataset)}/files`, label: t('Files') },

diff --git a/pages/beta/admin/me/reuses/[id].vue b/pages/beta/admin/me/reuses/[id].vue
@@ -28,8 +28,8 @@
     </Breadcrumb>
 
     <div v-if="reuse">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ reuse.title }}
         </h1>
         <a
@@ -41,6 +41,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getReuseAdminUrl(reuse), label: t('Metadata') },
           { href: `${getReuseAdminUrl(reuse)}/datasets`, label: t('Datasets') },

diff --git a/pages/beta/admin/organizations/[oid]/dataservices/[id].vue b/pages/beta/admin/organizations/[oid]/dataservices/[id].vue
@@ -36,8 +36,8 @@
     </Breadcrumb>
 
     <div v-if="dataservice">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataservice.title }}
         </h1>
         <a
@@ -49,6 +49,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDataserviceAdminUrl(dataservice), label: t('Metadata') },
           { href: `${getDataserviceAdminUrl(dataservice)}/datasets`, label: t('Datasets') },

diff --git a/pages/beta/admin/organizations/[oid]/datasets/[id].vue b/pages/beta/admin/organizations/[oid]/datasets/[id].vue
@@ -36,8 +36,8 @@
     </Breadcrumb>
 
     <div v-if="dataset">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataset.title }}
         </h1>
         <a
@@ -49,6 +49,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDatasetAdminUrl(dataset), label: t('Metadata') },
           { href: `${getDatasetAdminUrl(dataset)}/files`, label: t('Files') },

diff --git a/pages/beta/admin/organizations/[oid]/reuses/[id].vue b/pages/beta/admin/organizations/[oid]/reuses/[id].vue
@@ -36,8 +36,8 @@
     </Breadcrumb>
 
     <div v-if="reuse">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ reuse.title }}
         </h1>
         <a
@@ -49,6 +49,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getReuseAdminUrl(reuse), label: t('Metadata') },
           { href: `${getReuseAdminUrl(reuse)}/datasets`, label: t('Datasets') },

diff --git a/pages/beta/admin/site/dataservices/[id].vue b/pages/beta/admin/site/dataservices/[id].vue
@@ -28,8 +28,8 @@
     </Breadcrumb>
 
     <div v-if="dataservice">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ dataservice.title }}
         </h1>
         <a
@@ -41,6 +41,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getDataserviceAdminUrl(dataservice), label: t('Metadata') },
           { href: `${getDataserviceAdminUrl(dataservice)}/datasets`, label: t('Datasets') },

diff --git a/pages/beta/admin/site/reuses/[id].vue b/pages/beta/admin/site/reuses/[id].vue
@@ -28,8 +28,8 @@
     </Breadcrumb>
 
     <div v-if="reuse">
-      <div class="flex items-center justify-between">
-        <h1 class="fr-h3 fr-mb-5v">
+      <div class="flex items-center justify-between mb-5">
+        <h1 class="fr-h3 !mb-0">
           {{ reuse.title }}
         </h1>
         <a
@@ -41,6 +41,7 @@
       </div>
 
       <TabLinks
+        class="mb-5"
         :links="[
           { href: getReuseAdminUrl(reuse), label: t('Metadata') },
           { href: `${getReuseAdminUrl(reuse)}/datasets`, label: t('Datasets') },