Navbar

The navbar is one of the most important components of the VSETH component library and should be included in most VSETH applications.

Structure

The VSETH navbar consists of two different navbars: The global navbar and the application navbar. The global navbar is controlled entirely by the deployment and the group setting. The application navbar contains items that are specific to your application. We also guarantee that your application navbar will be positioned as a sticky element.

NavLink

Because the VSETH component library is supposed to be independend from any router library we cannot use e.g. the router link component. This is the problem that the NavLink attribute is supposed to solve: You have to supply the Navbar component with a component that it should use to create links. Currently there is no default implementation for a NavLink, but we will provide one in the future.

Configuration Options

The following parts of the navbar can be controlled by your application:

primaryLogo
primarySignet
primaryActionItems
primarySlot
secondarySlot
mobileTopSlot
drawerSlot
secondaryNavItems
secondaryLogo
secondarySignet

The most important attribute is secondaryItems which controls the items that are available to the user. Items are represented as objects conforming to the following interface:

interface Item {
    title?: ReactNode | LangMap;
    active?: boolean;
    disabled?: boolean;
    childItems?: Item[];
    icon?: IconComponent;
    href?: string;
    onClick?: any;
    linkProps?: LinkProps;
  }

In this case LangMap is a Record<string, ReactNode> that can be used to localize your navbar items. If you use a LangMap the language that is displayed can be controlled using the lang attribute which will be used to index the LangMap.

Primary Logo / Primary Signet

The primary logo and the primary signet default to the groupId that you set in your VSRTHContext. You probably won‘t have to change it

Primary Slot

The primary slot should be used if your application needs a login button.

Use the mobileTopSlot attribute to display the primary slot content on mobile devices. You might need to adjust your styling.

NavLink Example

The following could be used as a NavLink in applications using react router:

const NavLink: React.FC<LinkProps> = ({
    href,
    component: Comp,
    disabled,
    exact,
    replace,
    innerRef,
    children,
  }) => {
    if (Comp) {
      return (
        <RRNavLink to={href || ""} className="nav-link" ref={innerRef}>
          <Comp>{children}</Comp>
        </RRNavLink>
      );
    } else {
      return (
        <RRNavLink to={href || ""} className="nav-link" ref={innerRef}>
          {children}
        </RRNavLink>
      );
    }
  };

Documentation

Components