Skip to content

Commit df73a13

Browse files
committed
fix: edit min height for sidebar
1 parent a4ca602 commit df73a13

File tree

1 file changed

+57
-57
lines changed

1 file changed

+57
-57
lines changed

src/components/Sidebar.tsx

+57-57
Original file line numberDiff line numberDiff line change
@@ -4,73 +4,73 @@ import styled from "styled-components";
44
import { AppIcon } from "./AppIcon";
55

66
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;
1212
`;
1313

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")};
3030
`;
3131

3232
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;
3838
}
3939

4040
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
4848
}) => {
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>
6969

70-
<Divider />
71-
{children}
72-
</SidebarWrapper>
73-
);
70+
<Divider />
71+
{children}
72+
</SidebarWrapper>
73+
);
7474
};
7575

7676
export default Sidebar;

0 commit comments

Comments
 (0)