@@ -6,6 +6,7 @@ import Footer from './Footer';
66import useBreakpoints from 'lib/useBreakpoints';
77import MiniBackButton from './MiniBackButton';
88import { useHistory } from 'store/history';
9+import NavHeader from './NavHeader';
910
1011const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
1112
@@ -29,9 +30,32 @@ function View({
2930
3031 const goBack = useCallback(() => pop(), [pop]);
3132
33+ const goLogout = useCallback(() => pop(size - 1), [pop, size]);
34+
3235 const showBackButton = size > 1 && !!pop;
3336 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
3437
38+ const Header = useCallback(
39+ ({ logout }) => {
40+ return showBackButton ? (
41+ <Flex.Item
42+ as={Flex}
43+ className={cn(insetPadding, 'flex-row-r justify-between pb5')}>
44+ <Flex.Item
45+ onClick={goLogout}
46+ as="a"
47+ className="f5 gray4 underline mr2 pointer">
48+ Logout
49+ </Flex.Item>
50+ <Flex.Item as={NavHeader.Target} />
51+ </Flex.Item>
52+ ) : (
53+ <Flex.Item className={insetPadding} as={NavHeader.Target} />
54+ );
55+ },
56+ [insetPadding, showBackButton]
57+ );
58+
3559 return (
3660 <Flex
3761 row={!isMobile}
@@ -51,7 +75,7 @@ function View({
5175 col
5276 style={{ width: '48px' }}
5377 className={cn(insetPadding)}>
54− {showBackButton && (
78+ {showBackButton && !backIsLogout && (
5579 <MiniBackButton
5680 hpadding={!isMobile}
5781 vpadding={isMobile}
@@ -62,7 +86,10 @@ function View({
6286 </Flex.Item>
6387
6488 <Flex.Item flex={1} as={Flex} col justify="between">
65− <Flex.Item className={cn('pb5', insetPadding)}>{children}</Flex.Item>
89+ <Flex.Item className="pb5 ">
90+ <Header logout={goBack} />
91+ {children}
92+ </Flex.Item>
6693 <Flex.Item as={Footer.Target} />
6794 </Flex.Item>
6895