Chakra Components
Navbar Dashboard

Chakra UI 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 { EssayBody, OpenAIModel } from '@/types/types';
import { Database } from '@/types_db';
import { getActiveRoute } from '@/utils/navigation';
import { useDisclosure } from '@chakra-ui/react';
import { Session, User } from '@supabase/supabase-js';
import { usePathname } from 'next/navigation';
import React from 'react';
 
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
type Product = Database['public']['Tables']['products']['Row'];
type Price = Database['public']['Tables']['prices']['Row'];
interface ProductWithPrices extends Product {
  prices: Price[];
}
interface PriceWithProduct extends Price {
  products: Product | null;
}
interface SubscriptionWithProduct extends Subscription {
  prices: PriceWithProduct | null;
}
interface Props {
  .........................
}
const DashboardLayout: React.FC<Props> = (props: Props) => {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);
 
  return (
    ..................... 
          <Navbar
            onOpen={onOpen}
            logoText={'Essay Builder AI'}
            userDetails={props.userDetails}
            session={props.session}
            user={props.session?.user}
            products={props.products}
            subscription={props.subscription}
            // @ts-ignore
            brandText={getActiveRoute(routes, pathname)}
          />
      .................... 
  );
};
 
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