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

Commitfe23dcd

Browse files
authored
feat: add top-level nav styles (#883)
Partially addresses#701.
1 parent8813788 commitfe23dcd

File tree

1 file changed

+63
-21
lines changed

1 file changed

+63
-21
lines changed
Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
importButtonfrom"@material-ui/core/Button"
2-
import{makeStyles}from"@material-ui/core/styles"
1+
importListfrom"@material-ui/core/List"
2+
importListItemfrom"@material-ui/core/ListItem"
3+
import{fade,makeStyles}from"@material-ui/core/styles"
34
importReactfrom"react"
4-
import{Link}from"react-router-dom"
5+
import{NavLink}from"react-router-dom"
56
import{UserResponse}from"../../api/types"
67
import{Logo}from"../Icons"
78
import{UserDropdown}from"./UserDropdown"
@@ -14,29 +15,34 @@ export interface NavbarViewProps {
1415
exportconstNavbarView:React.FC<NavbarViewProps>=({ user, onSignOut})=>{
1516
conststyles=useStyles()
1617
return(
17-
<divclassName={styles.root}>
18-
<divclassName={styles.fixed}>
19-
<Linkto="/">
20-
<ButtonclassName={styles.logo}variant="text">
21-
<Logofill="white"opacity={1}/>
22-
</Button>
23-
</Link>
24-
</div>
18+
<navclassName={styles.root}>
19+
<ListclassName={styles.fixed}>
20+
<ListItemclassName={styles.item}>
21+
<NavLinkclassName={styles.logo}to="/">
22+
<Logofill="white"opacity={1}width={125}/>
23+
</NavLink>
24+
</ListItem>
25+
<ListItembuttonclassName={styles.item}>
26+
<NavLinkclassName={styles.link}to="/templates">
27+
Templates
28+
</NavLink>
29+
</ListItem>
30+
</List>
2531
<divclassName={styles.fullWidth}/>
2632
<divclassName={styles.fixed}>{user&&<UserDropdownuser={user}onSignOut={onSignOut}/>}</div>
27-
</div>
33+
</nav>
2834
)
2935
}
3036

3137
constuseStyles=makeStyles((theme)=>({
3238
root:{
3339
position:"relative",
3440
display:"flex",
35-
flex:"0",
41+
flex:0,
3642
flexDirection:"row",
3743
justifyContent:"center",
3844
alignItems:"center",
39-
height:"56px",
45+
height:56,
4046
background:theme.palette.navbar.main,
4147
marginTop:0,
4248
transition:"margin 150ms ease",
@@ -46,24 +52,60 @@ const useStyles = makeStyles((theme) => ({
4652
borderBottom:`1px solid #383838`,
4753
},
4854
fixed:{
49-
flex:"0",
55+
flex:0,
56+
display:"flex",
57+
padding:0,
5058
},
5159
fullWidth:{
52-
flex:"1",
60+
flex:1,
5361
},
5462
logo:{
55-
flex:"0",
56-
height:"56px",
63+
alignItems:"center",
64+
display:"flex",
65+
height:56,
5766
paddingLeft:theme.spacing(4),
5867
paddingRight:theme.spacing(2),
59-
borderRadius:0,
6068
"& svg":{
61-
display:"block",
6269
width:125,
6370
},
6471
},
6572
title:{
66-
flex:"1",
73+
flex:1,
6774
textAlign:"center",
6875
},
76+
item:{
77+
padding:0,
78+
},
79+
link:{
80+
alignItems:"center",
81+
color:"#A7A7A7",
82+
display:"flex",
83+
fontSize:16,
84+
height:56,
85+
padding:`0${theme.spacing(3)}px`,
86+
textDecoration:"none",
87+
transition:"background-color 0.3s ease",
88+
89+
"&:hover":{
90+
backgroundColor:fade(theme.palette.primary.light,0.1),
91+
},
92+
93+
// NavLink adds this class when the current route matches.
94+
"&.active":{
95+
position:"relative",
96+
color:theme.palette.primary.contrastText,
97+
98+
"&::before":{
99+
content:`"{"`,
100+
left:10,
101+
position:"absolute",
102+
},
103+
104+
"&::after":{
105+
content:`"}"`,
106+
position:"absolute",
107+
right:10,
108+
},
109+
},
110+
},
69111
}))

0 commit comments

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