@@ -4,73 +4,73 @@ import styled from "styled-components";
4
4
import { AppIcon } from "./AppIcon" ;
5
5
6
6
const Header = styled . div `
7
- display: flex;
8
- align-items: center;
9
- justify-content: space-between;
10
- padding: 16px;
11
- min-height: 48px ;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: space-between;
10
+ padding: 16px;
11
+ min-height: 62px ;
12
12
` ;
13
13
14
- const SidebarWrapper = styled . aside < { closed : boolean , isPhone : boolean } > `
15
- display: flex;
16
- flex-direction: column;
17
- z-index: 2;
18
- background: white;
19
- height: 100%;
20
- overflow-x: hidden;
21
- transition: width 125ms ease-in;
22
- ${ ( p ) => {
23
- if ( ! p . closed ) {
24
- return p . isPhone ? `width: 100vw;` : `width: 340px;`
25
- } else {
26
- return `width: 0px;`
27
- }
28
- } }
29
- box-shadow: ${ ( p ) => ( p . closed ? "" : "1px 0px 4px 1px #bbb" ) } ;
14
+ const SidebarWrapper = styled . aside < { closed : boolean ; isPhone : boolean } > `
15
+ display: flex;
16
+ flex-direction: column;
17
+ z-index: 2;
18
+ background: white;
19
+ height: 100%;
20
+ overflow-x: hidden;
21
+ transition: width 125ms ease-in;
22
+ ${ ( p ) => {
23
+ if ( ! p . closed ) {
24
+ return p . isPhone ? `width: 100vw;` : `width: 340px;` ;
25
+ } else {
26
+ return `width: 0px;` ;
27
+ }
28
+ } }
29
+ box-shadow: ${ ( p ) => ( p . closed ? "" : "1px 0px 4px 1px #bbb" ) } ;
30
30
` ;
31
31
32
32
export interface SidebarProps {
33
- open : boolean ;
34
- title : string ;
35
- searchBar ?: ReactNode ;
36
- isPhone : boolean ;
37
- onClose : ( ) => void ;
33
+ open : boolean ;
34
+ title : string ;
35
+ searchBar ?: ReactNode ;
36
+ isPhone : boolean ;
37
+ onClose : ( ) => void ;
38
38
}
39
39
40
40
export const Sidebar : FC < SidebarProps > = ( {
41
- children,
42
- title,
43
- searchBar,
44
- onClose,
45
- isPhone,
46
- open = false ,
47
- ...props
41
+ children,
42
+ title,
43
+ searchBar,
44
+ onClose,
45
+ isPhone,
46
+ open = false ,
47
+ ...props
48
48
} ) => {
49
- return (
50
- < SidebarWrapper closed = { ! open } isPhone = { isPhone } { ...props } >
51
- < Header >
52
- { searchBar }
53
- { title !== "" && (
54
- < >
55
- < Divider id = "divideSearchBar" />
56
- < Typography variant = "overline" > { title } </ Typography >
57
- </ >
58
- ) }
59
- { isPhone && open && (
60
- < IconButton
61
- style = { { width : "40px" , height : "40px" } }
62
- size = "small"
63
- onClick = { onClose }
64
- >
65
- < AppIcon name = "chevron-left" />
66
- </ IconButton >
67
- ) }
68
- </ Header >
49
+ return (
50
+ < SidebarWrapper closed = { ! open } isPhone = { isPhone } { ...props } >
51
+ < Header >
52
+ { searchBar }
53
+ { title !== "" && (
54
+ < >
55
+ < Divider id = "divideSearchBar" />
56
+ < Typography variant = "overline" > { title } </ Typography >
57
+ </ >
58
+ ) }
59
+ { isPhone && open && (
60
+ < IconButton
61
+ style = { { width : "40px" , height : "40px" } }
62
+ size = "small"
63
+ onClick = { onClose }
64
+ >
65
+ < AppIcon name = "chevron-left" />
66
+ </ IconButton >
67
+ ) }
68
+ </ Header >
69
69
70
- < Divider />
71
- { children }
72
- </ SidebarWrapper >
73
- ) ;
70
+ < Divider />
71
+ { children }
72
+ </ SidebarWrapper >
73
+ ) ;
74
74
} ;
75
75
76
76
export default Sidebar ;
0 commit comments