Tailwind CSS Dashboard navbar

The dashboard navbar is used in our dashboard layout and it takes on several props, since it offers different functionalities like displaying the profile picture of the user, logout button and more. Here is an example of the Navbar component :

/components/layout/index.tsx

import Navbar from '@/components/navbar/NavbarAdmin';
import { routes } from '@/components/routes'; 
import { getActiveRoute } from '@/utils/navigation';
import React from 'react'; 
 
const DashboardLayout: React.FC<Props> = (props: Props) => {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);
 
  return (
    .....................
        <main
          className={`mx-2.5 flex-none transition-all md:pr-2 xl:ml-[313px] dark:bg-navy-900`}
        >
          <Navbar
            onOpen={() => setOpen(!open)} 
            userDetails={props.userDetails} 
            brandText={getActiveRoute(routes, pathname)}
          />
      ....................
        </main> 
  );
};
 
export default DashboardLayout;

onOpen - function that opens/closes the sidebar on the mobile screen
userDetails - object that includes user characteristics like name and profile picture
brandText - route name displayed in the navbar

Dashboard Navbar

Tailwind CSS Modal Tailwind CSS Navbar Landing