Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SPP 2143 Learning Through Connecting
ltc_website
Commits
37c1a856
Commit
37c1a856
authored
Mar 17, 2020
by
amarcic
Browse files
PageHeader: added Grid and aligned language button right
parent
cea87e61
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/PageHeader/PageHeader.jsx
View file @
37c1a856
import
React
from
'
react
'
;
import
{
useTranslation
}
from
'
react-i18next
'
;
import
{
Button
,
MenuList
,
MenuItem
,
Paper
}
from
'
@material-ui/core
'
;
import
{
Button
,
MenuList
,
MenuItem
,
Paper
,
Grid
}
from
'
@material-ui/core
'
;
import
TranslateIcon
from
'
@material-ui/icons/Translate
'
;
import
ClickAwayListener
from
'
@material-ui/core/ClickAwayListener
'
;
import
Grow
from
'
@material-ui/core/Grow
'
;
...
...
@@ -65,33 +65,44 @@ export const PageHeader = () => {
return
(
<
div
className
=
{
classes
.
root
}
>
<
Button
ref
=
{
anchorRef
}
aria
-
controls
=
{
open
?
'
menu-list-grow
'
:
undefined
}
aria
-
haspopup
=
"true"
onClick
=
{
handleToggle
}
>
<
TranslateIcon
/>
{
t
(
'
current language
'
)
}
</
Button
>
<
Popper
open
=
{
open
}
anchorEl
=
{
anchorRef
.
current
}
role
=
{
undefined
}
transition
disablePortal
>
{
({
TransitionProps
,
placement
})
=>
(
<
Grow
{
...
TransitionProps
}
style
=
{
{
transformOrigin
:
placement
===
'
top
'
?
'
left top
'
:
'
left bottom
'
}
}
<
Grid
container
direction
=
"row"
justify
=
"flex-end"
>
<
Grid
item
>
<
Paper
className
=
{
classes
.
paper
}
>
<
ClickAwayListener
onClickAway
=
{
handleClose
}
>
<
MenuList
autoFocusItem
=
{
open
}
id
=
"menu-list-grow"
onKeyDown
=
{
handleListKeyDown
}
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
de
'
)
}
>
Deutsch
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
en
'
)
}
>
English
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
fr
'
)
}
>
Français
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
ar
'
)
}
>
لعربية
</
MenuItem
>
</
MenuList
>
</
ClickAwayListener
>
</
Paper
>
</
Grow
>
)
}
</
Popper
>
<
Button
ref
=
{
anchorRef
}
aria
-
controls
=
{
open
?
'
menu-list-grow
'
:
undefined
}
aria
-
haspopup
=
"true"
onClick
=
{
handleToggle
}
>
<
TranslateIcon
/>
{
t
(
'
current language
'
)
}
</
Button
>
<
Popper
open
=
{
open
}
anchorEl
=
{
anchorRef
.
current
}
role
=
{
undefined
}
transition
disablePortal
>
{
({
TransitionProps
,
placement
})
=>
(
<
Grow
{
...
TransitionProps
}
style
=
{
{
transformOrigin
:
placement
===
'
top
'
?
'
left top
'
:
'
left bottom
'
}
}
>
<
Paper
className
=
{
classes
.
paper
}
>
<
ClickAwayListener
onClickAway
=
{
handleClose
}
>
<
MenuList
autoFocusItem
=
{
open
}
id
=
"menu-list-grow"
onKeyDown
=
{
handleListKeyDown
}
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
de
'
)
}
>
Deutsch
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
en
'
)
}
>
English
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
fr
'
)
}
>
Français
</
MenuItem
>
<
MenuItem
onClick
=
{
()
=>
handleLanguageChange
(
'
ar
'
)
}
>
لعربية
</
MenuItem
>
</
MenuList
>
</
ClickAwayListener
>
</
Paper
>
</
Grow
>
)
}
</
Popper
>
</
Grid
>
</
Grid
>
</
div
>
);
};
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment