header: add menu dropdowns and auth-user special menu item

This commit is contained in:
Alice Gaudon 2020-08-30 21:02:37 +02:00
parent b136bdc64e
commit 4316daf241
1 changed files with 38 additions and 1 deletions

View File

@ -62,6 +62,7 @@ body {
} }
body > header { body > header {
z-index: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -101,6 +102,7 @@ body > header {
font-size: 20px; font-size: 20px;
li { li {
position: relative;
list-style: none; list-style: none;
a, button { a, button {
@ -140,6 +142,35 @@ body > header {
align-items: center; align-items: center;
padding: 0; padding: 0;
} }
&.auth-user {
img {
width: 48px;
height: 48px;
border-radius: 3px;
margin-right: 8px;
}
}
.dropdown {
position: absolute;
z-index: -1;
top: 100%;
right: 0;
display: none;
white-space: nowrap;
background: $headerBackground;
border-radius: 0 0 3px 3px;
a {
padding: 0 8px;
}
}
&:hover .dropdown {
display: block;
}
} }
} }
@ -177,7 +208,7 @@ body > header {
} }
} }
ul { > ul {
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
@ -200,6 +231,12 @@ body > header {
font-weight: inherit; font-weight: inherit;
} }
} }
.dropdown {
position: initial;
display: block;
padding-left: 32px;
}
} }
} }
} }