@icoms-detection/ui/src/stitches/navbar.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

import { styled } from "../stitches.config";
import { navbar_width } from "../utils/constants";

export const StyledNavButtons = styled("div", {
  position: "absolute",
  backgroundColor: "$primary_500",
  top: navbar_width + "px",
  width: navbar_width + "px",
  height: "calc(100vh - 80px)",
  color: "$neutral_50",
  stroke: "$neutral_50",
  "@sm": {
    width: "auto",
    position: "initial",
  },
});

export const StyledHomeButton = styled("button", {
  position: "relative",
  width: navbar_width + "px",
  height: "100%",
  display: "flex",
  flexShrink: 0,
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: "$primary_600",
  border: "none",
  padding: "0",
  cursor: "pointer",
  "@sm": {
    width: "100%",
    height: navbar_width + "px",
  },
});

export const StyledNavbar = styled("div", {
  width: "100%",
  height: "80px",
  display: "flex",
  position: "fixed",
  zIndex: 10,
  top: 0,
  left: 0,
  backgroundColor: "$primary_500",
  flexDirection: "column",
  "@sm": {
    height: "100vh",
    width: "80px",
  },
});

export const StyledCompanyIcon = styled("img", {
  height: "40%",
  width: "40%",
});

export const StyledMobileNavbar = styled("div", {
  display: "flex",
  height: navbar_width + "px",
  width: "inherit",
  justifyContent: "space-between",
  "@sm": {
    width: "auto",
  },
});

export const StyledNavChildren = styled("div", {
  flex: "1 0",
  paddingTop: navbar_width + "px",
  minHeight: "100vh",
  height: "100%",
  "@sm": {
    paddingLeft: navbar_width + "px",
    paddingTop: "0px",
  },
});