edit layout for small resolution screens

src/app/styles/global-styles.scss

@@ -39,6 +39,7 @@
 	margin-bottom: 2rem;
 	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
 	color: v.$white;
+	max-width: calc(100vw - var(--side-bar-width) - 60px);
 
 	h1 {
 		font-size: 2rem;
@@ -60,6 +61,10 @@
 		align-items: center;
 		gap: 40px;
 
+		@media (max-width: 700px) {
+			flex-direction: column;
+		}
+
 		.header-main {
 			flex: 1;
 		}
@@ -243,7 +248,6 @@
 }
 
 .sidebar {
-	/* width: v.$side-bar-width; */
 	width: var(--side-bar-width);
 	background: linear-gradient(180deg, v.$p-color 0%, v.$s-color 100%);
 	padding: 30px 0;
@@ -252,6 +256,41 @@
 	overflow-y: auto;
 	z-index: 100;
 	border-radius: 0 30px 30px 0;
+	transition: transform 0.3s ease-in-out;
+	transform: translateX(-100%);
+
+	@media (max-width: 767px) {
+		width: 400px;
+		display: block;
+
+		&.show {
+			transform: translateX(0);
+		}
+
+		&:not(.show) {
+			transform: translateX(-100%);
+		}
+	}
+
+	@media (max-width: 400px) {
+		width: 100%;
+	}
+
+	@media (min-width: 767px) {
+		width: var(--side-bar-width);
+		transform: translateX(0);
+	}
+}
+
+.sidebar-close-button {
+	padding: 0 15px 20px;
+	color: v.$white;
+	cursor: pointer;
+	display: none;
+
+	@media (max-width: 767px) {
+		display: block;
+	}
 }
 
 .nav-link {
@@ -427,6 +466,10 @@
 		&:focus {
 			outline: none;
 		}
+
+		@media (max-width: 490px) {
+			padding: 0.5rem 8px;
+		}
 	}
 
 	.switcher-list {