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	.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	}