Make header and breadcrumbs sticky

Author: sanjaypinna

app/[locale]/(user)/layout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { notFound, usePathname } from 'next/navigation';
 import React from 'react';
+import { notFound, usePathname } from 'next/navigation';
 
 import MainFooter from '../dashboard/components/main-footer';
 import { MainNav } from '../dashboard/components/main-nav';
@@ -21,7 +21,7 @@ export default function Layout({ children }: UserLayoutProps) {
 
   return (
     <div className="flex h-full grow flex-col">
-      <header className="relative z-2  bg-primaryBlue ">
+      <header className="z-1 sticky top-0 bg-primaryBlue">
         <MainNav hideSearch={hideSearch} />
       </header>
       <>{children}</>

app/[locale]/dashboard/layout.tsx

@@ -12,7 +12,7 @@ interface DashboardLayoutProps {
 export default function Layout({ children }: DashboardLayoutProps) {
   return (
     <div className="flex h-full grow flex-col">
-      <header className="relative z-2  bg-primaryBlue ">
+      <header className="sticky top-0 z-1 bg-primaryBlue">
         <MainNav />
       </header>
       <>{children}</>

components/BreadCrumbs/index.tsx

@@ -14,14 +14,14 @@ interface BreadCrumbsProps {
 
 const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ data }) => {
   return (
-    <div className=" bg-secondaryOrange px-6 py-2 lg:px-10">
+    <div className="sticky top-[70px] lg:top-[85px] z-1 bg-secondaryOrange px-6 py-2 lg:px-10 border-b">
       <Breadcrumb className="mx-1">
         <BreadcrumbList className=''>
           {data.map((item, index) => (
             <React.Fragment key={index}>
               {index === data.length - 1 ? (
                 <BreadcrumbItem>
-                  <BreadcrumbPage className='font-bold'>{item.label}</BreadcrumbPage>
+                  <BreadcrumbPage className='font-bold' >{item.label}</BreadcrumbPage>
                 </BreadcrumbItem>
               ) : (
                 <BreadcrumbItem>