mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
0b7382bd27
* add ENV for navigation layout type * add network menu to top bar * renaming and main component placeholder * add logo, testnet badge, login and connect wallet buttons to the nav bar * refactor once more * styles for nav link group * style nav link * style groupped nav links * update values for L2 review * update demo values * fix deployment values for L2 review * tests * fix prop collision * shorten filter input on marketplace page and update MainArea height * change margin between text and lightning label * add active state to "Other" nav menu * popover fixes * fix link width * [skip ci] update demo values
31 lines
695 B
TypeScript
31 lines
695 B
TypeScript
import { Flex, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const TOP_BAR_HEIGHT = 36;
|
|
const HORIZONTAL_NAV_BAR_HEIGHT = config.UI.navigation.layout === 'horizontal' ? 49 : 0;
|
|
|
|
const MainArea = ({ children, className }: Props) => {
|
|
return (
|
|
<Flex
|
|
className={ className }
|
|
w="100%"
|
|
minH={{
|
|
base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
|
|
lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,
|
|
}}
|
|
alignItems="stretch"
|
|
>
|
|
{ children }
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default React.memo(chakra(MainArea));
|