Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit815ca99

Browse files
committed
emotion:Sidebar
1 parentd05ea6c commit815ca99

File tree

1 file changed

+69
-62
lines changed

1 file changed

+69
-62
lines changed
Lines changed: 69 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,72 @@
1-
import{makeStyles}from"@mui/styles";
1+
import{css}from"@emotion/css";
2+
import{
3+
useTheme,
4+
typeCSSObject,
5+
typeInterpolation,
6+
typeTheme,
7+
}from"@emotion/react";
28
importScheduleIconfrom"@mui/icons-material/TimerOutlined";
39
importVariablesIconfrom"@mui/icons-material/CodeOutlined";
4-
import{Template}from"api/typesGenerated";
10+
importtype{Template}from"api/typesGenerated";
511
import{Stack}from"components/Stack/Stack";
6-
import{FC,ElementType,PropsWithChildren,ReactNode}from"react";
12+
import{
13+
typeFC,
14+
typeElementType,
15+
typePropsWithChildren,
16+
typeReactNode,
17+
}from"react";
718
import{Link,NavLink}from"react-router-dom";
8-
import{combineClasses}from"utils/combineClasses";
919
importGeneralIconfrom"@mui/icons-material/SettingsOutlined";
1020
importSecurityIconfrom"@mui/icons-material/LockOutlined";
1121
import{Avatar}from"components/Avatar/Avatar";
22+
import{combineClasses}from"utils/combineClasses";
1223

1324
constSidebarNavItem:FC<
1425
PropsWithChildren<{href:string;icon:ReactNode}>
1526
>=({ children, href, icon})=>{
16-
conststyles=useStyles();
27+
consttheme=useTheme();
28+
29+
constsidebarNavItemStyles=css`
30+
color: inherit;
31+
display: block;
32+
font-size:14px;
33+
text-decoration: none;
34+
padding:${theme.spacing(1.5,1.5,1.5,2)};
35+
border-radius:${theme.shape.borderRadius/2}px;
36+
transition: background-color0.15s ease-in-out;
37+
margin-bottom:1px;
38+
position: relative;
39+
40+
&:hover {
41+
background-color:${theme.palette.action.hover};
42+
}
43+
`;
44+
45+
constsidebarNavItemActiveStyles=css`
46+
background-color:${theme.palette.action.hover};
47+
48+
&:before {
49+
content:"";
50+
display: block;
51+
width:3px;
52+
height:100%;
53+
position: absolute;
54+
left:0;
55+
top:0;
56+
background-color:${theme.palette.secondary.dark};
57+
border-top-left-radius:${theme.shape.borderRadius}px;
58+
border-bottom-left-radius:${theme.shape.borderRadius}px;
59+
}
60+
`;
61+
1762
return(
1863
<NavLink
1964
end
2065
to={href}
2166
className={({ isActive})=>
2267
combineClasses([
23-
styles.sidebarNavItem,
24-
isActive ?styles.sidebarNavItemActive :undefined,
68+
sidebarNavItemStyles,
69+
isActive ?sidebarNavItemActiveStyles :undefined,
2570
])
2671
}
2772
>
@@ -36,28 +81,21 @@ const SidebarNavItem: FC<
3681
constSidebarNavItemIcon:React.FC<{icon:ElementType}>=({
3782
icon:Icon,
3883
})=>{
39-
conststyles=useStyles();
40-
return<IconclassName={styles.sidebarNavItemIcon}/>;
84+
return<Iconcss={styles.sidebarNavItemIcon}/>;
4185
};
4286

4387
exportconstSidebar:React.FC<{template:Template}>=({ template})=>{
44-
conststyles=useStyles();
45-
4688
return(
47-
<navclassName={styles.sidebar}>
48-
<Stack
49-
direction="row"
50-
alignItems="center"
51-
className={styles.templateInfo}
52-
>
89+
<navcss={styles.sidebar}>
90+
<Stackdirection="row"alignItems="center"css={styles.templateInfo}>
5391
<Avatarsrc={template.icon}variant="square"fitImage/>
54-
<Stackspacing={0}className={styles.templateData}>
55-
<LinkclassName={styles.name}to={`/templates/${template.name}`}>
92+
<Stackspacing={0}css={styles.templateData}>
93+
<Linkcss={styles.name}to={`/templates/${template.name}`}>
5694
{template.display_name!==""
5795
?template.display_name
5896
:template.name}
5997
</Link>
60-
<spanclassName={styles.secondary}>{template.name}</span>
98+
<spancss={styles.secondary}>{template.name}</span>
6199
</Stack>
62100
</Stack>
63101

@@ -86,65 +124,34 @@ export const Sidebar: React.FC<{ template: Template }> = ({ template }) => {
86124
);
87125
};
88126

89-
constuseStyles=makeStyles((theme)=>({
127+
conststyles={
90128
sidebar:{
91129
width:245,
92130
flexShrink:0,
93131
},
94-
sidebarNavItem:{
95-
color:"inherit",
96-
display:"block",
97-
fontSize:14,
98-
textDecoration:"none",
99-
padding:theme.spacing(1.5,1.5,1.5,2),
100-
borderRadius:theme.shape.borderRadius/2,
101-
transition:"background-color 0.15s ease-in-out",
102-
marginBottom:1,
103-
position:"relative",
104-
105-
"&:hover":{
106-
backgroundColor:theme.palette.action.hover,
107-
},
108-
},
109-
sidebarNavItemActive:{
110-
backgroundColor:theme.palette.action.hover,
111-
112-
"&:before":{
113-
content:'""',
114-
display:"block",
115-
width:3,
116-
height:"100%",
117-
position:"absolute",
118-
left:0,
119-
top:0,
120-
backgroundColor:theme.palette.secondary.dark,
121-
borderTopLeftRadius:theme.shape.borderRadius,
122-
borderBottomLeftRadius:theme.shape.borderRadius,
123-
},
124-
},
125-
sidebarNavItemIcon:{
132+
sidebarNavItemIcon:(theme)=>({
126133
width:theme.spacing(2),
127134
height:theme.spacing(2),
128-
},
129-
templateInfo:{
130-
...theme.typography.body2,
135+
}),
136+
templateInfo:(theme)=>({
137+
...(theme.typography.body2asCSSObject),
131138
marginBottom:theme.spacing(2),
132-
},
139+
}),
133140
templateData:{
134141
overflow:"hidden",
135142
},
136-
name:{
143+
name:(theme)=>({
137144
fontWeight:600,
138145
overflow:"hidden",
139146
textOverflow:"ellipsis",
140147
whiteSpace:"nowrap",
141148
color:theme.palette.text.primary,
142149
textDecoration:"none",
143-
},
144-
secondary:{
150+
}),
151+
secondary:(theme)=>({
145152
color:theme.palette.text.secondary,
146153
fontSize:12,
147154
overflow:"hidden",
148155
textOverflow:"ellipsis",
149-
},
150-
}));
156+
}),
157+
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp