Handle anchor links with next router

Georiviere · Jul 25, 2023 · 448f67c · 448f67c
1 parent f6c622c
commit 448f67c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/src/components/map-menu.tsx b/src/components/map-menu.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
@@ -8,7 +9,6 @@ import { cn } from '@/lib/utils';
 export default function MapMenu() {
   const pathname = usePathname();
   const t = useTranslations('mapMenu');
-  //const hash = global.location?.hash ?? '#content';
   const hasContent = pathname.startsWith('/map/');
   const contentLabel = pathname.includes('observation')
     ? t('observation')
@@ -22,39 +22,36 @@ export default function MapMenu() {
         )}
       >
         <li className="lg:hidden">
-          <a
+          <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-              // hash === '#search' && 'bg-accent text-accent-foreground',
             )}
             href="#search"
           >
             {t('search')}
-          </a>
+          </Link>
         </li>
         {hasContent && (
           <li>
-            <a
+            <Link
               className={cn(
                 'flex h-full items-center rounded-sm px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-                // hash === '#content' && 'bg-accent text-accent-foreground',
               )}
               href="#content"
             >
               {contentLabel}
-            </a>
+            </Link>
           </li>
         )}
         <li>
-          <a
+          <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-              // hash === '#map' && 'bg-accent text-accent-foreground',
             )}
-            href={`#map`}
+            href="#map"
           >
             {t('map')}
-          </a>
+          </Link>
         </li>
       </ul>
     </nav>

diff --git a/src/components/observation-cta.tsx b/src/components/observation-cta.tsx
@@ -32,25 +32,25 @@ export function ObservationCTA() {
                   {t('damages.shortDescription')}
                 </ListItem>
                 <ListItem
-                  href={`/map/observation/fauna-flora?${params.toString()}`}
+                  href={`/map/observation/fauna-flora?${params.toString()}#content`}
                   title={t('fauna-flora.label')}
                 >
                   {t('fauna-flora.shortDescription')}
                 </ListItem>
                 <ListItem
-                  href={`/map/observation/quantity?${params.toString()}`}
+                  href={`/map/observation/quantity?${params.toString()}#content`}
                   title={t('quantity.label')}
                 >
                   {t('quantity.shortDescription')}
                 </ListItem>
                 <ListItem
-                  href={`/map/observation/quality?${params.toString()}`}
+                  href={`/map/observation/quality?${params.toString()}#content`}
                   title={t('quality.label')}
                 >
                   {t('quality.shortDescription')}
                 </ListItem>
                 <ListItem
-                  href={`/map/observation/landscape?${params.toString()}`}
+                  href={`/map/observation/landscape?${params.toString()}#content`}
                   title={t('landscape.label')}
                 >
                   {t('landscape.shortDescription')}