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> </> ); }; |