orcs-design-system/es/components/SideNavV2/styles/SideNavV2.styles.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * Styled components for SideNavV2: wrapper, items container, toggle handle,
 * expanded panel, resize handle, and panel control button.
 */
import styled from "styled-components";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import Popover from "../../Popover";
import { BREAKPOINTS, EXPANDED_SIZE, SIDENAV_WIDTHS } from "../constants/sideNav";
const createShouldForwardProp = blockedProps => function shouldForwardProp(prop, defaultValidatorFn) {
  if (blockedProps.includes(prop)) {
    return false;
  }
  if (typeof defaultValidatorFn === "function") {
    return defaultValidatorFn(prop);
  }
  return true;
};
const filterIsExpandedProp = createShouldForwardProp(["isExpanded"]);
export const SideNavWrapper = /*#__PURE__*/styled("div").withConfig({
  shouldForwardProp: createShouldForwardProp(["sideNavHeight"]),
  displayName: "SideNavWrapper",
  componentId: "sc-y5tsj2-0"
})(props => css({
  bg: themeGet("colors.white")(props),
  color: themeGet("colors.greyDarkest")(props),
  minHeight: props.sideNavHeight || "100vh",
  height: "100%",
  maxWidth: "max-content",
  fontFamily: themeGet("fonts.main")(props),
  borderRight: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
  display: "flex",
  alignItems: "stretch",
  position: "relative",
  alignContent: "stretch",
  zIndex: "5",
  flexShrink: "0",
  alignSelf: "stretch",
  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
    borderRight: "none",
    borderTop: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
    width: "100%",
    height: "auto",
    minWidth: "auto",
    maxWidth: "initial",
    minHeight: "initial",
    maxHeight: themeGet("appScale.sidebarMobileHeight", "100vh")(props),
    position: "fixed",
    bottom: "0",
    left: "0",
    zIndex: "1000",
    flexDirection: "column-reverse"
  }
}));
export const SideNavItems = /*#__PURE__*/styled("div").withConfig({
  shouldForwardProp: filterIsExpandedProp,
  displayName: "SideNavItems",
  componentId: "sc-y5tsj2-1"
})(props => css(_objectSpread(_objectSpread({
  width: props.isExpanded ? SIDENAV_WIDTHS.EXPANDED : themeGet("appScale.sideNavSize")(props),
  height: "100%",
  overflowX: "hidden",
  overflowY: "auto",
  display: "flex",
  flexDirection: "column",
  flexShrink: "0",
  flexGrow: "1",
  padding: "10px 10px 10px 10px",
  gap: "4px",
  alignItems: "center",
  justifyContent: "flex-start",
  textAlign: "center",
  position: "relative",
  minHeight: "100%"
}, props.isExpanded && {
  padding: "10px 9px 10px 9px",
  alignItems: "stretch",
  textAlign: "left"
}), {}, {
  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
    padding: "10px",
    height: "auto",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    width: "auto",
    zIndex: 0,
    position: "relative"
  }
})));
export const PanelControlTooltip = /*#__PURE__*/styled(Popover).withConfig({
  displayName: "PanelControlTooltip",
  componentId: "sc-y5tsj2-2"
})(["", ""], props => props.position === "absolute" && css({
  position: "absolute",
  right: themeGet("space.r")(props),
  top: themeGet("space.r")(props)
}));
export const PanelControl = /*#__PURE__*/styled("button").withConfig({
  displayName: "PanelControl",
  componentId: "sc-y5tsj2-3"
})(props => css({
  borderRadius: "50%",
  width: "20px",
  height: "20px",
  background: themeGet("colors.greyLighter")(props),
  color: themeGet("colors.greyDarker")(props),
  fontSize: "1.2rem",
  appearance: "none",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "pointer",
  border: "none",
  transition: themeGet("transition.transitionDefault")(props),
  "&:hover, &:focus": {
    outline: "none",
    backgroundColor: themeGet("colors.primaryLightest")(props)
  }
}));
export const ResizeHandle = /*#__PURE__*/styled("div").withConfig({
  displayName: "ResizeHandle",
  componentId: "sc-y5tsj2-4"
})(props => css({
  position: "absolute",
  right: "-8px",
  top: "0",
  bottom: "0",
  width: "13px",
  padding: "0 5px",
  backgroundClip: "content-box",
  height: "100%",
  zIndex: "13",
  cursor: "col-resize",
  backgroundColor: "transparent",
  transition: themeGet("transition.transitionDefault")(props),
  "&:hover": {
    backgroundColor: themeGet("colors.primaryLighter")(props),
    ".resize-icon": {
      backgroundColor: themeGet("colors.primaryLighter")(props),
      opacity: "1"
    }
  },
  "&:active": {
    backgroundColor: themeGet("colors.primaryLight")(props),
    ".resize-icon": {
      backgroundColor: themeGet("colors.primaryLight")(props)
    }
  },
  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
    right: "0",
    top: "-8px",
    left: "0",
    padding: "5px 0",
    bottom: "auto",
    width: "100%",
    height: "13px",
    cursor: "row-resize"
  }
}));
export const ToggleHandle = /*#__PURE__*/styled("button").withConfig({
  shouldForwardProp: filterIsExpandedProp,
  displayName: "ToggleHandle",
  componentId: "sc-y5tsj2-5"
})(props => css({
  position: "absolute",
  left: props.isExpanded ? "calc(".concat(SIDENAV_WIDTHS.EXPANDED, " - 8px)") : "calc(".concat(themeGet("appScale.sideNavSize")(props), " - 8px)"),
  top: "0",
  bottom: "0",
  width: "13px",
  padding: "0 5px",
  backgroundClip: "content-box",
  height: "100%",
  zIndex: "100",
  cursor: "col-resize",
  backgroundColor: "transparent",
  transition: "none",
  appearance: "none",
  fontFamily: themeGet("fonts.main")(props),
  border: "none",
  outline: "none",
  "&:hover": {
    backgroundColor: themeGet("colors.primaryLighter")(props),
    ".toggle-icon": {
      backgroundColor: themeGet("colors.primaryLighter")(props),
      opacity: "1"
    }
  },
  "&:active": {
    backgroundColor: themeGet("colors.primaryLight")(props),
    ".toggle-icon": {
      backgroundColor: themeGet("colors.primaryLight")(props)
    }
  }
}));
export const ToggleIcon = /*#__PURE__*/styled("div").withConfig({
  displayName: "ToggleIcon",
  componentId: "sc-y5tsj2-6"
})(props => css({
  position: "absolute",
  opacity: "0",
  top: "20px",
  left: "50%",
  height: "28px",
  width: "28px",
  backgroundColor: themeGet("colors.white")(props),
  borderRadius: "4px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  color: themeGet("colors.white")(props),
  fontSize: "12px",
  fontWeight: "bold",
  transform: "translateX(-50%)",
  transition: themeGet("transition.transitionDefault")(props),
  boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
  pointerEvents: "none",
  svg: {
    color: themeGet("colors.white")(props)
  },
  "&.resize-icon": {
    width: "28px",
    height: "28px",
    top: "20px",
    left: "50%",
    right: "auto",
    borderRadius: "4px",
    transform: "translateX(-50%)",
    boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
  },
  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
    "&.resize-icon": {
      left: "50%",
      top: "6px",
      flexDirection: "column",
      transform: "translate(-50%, -50%)",
      width: "93px",
      borderRadius: "0 0 2px 2px",
      height: "15px",
      "& > span": {
        height: "6px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }
    }
  }
}));
export const SideNavExpanded = /*#__PURE__*/styled("div").withConfig({
  displayName: "SideNavExpanded",
  componentId: "sc-y5tsj2-7"
})(props => css({
  position: "relative",
  backgroundColor: themeGet("colors.white")(props),
  display: props.active ? "block" : "none",
  width: props.width ? "".concat(props.width, "px") : "auto",
  minWidth: props.large ? "".concat(EXPANDED_SIZE.largeMin, "px") : "".concat(EXPANDED_SIZE.normalMin, "px"),
  maxWidth: props.large ? "".concat(EXPANDED_SIZE.largeMax, "px") : "".concat(EXPANDED_SIZE.normalMax, "px"),
  height: "inherit",
  // Always inherit height on desktop
  overflowX: "hidden",
  overflowY: "auto",
  padding: "10px 16px 16px 16px",
  borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
  zIndex: 1,
  "&:focus": {
    outline: "0"
  },
  ["@media screen and (max-width: ".concat(BREAKPOINTS.SMALL_SCREEN, "px)")]: {
    width: "100vw",
    minWidth: "initial",
    maxWidth: "initial",
    borderLeft: "none",
    borderTop: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
    borderBottom: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
    height: props.height ? "".concat(props.height, "px") : "auto",
    // Only apply height on mobile
    minHeight: props.large ? "".concat(EXPANDED_SIZE.largeMin, "px") : "".concat(EXPANDED_SIZE.normalMin, "px"),
    maxHeight: props.large ? "".concat(EXPANDED_SIZE.largeMax, "px") : "".concat(EXPANDED_SIZE.normalMax, "px"),
    zIndex: 1001,
    position: "absolute",
    bottom: "100%",
    left: "0",
    right: "0"
  }
}));