ReactJS

1
.menu {
2
    position: absolute;
3
    top: 17px;
4
    right: 15px;
5
    padding: 0;
6
}
7

8
.menuButton {
9
    width: 31px;
10
    height: 31px;
11
    display: flex;
12
    align-items: center;
13
    justify-content: center;
14
    transform: rotate(90deg);
15
    border-radius: 31px;
16
}
17
.menuButton:active {
18
    background-color: rgba(51, 51, 51, 0.1);
19
}
20

21
.dropdown {
22
    position: absolute;
23
    right: 0;
24
    top: 10px;
25
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
26
    border-radius: 3px;
27
    background-color: var(--white);
28
    z-index: 1;
29
}
30

31
.closeButton {
32
    background-color: var(--greyD9);
33
    padding: 12px 23px;
34
    border-radius: 0 0 3px 3px;
35
    width: 100%;
36
}
37

38
@media all and (min-width: 1024px) {
39
    .menu {
40
        position: relative;
41
        order: 2;
42
        display: flex;
43
        align-items: center;
44
        flex: 0 0;
45
        top: unset;
46
        right: unset;
47
        margin: 0 0 0 auto;
48
    }
49

50
    .menuButton {
51
        align-self: center;
52
        transform: unset;
53
    }
54
}
55

56
@media all and (min-width: 1540px) {
57
    .menuButton:hover {
58
        background-color: rgba(51, 51, 51, 0.1);
59
    }
60
}
61