Skip to content

Commit 1606a7c

Browse files
aslilacaslilac
committed
emotion: Sidebar 
1 parent 48089a9 commit 1606a7c

File tree

1 file changed

+75
-68
lines changed

1 file changed

+75
-68
lines changed

‎site/src/pages/WorkspaceSettingsPage/Sidebar.tsx

Lines changed: 75 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1-
import { makeStyles } from "@mui/styles";
1+
import { css } from "@emotion/css";
2+
import {
3+
useTheme,
4+
type CSSObject,
5+
type Interpolation,
6+
type Theme,
7+
} from "@emotion/react";
28
import ScheduleIcon from "@mui/icons-material/TimerOutlined";
3-
import { Workspace } from "api/typesGenerated";
9+
import type { Workspace } from "api/typesGenerated";
410
import { Stack } from "components/Stack/Stack";
5-
import { FC, ElementType, PropsWithChildren, ReactNode } from "react";
11+
import {
12+
type FC,
13+
type ComponentType,
14+
type PropsWithChildren,
15+
type ReactNode,
16+
} from "react";
617
import { Link, NavLink } from "react-router-dom";
718
import { combineClasses } from "utils/combineClasses";
819
import GeneralIcon from "@mui/icons-material/SettingsOutlined";
@@ -12,16 +23,47 @@ import { Avatar } from "components/Avatar/Avatar";
1223
const SidebarNavItem: FC<
1324
PropsWithChildren<{ href: string; icon: ReactNode }>
1425
> = ({ children, href, icon }) => {
15-
const styles = useStyles();
26+
const theme = useTheme();
27+
28+
const linkStyles = css({
29+
color: "inherit",
30+
display: "block",
31+
fontSize: 14,
32+
textDecoration: "none",
33+
padding: theme.spacing(1.5, 1.5, 1.5, 2),
34+
borderRadius: theme.shape.borderRadius / 2,
35+
transition: "background-color 0.15s ease-in-out",
36+
marginBottom: 1,
37+
position: "relative",
38+
39+
"&:hover": {
40+
backgroundColor: theme.palette.action.hover,
41+
},
42+
});
43+
44+
const activeLinkStyles = css({
45+
backgroundColor: theme.palette.action.hover,
46+
47+
"&:before": {
48+
content: '""',
49+
display: "block",
50+
width: 3,
51+
height: "100%",
52+
position: "absolute",
53+
left: 0,
54+
top: 0,
55+
backgroundColor: theme.palette.secondary.dark,
56+
borderTopLeftRadius: theme.shape.borderRadius,
57+
borderBottomLeftRadius: theme.shape.borderRadius,
58+
},
59+
});
60+
1661
return (
1762
<NavLink
1863
end
1964
to={href}
2065
className={({ isActive }) =>
21-
combineClasses([
22-
styles.sidebarNavItem,
23-
isActive ? styles.sidebarNavItemActive : undefined,
24-
])
66+
combineClasses([linkStyles, isActive ? activeLinkStyles : undefined])
2567
}
2668
>
2769
<Stack alignItems="center" spacing={1.5} direction="row">
@@ -32,32 +74,32 @@ const SidebarNavItem: FC<
3274
);
3375
};
3476

35-
const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
36-
icon: Icon,
37-
}) => {
38-
const styles = useStyles();
39-
return <Icon className={styles.sidebarNavItemIcon} />;
77+
const SidebarNavItemIcon: FC<{
78+
icon: ComponentType<{ className?: string }>;
79+
}> = ({ icon: Icon }) => {
80+
return (
81+
<Icon
82+
css={(theme) => ({
83+
width: theme.spacing(2),
84+
height: theme.spacing(2),
85+
})}
86+
/>
87+
);
4088
};
4189

4290
export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
4391
username,
4492
workspace,
4593
}) => {
46-
const styles = useStyles();
47-
4894
return (
49-
<nav className={styles.sidebar}>
50-
<Stack
51-
direction="row"
52-
alignItems="center"
53-
className={styles.workspaceInfo}
54-
>
95+
<nav css={styles.sidebar}>
96+
<Stack direction="row" alignItems="center" css={styles.workspaceInfo}>
5597
<Avatar src={workspace.template_icon} variant="square" fitImage />
56-
<Stack spacing={0} className={styles.workspaceData}>
57-
<Link className={styles.name} to={`/@${username}/${workspace.name}`}>
98+
<Stack spacing={0} css={styles.workspaceData}>
99+
<Link css={styles.name} to={`/@${username}/${workspace.name}`}>
58100
{workspace.name}
59101
</Link>
60-
<span className={styles.secondary}>
102+
<span css={styles.secondary}>
61103
{workspace.template_display_name ?? workspace.template_name}
62104
</span>
63105
</Stack>
@@ -82,65 +124,30 @@ export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
82124
);
83125
};
84126

85-
const useStyles = makeStyles((theme) => ({
127+
const styles = {
86128
sidebar: {
87129
width: 245,
88130
flexShrink: 0,
89131
},
90-
sidebarNavItem: {
91-
color: "inherit",
92-
display: "block",
93-
fontSize: 14,
94-
textDecoration: "none",
95-
padding: theme.spacing(1.5, 1.5, 1.5, 2),
96-
borderRadius: theme.shape.borderRadius / 2,
97-
transition: "background-color 0.15s ease-in-out",
98-
marginBottom: 1,
99-
position: "relative",
100-
101-
"&:hover": {
102-
backgroundColor: theme.palette.action.hover,
103-
},
104-
},
105-
sidebarNavItemActive: {
106-
backgroundColor: theme.palette.action.hover,
107-
108-
"&:before": {
109-
content: '""',
110-
display: "block",
111-
width: 3,
112-
height: "100%",
113-
position: "absolute",
114-
left: 0,
115-
top: 0,
116-
backgroundColor: theme.palette.secondary.dark,
117-
borderTopLeftRadius: theme.shape.borderRadius,
118-
borderBottomLeftRadius: theme.shape.borderRadius,
119-
},
120-
},
121-
sidebarNavItemIcon: {
122-
width: theme.spacing(2),
123-
height: theme.spacing(2),
124-
},
125-
workspaceInfo: {
126-
...theme.typography.body2,
132+
workspaceInfo: (theme) => ({
133+
...(theme.typography.body2 as CSSObject),
127134
marginBottom: theme.spacing(2),
128-
},
135+
}),
129136
workspaceData: {
130137
overflow: "hidden",
131138
},
132-
name: {
139+
name: (theme) => ({
133140
fontWeight: 600,
134141
overflow: "hidden",
135142
textOverflow: "ellipsis",
136143
whiteSpace: "nowrap",
137144
color: theme.palette.text.primary,
138145
textDecoration: "none",
139-
},
140-
secondary: {
146+
}),
147+
secondary: (theme) => ({
141148
color: theme.palette.text.secondary,
142149
fontSize: 12,
143150
overflow: "hidden",
144151
textOverflow: "ellipsis",
145-
},
146-
}));
152+
}),
153+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)