Skip to content

Commit 99d1ac5

Browse files
kattylucykattylucy
authored
Refactor menu (#2670)
* Refactor menu * Refactor menu * Refactor menu * Fix bugs and add to * Fix imports * Fix bugs and styling * Fix imports
1 parent da24627 commit 99d1ac5

26 files changed

Lines changed: 422 additions & 925 deletions

‎centrifuge-app/src/components/LayoutBase/BasePadding.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎centrifuge-app/src/components/LayoutBase/LayoutMain.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Stack, Text } from '@centrifuge/fabric'
2+
3+
export function LayoutMain({
4+
title,
5+
subtitle,
6+
children,
7+
}: {
8+
title: string
9+
subtitle?: string
10+
children: React.ReactNode
11+
}) {
12+
return (
13+
<Stack py={5} as="section" gap={3} pt={20} pb={20}>
14+
<Stack gap={4}>
15+
<Stack>
16+
<Text as="h1" variant="heading1">
17+
{title}
18+
</Text>
19+
{subtitle && (
20+
<Text as="p" variant="heading4">
21+
{subtitle}
22+
</Text>
23+
)}
24+
</Stack>
25+
{children}
26+
</Stack>
27+
</Stack>
28+
)
29+
}

‎centrifuge-app/src/components/LayoutBase/LayoutSection.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Box, BoxProps, Shelf, Stack, Text } from '@centrifuge/fabric'
22
import * as React from 'react'
3-
import { BasePadding } from './BasePadding'
43

54
type Props = {
65
title?: React.ReactNode
@@ -12,7 +11,7 @@ type Props = {
1211

1312
export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, gap = 2, ...boxProps }: Props) {
1413
return (
15-
<BasePadding as="section" gap={3} pt={20} pb={20} {...boxProps}>
14+
<Stack as="section" gap={3} pt={20} pb={20} {...boxProps}>
1615
{(title || titleAddition || subtitle || headerRight) && (
1716
<Shelf justifyContent="space-between" as="header" maxWidth="mainContent">
1817
<Stack>
@@ -40,6 +39,6 @@ export function LayoutSection({ title, titleAddition, subtitle, headerRight, chi
4039
<Stack gap={gap} maxWidth="mainContent">
4140
{children}
4241
</Stack>
43-
</BasePadding>
42+
</Stack>
4443
)
4544
}

‎centrifuge-app/src/components/LayoutBase/index.tsx‎

Lines changed: 110 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,123 @@
1-
import { WalletMenu } from '@centrifuge/centrifuge-react'
2-
import { Stack, Text } from '@centrifuge/fabric'
3-
import * as React from 'react'
4-
import { Outlet } from 'react-router'
1+
import { Box, Drawer, IconButton, IconHamburger, IconX } from '@centrifuge/fabric'
2+
import { useEffect, useState } from 'react'
3+
import { Outlet, useLocation } from 'react-router'
4+
import styled from 'styled-components'
55
import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
66
import { Footer } from '../Footer'
7-
import { LoadBoundary } from '../LoadBoundary'
87
import { LogoLink } from '../LogoLink-deprecated'
98
import { Menu } from '../Menu'
10-
import { BasePadding } from './BasePadding'
11-
import {
12-
ContentWrapper,
13-
FooterContainer,
14-
Inner,
15-
LogoContainer,
16-
MobileBar,
17-
Root,
18-
ToolbarContainer,
19-
WalletContainer,
20-
WalletInner,
21-
WalletPositioner,
22-
} from './styles'
239

24-
export function LayoutBase(): JSX.Element {
10+
const Sidebar = styled.aside`
11+
position: fixed;
12+
top: 0;
13+
left: 0;
14+
bottom: 0;
15+
background-color: ${({ theme }) => theme.colors.backgroundInverted};
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: space-between;
19+
padding: 1rem;
20+
width: 220px;
21+
`
22+
23+
const MobileHeader = styled.header`
24+
display: flex;
25+
justify-content: space-between;
26+
align-items: center;
27+
padding: 1rem;
28+
background-color: ${({ theme }) => theme.colors.backgroundInverted};
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
right: 0;
33+
z-index: 1100;
34+
`
35+
36+
const Content = styled.main`
37+
padding: 1rem;
38+
@media (min-width: ${({ theme }) => theme.breakpoints.L}) {
39+
margin-left: 220px;
40+
}
41+
@media (max-width: ${({ theme }) => theme.breakpoints.L}) and (min-width: ${({ theme }) => theme.breakpoints.M}) {
42+
margin-left: 0;
43+
padding-top: 60px;
44+
}
45+
@media (max-width: ${({ theme }) => theme.breakpoints.M}) {
46+
margin-left: 0;
47+
padding-top: 60px;
48+
}
49+
`
50+
51+
const SidebarMenu = () => (
52+
<>
53+
<Box>
54+
<LogoLink />
55+
<Menu />
56+
</Box>
57+
<Footer />
58+
</>
59+
)
60+
61+
const MobileMenuContent = () => (
62+
<>
63+
<Box>
64+
<Menu />
65+
</Box>
66+
<Footer />
67+
</>
68+
)
69+
70+
export const LayoutBase = () => {
71+
const location = useLocation()
72+
const isDesktop = useIsAboveBreakpoint('L')
2573
const isMedium = useIsAboveBreakpoint('M')
74+
75+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
76+
77+
// Close the mobile menu when the location changes
78+
useEffect(() => {
79+
setMobileMenuOpen(false)
80+
}, [location])
81+
2682
return (
27-
<Root>
28-
<WalletContainer>
29-
<WalletPositioner>
30-
<WalletInner>
31-
<WalletMenu />
32-
</WalletInner>
33-
</WalletPositioner>
34-
</WalletContainer>
35-
{isMedium ? (
36-
<Inner>
37-
<LogoContainer>
38-
<LogoLink />
39-
</LogoContainer>
40-
<ToolbarContainer as="aside">
41-
<Menu />
42-
</ToolbarContainer>
43-
<FooterContainer>
44-
<Footer />
45-
</FooterContainer>
46-
</Inner>
47-
) : (
48-
<>
49-
<LogoContainer>
83+
<>
84+
{isDesktop && (
85+
<Sidebar>
86+
<SidebarMenu />
87+
</Sidebar>
88+
)}
89+
90+
{!isDesktop && (
91+
<MobileHeader>
92+
<div>
5093
<LogoLink />
51-
</LogoContainer>
52-
<MobileBar>
53-
<ToolbarContainer as="aside">
54-
<Menu />
55-
</ToolbarContainer>
56-
</MobileBar>
57-
</>
94+
</div>
95+
<IconButton onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
96+
{mobileMenuOpen ? (
97+
<IconX color="white" size="iconLarge" />
98+
) : (
99+
<IconHamburger color="white" size="iconLarge" />
100+
)}
101+
</IconButton>
102+
</MobileHeader>
58103
)}
59-
{/* The ID functions so we can deactive scrolling in certain pages, example in the data page */}
60-
<ContentWrapper id="content-wrapper">
61-
<LoadBoundary>
62-
<Outlet />
63-
</LoadBoundary>
64-
</ContentWrapper>
65-
</Root>
66-
)
67-
}
68104

69-
export function LayoutMain({
70-
title,
71-
subtitle,
72-
children,
73-
}: {
74-
title: string
75-
subtitle?: string
76-
children: React.ReactNode
77-
}) {
78-
return (
79-
<BasePadding py={5}>
80-
<Stack gap={4}>
81-
<Stack>
82-
<Text as="h1" variant="heading1">
83-
{title}
84-
</Text>
85-
{subtitle && (
86-
<Text as="p" variant="heading4">
87-
{subtitle}
88-
</Text>
89-
)}
90-
</Stack>
105+
{!isDesktop && (
106+
<Drawer
107+
isOpen={mobileMenuOpen}
108+
onClose={() => setMobileMenuOpen(false)}
109+
title="Menu"
110+
backgroundColor="backgroundInverted"
111+
width={isMedium ? '400px' : '100%'}
112+
hideIcon
113+
>
114+
<MobileMenuContent />
115+
</Drawer>
116+
)}
91117

92-
{children}
93-
</Stack>
94-
</BasePadding>
118+
<Content>
119+
<Outlet />
120+
</Content>
121+
</>
95122
)
96123
}

0 commit comments

Comments
 (0)