Define go back button on details pages

frontend/src/components/ToolTip/ToolTip.tsx

@@ -29,8 +29,8 @@ const ToolTipGT: FC<Props> = ({
         className={cn(
           'tooltipSpan',
           'relative absolute left-1/2 -translate-x-1/2 p-1.5 text-center rounded-md z-1',
-          'w-0 invisible',
-          'group-hover:w-max group-hover:visible',
+          'w-0 hidden',
+          'group-hover:w-max group-hover:inline',
           "after:content-[''] after:block after:absolute after:left-1/2 after:-ml-1 after:border-4 after:border-transparent",
           invertPosition
             ? 'top-full after:bottom-full after:border-b-primary1'

frontend/src/components/pages/details/Details.tsx

@@ -49,6 +49,7 @@
 import { DetailsViewPoints } from './components/DetailsViewPoints';
 import { DetailsFiles } from './components/DetailsFiles';
 import { theme } from '../../../../tailwind.config';
+import { DetailsBackButton } from './components/DetailsPreview/DetailsBackButton';
 
 interface Props {
   slug: string | string[] | undefined;
@@ -706,7 +707,7 @@
         )}
       </>
     ),
     [
       details,
       displayAltimetricProfile,
       displayMobileMap,
@@ -736,15 +737,18 @@
   return (
     <div
       id="details_headerMobile"
-      className={`py-3 px-4
-      text-P2 font-bold text-primary1
-      shadow-md bg-white
-      ${displayState === 'DISPLAYED' ? 'top-mobileHeader sticky' : '-top-mobileHeader'}
-      desktop:hidden z-headerDetails truncate
-      transition-all duration-500
-      `}
+      className={cn(
+        'flex gap-3 items-center py-3 px-4',
+        'text-P2 font-bold text-primary1',
+        'shadow-md bg-white',
+        '-top-4 right-0 left-0 z-headerDetails fixed',
+        displayState === 'DISPLAYED' && 'top-0 translate-y-mobileHeader',
+        'desktop:hidden',
+        'transition-transform duration-500 will-change-transform',
+      )}
     >
-      {name}
+      <DetailsBackButton className="border-r border-solid pr-4" />
+      <span className="truncate">{name}</span>
     </div>
   );
 };

frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx

@@ -11,6 +11,7 @@ import { TouristicEventDetails } from 'modules/touristicEvent/interface';
 import { ContentType } from 'modules/interface';
 import { DetailsHeaderSection, DetailsSections } from '../../useDetails';
 import { useDetailsHeader } from './useDetailsHeader';
+import { DetailsBackButton } from '../DetailsPreview/DetailsBackButton';
 
 interface DetailsHeaderProps {
   anchors: Partial<DetailsSections>[];
@@ -42,16 +43,17 @@ export const DetailsHeader: React.FC<DetailsHeaderProps> = ({
       id="details_headerDesktop"
       className="hidden desktop:flex items-center
       sticky top-desktopHeader z-subHeader
-      shadow-md bg-white h-14"
+      shadow-md bg-white h-14 pl-3"
       role="navigation"
     >
+      <DetailsBackButton className="border-r border-solid pr-5" />
       {sections.length > 0 && (
-        <ul id="details_headerDesktop_inlineMenu" className="flex flex-1 ml-3">
+        <ul id="details_headerDesktop_inlineMenu" className="pl-5 flex flex-1 gap-5">
           {sections.map(sectionId => (
             <li key={sectionId}>
               <a
                 className={cn(
-                  'mx-5 pb-1 border-b-2 border-transparent border-solid transition-all duration-300  hover:text-primary1 hover:border-primary1 focus:text-primary1 focus:border-primary1',
+                  'pb-1 border-b-2 border-transparent border-solid transition-all duration-300 hover:text-primary1 hover:border-primary1 focus:text-primary1 focus:border-primary1',
                   currentSectionId === sectionId && isMounted && 'text-primary1 border-primary1',
                 )}
                 href={`#details_${sectionId}`}

frontend/src/components/pages/details/components/DetailsPreview/DetailsBackButton.tsx

@@ -0,0 +1,34 @@
+import React, { HTMLAttributes } from 'react';
+import { cn } from 'services/utils/cn';
+import { ArrowLeft } from 'components/Icons/ArrowLeft';
+import { useRouter } from 'next/router';
+import { useListAndMapContext } from 'modules/map/ListAndMapContext';
+import ToolTip from 'components/ToolTip';
+import { useIntl } from 'react-intl';
+
+export const DetailsBackButton: React.FC<HTMLAttributes<HTMLButtonElement>> = ({ className }) => {
+  const router = useRouter();
+  const { previousRouter } = useListAndMapContext();
+  const intl = useIntl();
+
+  if (!previousRouter?.asPath.startsWith('/search')) {
+    return null;
+  }
+
+  return (
+    <div className={cn('custo-go-back-button', className)}>
+      <ToolTip toolTipText={intl.formatMessage({ id: 'details.goBack' })} invertPosition>
+        <button
+          type="button"
+          className={cn(
+            'w-max inline-flex justify-start items-center gap-2 p-2 rounded-full shadow-sm text-primary1 bg-white hover:bg-primary2 transition-colors',
+          )}
+          onClick={router.back}
+        >
+          <ArrowLeft size={16} aria-hidden />
+          <span className="sr-only">{intl.formatMessage({ id: 'details.goBack' })}</span>
+        </button>
+      </ToolTip>
+    </div>
+  );
+};

frontend/src/hooks/useBrowserNavigationDetection.ts

@@ -1,11 +1,12 @@
-import { useRouter } from 'next/router';
+import { NextRouter, useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
 
 // Returns “true” if the page is displayed using the browser's "back" or "forward" buttons
 const useBrowserNavigationDetection = () => {
   const router = useRouter();
   const isNavigatedByBrowserRef = useRef(false);
   const [isNavigatedByBrowser, setNavigatedByBrowser] = useState(false);
+  const [previousRouter, setPreviousRouter] = useState<NextRouter | null>(null);
 
   useEffect(() => {
     router.beforePopState(() => {
@@ -22,6 +23,7 @@ const useBrowserNavigationDetection = () => {
       } else {
         setNavigatedByBrowser(false);
       }
+      setPreviousRouter(router);
     };
 
     router.events.on('routeChangeStart', handleRouteChangeStart);
@@ -32,7 +34,10 @@ const useBrowserNavigationDetection = () => {
     };
   }, [router]);
 
-  return isNavigatedByBrowser;
+  return {
+    isNavigatedByBrowser,
+    previousRouter,
+  };
 };
 
 export default useBrowserNavigationDetection;

frontend/src/modules/map/ListAndMapContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState } from 'react';
 import { LatLngBounds } from 'leaflet';
 import useBrowserNavigationDetection from 'hooks/useBrowserNavigationDetection';
+import { NextRouter } from 'next/router';
 import { MapResults } from '../mapResults/interface';
 
 export interface ListAndMapContext {
@@ -11,6 +12,7 @@ export interface ListAndMapContext {
   setHoveredCardId: (hoveredCardId: string | null) => void;
   setSearchBbox: (bbox: LatLngBounds | null) => void;
   isNavigatedByBrowser: boolean;
+  previousRouter: NextRouter | null;
 }
 
 const listAndMapContext = createContext<ListAndMapContext>({
@@ -21,6 +23,7 @@ const listAndMapContext = createContext<ListAndMapContext>({
   setHoveredCardId: (_: string | null) => _,
   setSearchBbox: (_: LatLngBounds | null) => _,
   isNavigatedByBrowser: false,
+  previousRouter: null,
 });
 
 export const useListAndMapContext = () => useContext(listAndMapContext);
@@ -30,7 +33,7 @@ export const ListAndMapProvider: React.FC<React.PropsWithChildren> = ({ children
   const [points, setPoints] = useState<MapResults>([]);
   const [searchBbox, setSearchBbox] = useState<LatLngBounds | null>(null);
 
-  const isNavigatedByBrowser = useBrowserNavigationDetection();
+  const { isNavigatedByBrowser, previousRouter } = useBrowserNavigationDetection();
 
   return (
     <listAndMapContext.Provider
@@ -42,6 +45,7 @@ export const ListAndMapProvider: React.FC<React.PropsWithChildren> = ({ children
         searchBbox,
         setSearchBbox,
         isNavigatedByBrowser,
+        previousRouter,
       }}
     >
       {children}

frontend/src/translations/ca.json

@@ -179,7 +179,8 @@
     "centerOnMap": "Center on map",
     "openPictureInFullScreen": "View picture in full screen",
     "closeFullScreen": "Close full screen mode",
-    "contact": "Contacte"
+    "contact": "Contacte",
+    "goBack": "Tornar enrere"
   },
   "touristicContent": {
     "email": "Correu electrònic",

frontend/src/translations/de.json

@@ -179,7 +179,8 @@
     "centerOnMap": "Center on map",
     "openPictureInFullScreen": "View picture in full screen",
     "closeFullScreen": "Close full screen mode",
-    "contact": "Kontakt"
+    "contact": "Kontakt",
+    "goBack": "Zurückgehen"
   },
   "touristicContent": {
     "email": "Email",

frontend/src/translations/en.json

@@ -182,7 +182,8 @@
     "centerOnMap": "Center on map",
     "openPictureInFullScreen": "View picture in full screen",
     "closeFullScreen": "Close full screen mode",
-    "contact": "Contact"
+    "contact": "Contact",
+    "goBack": "Go back"
   },
   "touristicContent": {
     "email": "Email",

frontend/src/translations/es.json

@@ -179,7 +179,8 @@
     "centerOnMap": "Center on map",
     "openPictureInFullScreen": "View picture in full screen",
     "closeFullScreen": "Close full screen mode",
-    "contact": "Contacto"
+    "contact": "Contacto",
+    "goBack": "Volver atrás"
   },
   "touristicContent": {
     "email": "Correo electrónico",

frontend/src/translations/fr.json

@@ -182,7 +182,8 @@
     "centerOnMap": "Centrer sur la carte",
     "openPictureInFullScreen": "Voir l'image en plein écran",
     "closeFullScreen": "Fermer le mode plein écran",
-    "contact": "Contact"
+    "contact": "Contact",
+    "goBack": "Retour"
   },
   "touristicContent": {
     "email": "Courriel",

frontend/src/translations/it.json

@@ -182,7 +182,8 @@
     "centerOnMap": "Center on map",
     "openPictureInFullScreen": "View picture in full screen",
     "closeFullScreen": "Close full screen mode",
-    "contact": "Contatto"
+    "contact": "Contatto",
+    "goBack": "Torna indietro"
   },
   "touristicContent": {
     "email": "email",

frontend/tailwind.config.js

@@ -79,10 +79,10 @@ module.exports = {
       20: 20,
       leafletSvg: 200,
       text: 200,
-      loader: 300,
       floatingButton: 300,
       header: 500,
       subHeader: 450,
+      loader: 460,
       headerDetails: 300,
       sliderMenu: 900,
       map: 1000,