@lendi/navbar

Lendi website Navbar component.

Installation

yarn add @lendi/navbar

import { SimpleNavbar, MultiNavbar } from '@lendi/navbar';

export const SimpleNavbar = () => {
  return (
    <SimpleNavbar
      homeURL={homeURL} /** URL for logo */
      useTransparent={false} /** Transparent the background */
      showBookanAppointmentCta={true} /** flag to show Book an appoointment cta btn  */
      showTalkToExpertCta={true} /** flag to show TalktoExpert cta btn  */
      params={''} /** Query params to appear along with homeUrl */
      continueURL={'/'} /** Url for continue button */
      onLogout={() => {}} /** Handler for logout */
      showContinueAction={
        false
      } /** To add more flexibility to show continueButton. For example, in F1/F2, you don't need to show up continue button as you are in funnel, instead show BookAnAppoinment button. */
      hideDashboardItem={false} /** to hide/unhide the dashboard menu in kebab menu  **/
      hideManageApplicationsItem={false} /** to hide/unhide the manageApplication menu in kebab menu  **/
    />
  );
};

export const MultiNavbar = () => {
  return (
    <MultiNavbar
      homeURL={homeURL}
      useTransparent={false}
      showBookanAppointmentCta={true}
      showTalkToExpertCta={true}
      params={''}
      continueURL={'/'}
      onLogout={() => {}}
      showContinueAction={false}
      hideDashboardItem={false}
      hideManageApplicationsItem={false}
    />
  );
};

Usage

This component need to know environmentContext to describe apiBaseUrl so that it could make some API call specific to Lendi use case like getting broker information and get chat channel information.

This package passes the returnURL on clicking Sign-in button so that sign-in flow knows where to come back after authentication. The usage of @lendi/navbar on homepage will set dashboard url as returnURL on clicking the sign-in button(SUB-2409)

note

All comm-panel(or chat) related stories are best viewed in screen with 375px or mobile.