@fluent-windows/core/es/Navigation/Navigation.styled.js

React components that inspired by Microsoft's Fluent Design System.

const root = theme => ({
  horizontal
}) => ({
  display: 'flex',
  justifyContent: 'space-between',
  transition: theme.transitions.navigation,
  overflow: 'hidden',
  // horizontal false
  flexDirection: 'column',
  // expanded false
  maxWidth: horizontal ? '' : 44
});

const horizontal = {
  maxHeight: 40,
  flexDirection: 'row !important'
};

const expanded = ({
  horizontal
}) => ({
  maxWidth: horizontal ? '' : 260
});

const header = {
  display: 'flex',
  // horizontal false
  flexDirection: 'column'
};
const headerHorizontal = {
  flexDirection: 'row'
};
const footer = {
  display: 'flex',
  // horizontal false
  flexDirection: 'column'
};
const footerHorizontal = {
  flexDirection: 'row'
};
const content = {
  display: 'flex',
  flex: 1,
  // horizontal false
  flexDirection: 'column',
  overflowX: 'hidden',
  overflowY: 'auto'
};
const contentHorizontal = {
  flexDirection: 'row',
  overflow: 'hidden'
};
export const styles = theme => ({
  root: root(theme),
  horizontal,
  expanded,
  header,
  headerHorizontal,
  footer,
  footerHorizontal,
  content,
  contentHorizontal
});