docs/styles/Drawer.module.css

.aside {
    width: 70vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background: #000;
    box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: 0.2s;
    overflow-x: hidden;
}

.overlay {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 999;
    backdrop-filter: blur(2px);
}

.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px;
    background: rgb(0, 0, 0, 0.1);
}

.controls[data-expanded="true"] {
    justify-content: space-between;
}

.list {
    padding: 5px;
    margin: 10px 15px;
}

.listItem {
    margin: 5px 0;
}

.listItemAnchor {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
}

.listItem.active .listItemAnchor,
.listItemAnchor.active,
.listItemAnchor:hover {    
    background: rgba(255, 255, 255, 0.1);
}

.open {
    left: 0;
}

.closed {
    left: -70vw;
}

.closedOverlay {
    display: none;
}

.openOverlay {
    display: block;
}

@media (max-width: 970px) {
    .aside {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(50px);
    }
}
1	rakinar2	575	.aside {
2			width: 70vw;
3			height: 100vh;
4			position: fixed;
5			top: 0;
6			background: #000;
7			box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.1);
8			z-index: 1000;
9			transition: 0.2s;
10			overflow-x: hidden;
11			}
12
13			.overlay {
14			height: 100vh;
15			width: 100vw;
16			position: fixed;
17			top: 0;
18			left: 0;
19			background: rgba(255, 255, 255, 0.1);
20			z-index: 999;
21			backdrop-filter: blur(2px);
22			}
23
24			.controls {
25			display: flex;
26			align-items: center;
27			justify-content: flex-end;
28			padding: 10px;
29			background: rgb(0, 0, 0, 0.1);
30			}
31
32			.controls[data-expanded="true"] {
33			justify-content: space-between;
34			}
35
36			.list {
37			padding: 5px;
38			margin: 10px 15px;
39			}
40
41			.listItem {
42			margin: 5px 0;
43			}
44
45			.listItemAnchor {
46			padding: 5px 10px;
47			display: flex;
48			justify-content: space-between;
49			align-items: center;
50			border-radius: 5px;
51			}
52
53			.listItem.active .listItemAnchor,
54			.listItemAnchor.active,
55			.listItemAnchor:hover {
56			background: rgba(255, 255, 255, 0.1);
57			}
58
59			.open {
60			left: 0;
61			}
62
63			.closed {
64			left: -70vw;
65			}
66
67			.closedOverlay {
68			display: none;
69			}
70
71			.openOverlay {
72			display: block;
73			}
74
75			@media (max-width: 970px) {
76			.aside {
77			background: rgba(0, 0, 0, 0.2);
78			backdrop-filter: blur(50px);
79			}
80			}