y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

select menu in static postition

Browse Source
This commit is contained in:
wrzesinski-hubert 2020-12-03 23:46:45 +01:00
parent 08e9f84521
commit 7d5c3ba2b9
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/SelectMenu.tsx
View File

@ -8,8 +8,8 @@ const Wrapper = styled.div`
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
width: 10%;
margin-top: 15px; margin-top: 15px;
min-width:130px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background-color: #f1f2f5; background-color: #f1f2f5;
color: black; color: black;
@ -26,7 +26,9 @@ const Wrapper = styled.div`
`; `;
const Header = styled.div` const Header = styled.div`
display: flex; display: flex;
width:100%;
align-items: center; align-items: center;
justify-content: space-between;
`; `;
const HeaderTitle = styled.div` const HeaderTitle = styled.div`
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -34,19 +36,29 @@ const HeaderTitle = styled.div`
font-weight: 400; font-weight: 400;
`; `;
const List = styled.ul` const List = styled.ul`
position: absolute;
top: 50px;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: -15px;
background-color: #f2f4f7; background-color: #f2f4f7;
`; `;
const ListItem = styled.li` const ListItem = styled.li`
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 16px; font-size: 16px;
user-select: none; user-select: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 37px;
font-weight: 400; font-weight: 400;
:hover { :hover {
background-color: #eceef4; background-color: #eceef4;
} }
:first-child{
margin-top:10px;
}
`; `;
const ExpandIconSelect = styled(ExpandIcon)` const ExpandIconSelect = styled(ExpandIcon)`
width: 10px; width: 10px;
@ -76,6 +88,7 @@ export const SelectMenu = () => {
<ListItem <ListItem
onClick={() => { onClick={() => {
setSelectedOption('przedmioty'); setSelectedOption('przedmioty');
setIsOpen(false);
}} }}
> >
przedmioty przedmioty
@ -83,6 +96,7 @@ export const SelectMenu = () => {
<ListItem <ListItem
onClick={() => { onClick={() => {
setSelectedOption('studenci'); setSelectedOption('studenci');
setIsOpen(false);
}} }}
> >
studenci studenci