@superdispatch/ui-lab 0.17.0 → 0.18.3

package/dist-types/index.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, ReactChild, MouseEvent, ReactElement } from 'react';
+import { ReactNode, ForwardRefExoticComponent, RefAttributes, Ref, AriaAttributes, MouseEventHandler, FocusEventHandler, HTMLAttributes, ComponentType, ReactElement, MouseEvent, Key, CSSProperties, ReactChild } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
-import { ButtonBaseProps, TooltipProps } from '@material-ui/core';
+import { ButtonBaseProps, AvatarProps, TooltipProps } from '@material-ui/core';
 import { FileRejection } from 'react-dropzone';
+import { StyledComponent, DefaultTheme } from 'styled-components';
 
 declare type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
 interface AlertProps {
@@ -117,6 +118,13 @@ interface AnchorButtonProps extends BaseButtonProps<HTMLAnchorElement> {
 }
 declare const AnchorButton: ForwardRefExoticComponent<AnchorButtonProps & RefAttributes<HTMLAnchorElement>>;
 
+declare type ContainerProps = HTMLAttributes<HTMLDivElement> & {
+    fullViewportHeight?: boolean;
+};
+declare const Container: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    fullViewportHeight?: boolean | undefined;
+} & RefAttributes<HTMLDivElement>>;
+
 interface DescriptionItemProps {
     id?: string;
     'aria-label'?: string;
@@ -155,6 +163,94 @@ interface FileListItemProps {
 }
 declare const FileListItem: ForwardRefExoticComponent<FileListItemProps & RefAttributes<HTMLDivElement>>;
 
+interface NavbarBottomBarItem {
+    active?: boolean;
+    value: string;
+    hasBadge?: boolean;
+    label: ReactNode;
+    icon: ReactNode;
+    onClick?: () => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+interface NavbarBottomBarProps {
+    items: NavbarBottomBarItem[];
+    hasMenuBadge?: boolean;
+}
+declare function NavbarBottomBar({ items, hasMenuBadge, }: NavbarBottomBarProps): ReactElement;
+
+declare const NavbarBadge: StyledComponent<"span", DefaultTheme, {}, never>;
+declare const NavbarLabel: StyledComponent<"span", DefaultTheme, {}, never>;
+interface NavbarItemProps {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+    label: ReactNode;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    ident?: number;
+    gutter?: boolean;
+    variant?: 'danger' | 'primary';
+}
+declare function NavbarItem({ label, gutter, badge, icon, component, onClick, variant, ident, }: NavbarItemProps): ReactElement;
+
+interface NavbarMenuItemProps {
+    icon?: ReactNode;
+    label: ReactNode;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    component?: ComponentType<HTMLAttributes<HTMLElement>>;
+}
+declare function NavbarMenuItem({ label, icon, onClick, component, }: NavbarMenuItemProps): ReactElement;
+interface NavbarItemOptions extends NavbarItemProps {
+    key: Key;
+    groupKey?: Key;
+    hide?: boolean;
+}
+interface NavbarListProps {
+    header: ReactNode;
+    items: NavbarItemOptions[];
+    footer?: ReactNode;
+}
+declare function NavbarList({ header, items, footer, }: NavbarListProps): ReactElement;
+
+interface NavbarProps {
+    containerStyle?: CSSProperties;
+    children: ReactNode;
+    header?: ReactNode;
+    items: NavbarItemOptions[];
+    bottomItems: NavbarBottomBarItem[];
+    footer?: ReactNode;
+    hasExtraBadge?: boolean;
+}
+declare function Navbar({ footer, items, header, bottomItems, children, containerStyle, hasExtraBadge, }: NavbarProps): ReactElement;
+
+interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
+    title: ReactNode;
+    subtitle: ReactNode;
+    children: ReactNode;
+}
+declare function NavbarAvatar({ title, subtitle, children, ...props }: NavbarAvatarProps): ReactElement;
+
+
+interface NavbarContextType {
+    isDrawerOpen: boolean;
+    isExpanded: boolean;
+    setIsExpanded: (value: boolean) => void;
+    setDrawerOpen: (value: boolean) => void;
+}
+declare function useNavbarContext(): NavbarContextType;
+
+interface NavbarMenuItemOption {
+    key: Key;
+    icon: ReactNode;
+    label: ReactNode;
+    visible?: boolean;
+    onClick: () => void;
+}
+interface NavbarMenuProps {
+    children: ReactNode;
+    items: NavbarMenuItemOption[];
+}
+declare function NavbarMenu({ items, children }: NavbarMenuProps): ReactElement;
+
 interface SidebarProps {
     id?: string;
     title?: ReactNode;
@@ -226,4 +322,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, MarginProp, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, MarginProp, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarContainer, SidebarContainerProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext };

package/dist-web/index.js

@@ -1,15 +1,16 @@
-import { CheckCircle, Info, Error, Image, Refresh, Delete, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error, Image, Refresh, Delete, Menu, MenuOpen, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
-import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue } from '@superdispatch/ui';
-import { forwardRef, useState, useEffect, Suspense, memo, useContext, createContext, useMemo, useRef, useLayoutEffect } from 'react';
+import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue } from '@superdispatch/ui';
+import { forwardRef, useState, useEffect, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
-import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, Divider, Checkbox, Avatar } from '@material-ui/core';
+import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Divider as Divider$1, Checkbox } from '@material-ui/core';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
+import { noop } from 'lodash';
 
 function colorMixin(textColor, backgroundColor, buttonHoverColor) {
   return css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
@@ -521,6 +522,45 @@ var AnchorButton = /*#__PURE__*/forwardRef((_ref5, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AnchorButton.displayName = "AnchorButton";
 
+var _excluded$3 = ["fullViewportHeight"];
+var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    fullViewportHeight
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  var nodeRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!fullViewportHeight) {
+      if (nodeRef.current) {
+        nodeRef.current.style.removeProperty('height');
+        nodeRef.current.style.removeProperty('--vh');
+      }
+
+      return;
+    }
+
+    function updateHeight() {
+      if (nodeRef.current) {
+        // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+        nodeRef.current.style.setProperty('height', 'calc(var(--vh, 1vh) * 100)');
+        nodeRef.current.style.setProperty('--vh', "".concat(window.innerHeight * 0.01, "px"));
+      }
+    }
+
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => {
+      window.removeEventListener('resize', updateHeight);
+    };
+  }, [fullViewportHeight]);
+  return /*#__PURE__*/jsx("div", _objectSpread({
+    ref: mergeRefs(ref, nodeRef)
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") Container.displayName = "Container";
+Container.displayName = 'Container';
+
 function mergeStyles(styles) {
   for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     sources[_key - 1] = arguments[_key];
@@ -546,7 +586,7 @@ function mergeStyles(styles) {
   return styles;
 }
 
-var _excluded$3 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
+var _excluded$4 = ["variant", "as", "align", "color", "display", "noWrap", "wrapOverflow"];
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
   primary: Color.Dark500,
@@ -648,7 +688,7 @@ var TextBox = /*#__PURE__*/forwardRef((_ref3, ref) => {
     noWrap = false,
     wrapOverflow = false
   } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$3);
+      props = _objectWithoutProperties(_ref3, _excluded$4);
 
   var $align = parseResponsiveProp(align);
   var $color = parseResponsiveProp(color);
@@ -729,7 +769,7 @@ var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";
 
-var _excluded$4 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+var _excluded$5 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -800,7 +840,7 @@ var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
     onDropRejected: _onDropRejected,
     onDropAccepted: _onDropAccepted
   } = props,
-      dropzoneProps = _objectWithoutProperties(props, _excluded$4);
+      dropzoneProps = _objectWithoutProperties(props, _excluded$5);
 
   return /*#__PURE__*/jsx(Suspense, {
     fallback: fallback,
@@ -965,6 +1005,432 @@ var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FileListItem.displayName = "FileListItem";
 
+var NavbarContext = /*#__PURE__*/createContext({
+  isDrawerOpen: false,
+  isExpanded: false,
+  setIsExpanded: noop,
+  setDrawerOpen: noop
+});
+function useNavbarContext() {
+  return useContext(NavbarContext);
+}
+
+var StyledBottomNavigation = /*#__PURE__*/styled(BottomNavigation).withConfig({
+  displayName: "NavbarBottomBar__StyledBottomNavigation",
+  componentId: "SD__sc-9z6v3k-0"
+})(["background:", ";"], Color.Dark500);
+var StyledBottomNavigationAction = /*#__PURE__*/styled(BottomNavigationAction).withConfig({
+  displayName: "NavbarBottomBar__StyledBottomNavigationAction",
+  componentId: "SD__sc-9z6v3k-1"
+})(["&&{background:#1b2638;color:", ";padding:6px 0 8px;line-height:20px;}&:first-child{padding-left:12px;}&:last-child{padding-right:12px;}&.Mui-selected{color:", ";.MuiBottomNavigationAction-label{font-size:0.75rem;}}"], Color.Silver500, Color.White);
+var IconWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarBottomBar__IconWrapper",
+  componentId: "SD__sc-9z6v3k-2"
+})(["position:relative;"]);
+var IconLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarBottomBar__IconLabel",
+  componentId: "SD__sc-9z6v3k-3"
+})(["display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:50%;color:", ";background:", ";position:absolute;top:0;right:0;width:8px;height:8px;"], Color.White, Color.Red300);
+function NavbarBottomBar(_ref) {
+  var {
+    items,
+    hasMenuBadge
+  } = _ref;
+  var {
+    isDrawerOpen,
+    setDrawerOpen
+  } = useNavbarContext();
+  var activeItem = useMemo(() => items.find(item => item.active), [items]);
+  return /*#__PURE__*/jsxs(StyledBottomNavigation, {
+    value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value,
+    showLabels: true,
+    onChange: (_event, newValue) => {
+      if (newValue) {
+        if (newValue === 'menu') {
+          setDrawerOpen(!isDrawerOpen);
+        } else {
+          setDrawerOpen(false);
+        }
+      }
+    },
+    children: [items.map(item => /*#__PURE__*/createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
+      key: item.value,
+      icon: item.hasBadge ? /*#__PURE__*/jsxs(IconWrapper, {
+        children: [/*#__PURE__*/jsx(IconLabel, {}), item.icon]
+      }) : item.icon
+    }))), /*#__PURE__*/jsx(StyledBottomNavigationAction, {
+      value: "menu",
+      label: "Menu",
+      icon: hasMenuBadge ? /*#__PURE__*/jsxs(IconWrapper, {
+        children: [/*#__PURE__*/jsx(IconLabel, {}), /*#__PURE__*/jsx(Menu, {
+          fontSize: "small"
+        })]
+      }) : /*#__PURE__*/jsx(Menu, {
+        fontSize: "small"
+      })
+    })]
+  });
+}
+
+var NavbarBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "NavbarItem__NavbarBadge",
+  componentId: "SD__sc-1pvzq3w-0"
+})(["flex-shrink:0;padding:4px 6px;min-width:20px;line-height:12px;font-size:12px;font-weight:400;border-radius:10px;text-align:center;background:#131c2a;&[data-variant='primary']{color:", ";background:", ";}&[data-variant='danger']{color:", ";background:", ";}"], Color.White, Color.Blue300, Color.White, Color.Red500);
+var NavbarLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "NavbarItem__NavbarLabel",
+  componentId: "SD__sc-1pvzq3w-1"
+})(["flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+var NavbarItemRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarItem__NavbarItemRoot",
+  componentId: "SD__sc-1pvzq3w-2"
+})(["width:100%;display:flex;align-items:center;color:#c2c4c9;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;outline:none;cursor:pointer;padding:8px 16px;border-left:4px solid transparent;&:hover,&[aria-current]{background-color:#2f394a;color:", ";border-left-color:", ";}"], Color.White, Color.Blue300);
+var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarItem__IconWrapper",
+  componentId: "SD__sc-1pvzq3w-3"
+})(["width:24px;margin-right:8px;& svg{font-size:24px;}"]);
+function NavbarItem(_ref) {
+  var {
+    label,
+    gutter,
+    badge,
+    icon,
+    component,
+    onClick,
+    variant,
+    ident = 0
+  } = _ref;
+  var uid = useUID();
+  return /*#__PURE__*/jsxs(NavbarItemRoot, {
+    as: component,
+    onClick: onClick,
+    "aria-labelledby": uid,
+    style: {
+      marginTop: gutter ? '16px' : '0',
+      paddingLeft: (ident + 1) * 20
+    },
+    children: [/*#__PURE__*/jsx(IconWrapper$1, {
+      children: icon
+    }), /*#__PURE__*/jsx(NavbarLabel, {
+      id: uid,
+      children: label
+    }), badge != null && /*#__PURE__*/jsx(NavbarBadge, {
+      "data-variant": variant,
+      children: badge
+    })]
+  });
+}
+
+var Header = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__Header",
+  componentId: "SD__sc-19zrmxc-0"
+})(["margin:0 16px 8px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;position:sticky;"]);
+var Wrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__Wrapper",
+  componentId: "SD__sc-19zrmxc-1"
+})(["display:flex;flex:1;flex-direction:column;overflow:hidden;padding-top:16px;background:#1b2638;transition:width 0.3s linear;height:100%;width:", ";&[data-expanded='true']{width:", ";}&[data-expanded='false']{width:", ";& > ", "{justify-content:center;}}"], _ref => {
+  var {
+    isMobile
+  } = _ref;
+  return isMobile ? '280px' : 'initial';
+}, _ref2 => {
+  var {
+    isMobile
+  } = _ref2;
+  return isMobile ? '280px' : '240px';
+}, _ref3 => {
+  var {
+    isMobile
+  } = _ref3;
+  return isMobile ? '280px' : '72px';
+}, Header);
+var ExpandIconButton = /*#__PURE__*/styled(IconButton).withConfig({
+  displayName: "NavbarList__ExpandIconButton",
+  componentId: "SD__sc-19zrmxc-2"
+})(["color:", ";&&:focus{background-color:inherit;}"], Color.Silver500);
+var Footer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__Footer",
+  componentId: "SD__sc-19zrmxc-3"
+})(["flex-grow:1;display:flex;align-items:flex-end;margin:16px 0 8px;position:sticky;"]);
+var Root = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__Root",
+  componentId: "SD__sc-19zrmxc-4"
+})(["color:inherit;background-color:unset;border-left:unset;font-size:14px;font-weight:400;line-height:20px;text-decoration:none;padding:8px 16px;svg{font-size:24px;color:", ";}"], Color.Dark100);
+function NavbarMenuItem(_ref4) {
+  var {
+    label,
+    icon,
+    onClick,
+    component
+  } = _ref4;
+  return /*#__PURE__*/jsx(Root, {
+    as: component,
+    onClick: onClick,
+    children: /*#__PURE__*/jsxs(Inline, {
+      space: "xsmall",
+      verticalAlign: "center",
+      children: [icon, /*#__PURE__*/jsx(NavbarLabel, {
+        children: label
+      })]
+    })
+  });
+}
+var Content = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarList__Content",
+  componentId: "SD__sc-19zrmxc-5"
+})(["height:100%;min-height:50px;overflow:scroll;&[aria-expanded='false']{", ",", "{visibility:hidden;}}"], NavbarBadge, NavbarLabel);
+function NavbarList(_ref5) {
+  var {
+    header,
+    items,
+    footer
+  } = _ref5;
+  var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
+  var isMobile = platform === 'mobile';
+  var {
+    isExpanded,
+    isDrawerOpen,
+    setDrawerOpen,
+    setIsExpanded
+  } = useNavbarContext();
+  var isSidebarOpened = isMobile ? isDrawerOpen : isExpanded;
+  var filteredItems = useMemo(() => items.filter(item => {
+    return !item.hide && (isSidebarOpened || !!item.icon);
+  }).map(item => _objectSpread(_objectSpread({}, item), {}, {
+    menuGroupKey: item.groupKey
+  })), [items, isSidebarOpened]);
+  return /*#__PURE__*/jsxs(Wrapper, {
+    isMobile: isMobile,
+    "data-expanded": isSidebarOpened,
+    children: [/*#__PURE__*/jsxs(Header, {
+      children: [isSidebarOpened && header, !isMobile && /*#__PURE__*/jsx(ExpandIconButton, {
+        disableRipple: true,
+        style: isExpanded ? {
+          paddingRight: 0
+        } : {},
+        onClick: () => {
+          setIsExpanded(!isExpanded);
+        },
+        children: isExpanded ? /*#__PURE__*/jsx(MenuOpen, {}) : /*#__PURE__*/jsx(Menu, {})
+      })]
+    }), /*#__PURE__*/jsx(Content, {
+      "aria-expanded": isSidebarOpened,
+      children: filteredItems.map(item => {
+        var index = filteredItems.indexOf(item);
+        var prev = filteredItems[index - 1];
+        return /*#__PURE__*/createElement(NavbarItem, _objectSpread(_objectSpread({}, item), {}, {
+          key: item.key,
+          gutter: prev && prev.groupKey !== item.groupKey,
+          onClick: event => {
+            var _item$onClick;
+
+            (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
+
+            if (!event.isDefaultPrevented()) {
+              setDrawerOpen(false);
+            }
+          }
+        }));
+      })
+    }), /*#__PURE__*/jsx(Footer, {
+      children: footer
+    })]
+  });
+}
+
+var Aside = /*#__PURE__*/styled.aside.withConfig({
+  displayName: "Navbar__Aside",
+  componentId: "SD__sc-1oiqig8-0"
+})(["display:flex;flex-direction:column;overflow:auto;"]);
+var Main = /*#__PURE__*/styled.main.withConfig({
+  displayName: "Navbar__Main",
+  componentId: "SD__sc-1oiqig8-1"
+})(["flex:1;display:flex;flex-direction:column;overflow:scroll;"]);
+function Navbar(_ref) {
+  var {
+    footer,
+    items,
+    header,
+    bottomItems,
+    children,
+    containerStyle,
+    hasExtraBadge
+  } = _ref;
+  var theme = useTheme();
+  var [isDrawerOpen, setDrawerOpen] = useState(false);
+  var platform = useResponsiveValue('mobile', 'tablet', 'desktop');
+  var isMobile = platform === 'mobile';
+  var matches = useMediaQuery(theme.breakpoints.up('md'), {
+    noSsr: true
+  });
+  var [isExpanded, setIsExpanded] = useState(matches);
+  var hasBadge = hasExtraBadge || items.some(item => item.badge);
+  var ctx = useMemo(() => ({
+    isDrawerOpen,
+    isExpanded,
+    setIsExpanded,
+    setDrawerOpen
+  }), [isDrawerOpen, isExpanded, setIsExpanded, setDrawerOpen]);
+  return /*#__PURE__*/jsx(NavbarContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/jsxs("div", {
+      style: _objectSpread({
+        display: 'flex',
+        height: '100%',
+        flexDirection: isMobile ? 'column' : 'row'
+      }, containerStyle),
+      children: [!isMobile && /*#__PURE__*/jsx(Aside, {
+        children: /*#__PURE__*/jsx(NavbarList, {
+          header: header,
+          items: items,
+          footer: footer
+        })
+      }), /*#__PURE__*/jsx(Main, {
+        children: children
+      }), isMobile && /*#__PURE__*/jsx(NavbarBottomBar, {
+        items: bottomItems,
+        hasMenuBadge: hasBadge
+      }), /*#__PURE__*/jsx(Drawer, {
+        open: isDrawerOpen,
+        anchor: "right",
+        onClose: () => {
+          setDrawerOpen(false);
+        },
+        PaperProps: {
+          style: {
+            width: '280px',
+            minWidth: '280px'
+          }
+        },
+        children: /*#__PURE__*/jsx(NavbarList, {
+          header: header,
+          items: items,
+          footer: footer
+        })
+      })]
+    })
+  });
+}
+
+var _excluded$6 = ["title", "subtitle", "children"];
+var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
+  displayName: "NavbarAvatar__StyledTypography",
+  componentId: "SD__sc-19q2zd0-0"
+})(["color:", ";text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&:hover{color:", ";}"], Color.Silver500, Color.White);
+function NavbarAvatar(_ref) {
+  var {
+    title,
+    subtitle,
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  var {
+    isExpanded,
+    isDrawerOpen
+  } = useNavbarContext();
+
+  if (isExpanded || isDrawerOpen) {
+    return /*#__PURE__*/jsxs(Columns, {
+      space: "xsmall",
+      align: "center",
+      children: [/*#__PURE__*/jsx(Column, {
+        width: "content",
+        children: /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+          children: children
+        }))
+      }), /*#__PURE__*/jsx(Column, {
+        children: /*#__PURE__*/jsxs(Stack, {
+          space: "none",
+          children: [/*#__PURE__*/jsx(StyledTypography, {
+            variant: "caption",
+            children: title
+          }), /*#__PURE__*/jsx(StyledTypography, {
+            variant: "caption",
+            children: subtitle
+          })]
+        })
+      })]
+    });
+  }
+
+  return /*#__PURE__*/jsx(Avatar, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+}
+
+var Divider = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarMenu__Divider",
+  componentId: "SD__sc-1c8icpt-0"
+})(["border-bottom:1px solid ", ";margin:8px -16px;"], Color.Silver400);
+var StyledMenuItem = /*#__PURE__*/styled(MenuItem).withConfig({
+  displayName: "NavbarMenu__StyledMenuItem",
+  componentId: "SD__sc-1c8icpt-1"
+})(["& svg{font-size:24px;color:", ";}"], Color.Dark100);
+var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "NavbarMenu__Wrapper",
+  componentId: "SD__sc-1c8icpt-2"
+})(["width:100%;padding:8px 16px;cursor:pointer;background:", ";border-left:4px solid ", ";&:hover{border-left-color:", ";background:", ";}"], Color.Dark400, _ref => {
+  var {
+    active
+  } = _ref;
+  return active ? Color.Blue300 : 'transparent';
+}, Color.Blue300, Color.Dark400);
+function NavbarMenu(_ref2) {
+  var {
+    items,
+    children
+  } = _ref2;
+  var {
+    setDrawerOpen
+  } = useNavbarContext();
+  var [anchor, setAnchor] = useState(null);
+
+  function showProfileMenu(event) {
+    setAnchor(event.currentTarget);
+  }
+
+  function hideProfileMenu() {
+    setAnchor(null);
+    setDrawerOpen(false);
+  }
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Wrapper$1, {
+      onClick: showProfileMenu,
+      active: !!anchor,
+      children: children
+    }), /*#__PURE__*/jsx(Menu$1, {
+      open: !!anchor,
+      anchorEl: anchor,
+      onClose: hideProfileMenu,
+      onClick: hideProfileMenu,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      children: items.filter(item => item.visible !== false).flatMap((item, index, arr) => {
+        return [/*#__PURE__*/jsx(StyledMenuItem, {
+          onClick: item.onClick,
+          children: /*#__PURE__*/jsxs(Inline, {
+            space: "small",
+            verticalAlign: "center",
+            children: [item.icon, /*#__PURE__*/jsx(Typography, {
+              style: {
+                color: Color.Dark500
+              },
+              children: item.label
+            })]
+          })
+        }, item.key), index !== arr.length - 1 && /*#__PURE__*/jsx(Divider, {}, "".concat(item.key, "-divider"))];
+      })
+    })]
+  });
+}
+
 var SidebarRoot = /*#__PURE__*/styled.aside.withConfig({
   displayName: "Sidebar__SidebarRoot",
   componentId: "SD__sc-b77o22-0"
@@ -1049,7 +1515,7 @@ var SidebarDividerRoot = /*#__PURE__*/styled.div.withConfig({
 var SidebarDivider = /*#__PURE__*/forwardRef((_, ref) => {
   return /*#__PURE__*/jsx(SidebarDividerRoot, {
     ref: ref,
-    children: /*#__PURE__*/jsx(Divider, {})
+    children: /*#__PURE__*/jsx(Divider$1, {})
   });
 });
 if (process.env.NODE_ENV !== "production") SidebarDivider.displayName = "SidebarDivider";
@@ -1287,5 +1753,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, DescriptionItem, FileDropZone, FileListItem, Sidebar, SidebarContainer, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Container, DescriptionItem, FileDropZone, FileListItem, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarContainer, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext };
 //# sourceMappingURL=index.js.map