Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F73592264
MenuAppBar.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Mon, Jul 22, 23:37
Size
4 KB
Mime Type
text/x-java
Expires
Wed, Jul 24, 23:37 (1 d, 22 h)
Engine
blob
Format
Raw Data
Handle
19230199
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
MenuAppBar.js
View Options
import
React
from
'react'
;
import
{
makeStyles
}
from
'@material-ui/core/styles'
;
import
AppBar
from
'@material-ui/core/AppBar'
;
import
Toolbar
from
'@material-ui/core/Toolbar'
;
import
Typography
from
'@material-ui/core/Typography'
;
import
IconButton
from
'@material-ui/core/IconButton'
;
import
MenuIcon
from
'@material-ui/icons/Menu'
;
import
AccountCircle
from
'@material-ui/icons/AccountCircle'
;
import
Switch
from
'@material-ui/core/Switch'
;
import
FormControlLabel
from
'@material-ui/core/FormControlLabel'
;
import
FormGroup
from
'@material-ui/core/FormGroup'
;
import
MenuItem
from
'@material-ui/core/MenuItem'
;
import
Menu
from
'@material-ui/core/Menu'
;
import
{
Link
}
from
"react-router-dom"
import
"./header.css"
import
Logo
from
'./logo.svg'
import
Container
from
'@material-ui/core/Container'
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
root
:
{
flexGrow
:
1
,
},
menuButton
:
{
marginRight
:
theme
.
spacing
(
2
),
},
title
:
{
flexGrow
:
1
,
},
}));
export
default
function
MenuAppBar
()
{
const
classes
=
useStyles
();
const
[
auth
,
setAuth
]
=
React
.
useState
(
false
);
const
[
anchorEl
,
setAnchorEl
]
=
React
.
useState
(
null
);
const
open
=
Boolean
(
anchorEl
);
const
handleChange
=
(
event
)
=>
{
setAuth
(
event
.
target
.
checked
);
};
const
handleMenu
=
(
event
)
=>
{
setAnchorEl
(
event
.
currentTarget
);
};
const
handleClose
=
()
=>
{
setAnchorEl
(
null
);
};
return
(
<
div
className
=
{
classes
.
root
}
>
<
Container
maxWidth
=
"xl"
>
<
FormGroup
>
{
/* <FormControlLabel
control={<Switch checked={auth} onChange={handleChange} aria-label="login switch" />}
label={auth ? 'Logout' : 'Login'}
/> */
}
<
/FormGroup>
<
AppBar
className
=
"App-header"
color
=
"inherit"
position
=
"static"
>
<
Toolbar
>
<
IconButton
aria
-
controls
=
"simple-menu"
aria
-
haspopup
=
"true"
edge
=
"start"
className
=
{
classes
.
menuButton
}
color
=
"inherit"
aria
-
label
=
"menu"
onClick
=
{
handleMenu
}
>
<
MenuIcon
/>
<
/IconButton>
<
Menu
id
=
"simple-menu"
anchorEl
=
{
anchorEl
}
keepMounted
open
=
{
Boolean
(
anchorEl
)}
onClose
=
{
handleClose
}
>
<
MenuItem
component
=
{
Link
}
to
=
{
'/'
}
onClick
=
{
handleClose
}
>
Check
Tool
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/api"
}
onClick
=
{
handleClose
}
>
API
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/login"
}
onClick
=
{
handleClose
}
>
Login
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/help"
}
onClick
=
{
handleClose
}
>
Help
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/about"
}
onClick
=
{
handleClose
}
>
About
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/docs/frontend"
}
onClick
=
{
handleClose
}
>
Front
-
end
Documentation
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/docs/backend"
}
onClick
=
{
handleClose
}
>
Back
-
end
Documentation
<
/MenuItem>
<
MenuItem
component
=
{
Link
}
to
=
{
"/docs/api"
}
onClick
=
{
handleClose
}
>
Open
API
Documentation
<
/MenuItem>
{
/* <MenuItem component= {Link} to={":6060"} onClick={handleClose}>Documentation</MenuItem> */
}
<
/Menu>
<
Typography
variant
=
"title"
color
=
"inherit"
className
=
{
classes
.
title
}
>
<
Logo
/>
<
/Typography>
{
auth
&&
(
<
div
>
<
IconButton
aria
-
label
=
"account of current user"
aria
-
controls
=
"menu-appbar"
aria
-
haspopup
=
"true"
onClick
=
{
handleMenu
}
color
=
"inherit"
>
<
AccountCircle
/>
<
/IconButton>
<
Menu
id
=
"menu-appbar"
anchorEl
=
{
anchorEl
}
anchorOrigin
=
{{
vertical
:
'top'
,
horizontal
:
'right'
,
}}
keepMounted
transformOrigin
=
{{
vertical
:
'top'
,
horizontal
:
'right'
,
}}
open
=
{
open
}
onClose
=
{
handleClose
}
>
<
MenuItem
onClick
=
{
handleClose
}
>
Admin
<
/MenuItem>
<
MenuItem
onClick
=
{
handleClose
}
>
My
account
<
/MenuItem>
<
/Menu>
<
/div>
)}
<
/Toolbar>
<
/AppBar>
<
/Container>
<
/div>
);
}
Event Timeline
Log In to Comment