Display DetailsGoBack on details page

GeotrekCE · Nov 19, 2024 · 309458f · 309458f
1 parent 700a143
commit 309458f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
@@ -49,6 +49,7 @@ import { useDetailsSections } from './useDetailsSections';
 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;
@@ -746,6 +747,7 @@ export const DetailsHeaderMobile: React.FC<DetailsHeaderMobileProps> = ({ title:
         'transition-transform duration-500 will-change-transform',
       )}
     >
+      <DetailsBackButton className="border-r border-solid pr-4" />
       <span className="truncate">{name}</span>
     </div>
   );

diff --git a/frontend/src/components/pages/details/components/DetailsHeader/DetailsHeader.tsx b/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}`}