glide-design-system/src/lib/components/Navbar/NavbarLayout.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import PropTypes from "prop-types";
import "./Navbar.css";

/**
 * Navabar Layout design
 * @param {*}  children renders children components inside Navbar Layout
 * @param {*}  style customizing navbar styles
 * @param {*}  size size of navbar in large,medium,same
 */
export const NavbarLayout = ({
  children,
  style,
  size,
  className,
  position,
  navbarContainerStyle,
}) => {
  const combinedStyle = {
    height: size === "large" ? "50px" : size === "small" ? "40px" : "45px",
    position: position ? position : "static",
    top: position === "sticky" ? 0 : "",
    zIndex: position === "sticky" || position === "fixed" ? 1 : "",
    ...style,
  };
  return (
    <div
      className="navbarParent"
      style={{
        position: position ? (position === "sticky" ? "sticky" : "") : "",
        top: position === "sticky" ? 0 : "",
        zIndex: position === "sticky" || position === "fixed" ? 1 : "",
        ...navbarContainerStyle,
      }}
    >
      <nav
        className={`navbar ${className ? className : ""}`}
        style={combinedStyle}
      >
        {children}
      </nav>
    </div>
  );
};

NavbarLayout.propTypes = {
  size: PropTypes.oneOf(["small", "medium", "large"]),
};