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

Commitb7b21f9

Browse files
committed
Add projects link to the top nav
Partially addresses#701.
1 parentc0a9eac commitb7b21f9

File tree

1 file changed

+63
-20
lines changed

1 file changed

+63
-20
lines changed
Lines changed: 63 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
importButtonfrom"@material-ui/core/Button"
2-
import{makeStyles}from"@material-ui/core/styles"
2+
importListfrom"@material-ui/core/List"
3+
importListItemfrom"@material-ui/core/ListItem"
4+
import{fade,makeStyles}from"@material-ui/core/styles"
35
importReactfrom"react"
4-
import{Link}from"react-router-dom"
6+
import{NavLink}from"react-router-dom"
57
import{UserResponse}from"../../api/types"
68
import{Logo}from"../Icons"
79
import{UserDropdown}from"./UserDropdown"
@@ -14,29 +16,34 @@ export interface NavbarViewProps {
1416
exportconstNavbarView:React.FC<NavbarViewProps>=({ user, onSignOut})=>{
1517
conststyles=useStyles()
1618
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>
19+
<navclassName={styles.root}>
20+
<ListclassName={styles.fixed}>
21+
<ListItemclassName={styles.item}>
22+
<NavLinkclassName={styles.logo}to="/">
23+
<Logofill="white"opacity={1}width={125}/>
24+
</NavLink>
25+
</ListItem>
26+
<ListItembuttonclassName={styles.item}>
27+
<NavLinkclassName={styles.link}to="/projects">
28+
Projects
29+
</NavLink>
30+
</ListItem>
31+
</List>
2532
<divclassName={styles.fullWidth}/>
2633
<divclassName={styles.fixed}>{user&&<UserDropdownuser={user}onSignOut={onSignOut}/>}</div>
27-
</div>
34+
</nav>
2835
)
2936
}
3037

3138
constuseStyles=makeStyles((theme)=>({
3239
root:{
3340
position:"relative",
3441
display:"flex",
35-
flex:"0",
42+
flex:0,
3643
flexDirection:"row",
3744
justifyContent:"center",
3845
alignItems:"center",
39-
height:"56px",
46+
height:56,
4047
background:theme.palette.navbar.main,
4148
marginTop:0,
4249
transition:"margin 150ms ease",
@@ -46,24 +53,60 @@ const useStyles = makeStyles((theme) => ({
4653
borderBottom:`1px solid #383838`,
4754
},
4855
fixed:{
49-
flex:"0",
56+
flex:0,
57+
display:"flex",
58+
padding:0,
5059
},
5160
fullWidth:{
52-
flex:"1",
61+
flex:1,
5362
},
5463
logo:{
55-
flex:"0",
56-
height:"56px",
64+
alignItems:"center",
65+
display:"flex",
66+
height:56,
5767
paddingLeft:theme.spacing(4),
5868
paddingRight:theme.spacing(2),
59-
borderRadius:0,
6069
"& svg":{
61-
display:"block",
6270
width:125,
6371
},
6472
},
6573
title:{
66-
flex:"1",
74+
flex:1,
6775
textAlign:"center",
6876
},
77+
item:{
78+
padding:0,
79+
},
80+
link:{
81+
alignItems:"center",
82+
color:"#A7A7A7",
83+
display:"flex",
84+
fontSize:16,
85+
height:56,
86+
padding:`0${theme.spacing(3)}px`,
87+
textDecoration:"none",
88+
transition:"background-color 0.3s ease",
89+
90+
"&:hover":{
91+
backgroundColor:fade(theme.palette.primary.light,0.1),
92+
},
93+
94+
// NavLink adds this class when the current route matches.
95+
"&.active":{
96+
position:"relative",
97+
color:theme.palette.primary.contrastText,
98+
99+
"&::before":{
100+
content:`"{"`,
101+
left:10,
102+
position:"absolute",
103+
},
104+
105+
"&::after":{
106+
content:`"}"`,
107+
position:"absolute",
108+
right:10,
109+
},
110+
},
111+
},
69112
}))

0 commit comments

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