All files / src/components/layouts/Global GlobalLayout.tsx

100% Statements 5/5
37.5% Branches 3/8
100% Functions 1/1
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65            1x                                                             1x 1x 1x 1x                                                
import * as React from "react";
import { Box, Flex } from "rimble-ui";
import { createGlobalStyle } from "styled-components";
import { Nav } from "./Nav";
import { colors, fonts } from "../../../themes";
 
export const GlobalStyle = createGlobalStyle`
  html {
    box-sizing: border-box;
  }
  body {
    background-color: #F6F6FE;
    font-family: ${fonts.sansSerif};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
  }
  *, :after, :before {
    box-sizing: inherit;
  }
`;
 
export interface BannerTypes {
  content: React.ReactNode;
  color?: string;
  hide?: boolean;
}
 
export interface GlobalLayoutProps {
  banner?: BannerTypes;
  hasPermissions: boolean;
  section: string;
  url: string;
  sidebarBottomContents?: React.ReactNode;
  sidebarTopContents?: React.ReactNode;
}
 
export const GlobalLayout: React.FunctionComponent<GlobalLayoutProps> = (props) => {
  const showBanner = props.banner && !props.banner.hide;
  const top = showBanner ? "86px" : 5;
  return (
    <>
      {showBanner && (
        <Box bg={props.banner?.color || colors.primary.base} p={3} position="fixed" width="100%">
          <Flex alignItems="center" justifyContent="center">
            {props.banner?.content}
          </Flex>
        </Box>
      )}
      <Box p={5} height="100vh" pt={top}>
        <Flex bottom={4} flexDirection="column" justifyContent="space-between" position="fixed" top={top} width="232px">
          <Box>
            {props.sidebarTopContents}
            <Nav currentUrl={props.url} hasPermissions={props.hasPermissions} currentSection={props.section} />
          </Box>
          <Box>{props.sidebarBottomContents}</Box>
        </Flex>
        <Flex flexDirection="column" minHeight="calc(100vh - 64px)" flexGrow="1" ml={8}>
          {props.children}
        </Flex>
      </Box>
    </>
  );
};