fix(frontend): The "Log Out" button can't be reached on the sidebar in landscape mode [Mobile] tm-567

apps/frontend/src/libs/components/sidebar/sidebar.tsx

@@ -78,6 +78,17 @@ const Sidebar: React.FC<Properties> = ({ menuItems, user }: Properties) => {
 							<Image alt="website logo" className={styles["logo"]} src={logo} />
 						</Link>
 						<nav className={styles["menu"]}>
+							<Button
+								className={getValidClassNames(
+									styles["burger-button-in-flow"],
+									styles[isOpen ? "open" : "close"],
+								)}
+								hasVisuallyHiddenLabel
+								iconName="burger"
+								label="burger-button"
+								onClick={handleToggleSidebar}
+								style="secondary"
+							/>
 							{menuItems.map(({ href, icon, label, pagePermissions }) => {
 								return (
 									handleCheckPermissions(pagePermissions) && (

apps/frontend/src/libs/components/sidebar/styles.module.css

@@ -7,9 +7,10 @@
 	flex-direction: column;
 	height: 100%;
 	padding: 19px;
+	padding-right: 10px;
 	overflow: hidden;
 	background-color: var(--color-menu);
-	transition: width 0.3s ease;
+	transition: 0.3s ease;
 }
 
 .menu {
@@ -25,10 +26,8 @@
 	flex-grow: 1;
 }
 
-.burger-button {
-	position: fixed;
-	top: 30px;
-	left: 37px;
+.burger-button,
+.burger-button-in-flow {
 	display: none;
 	min-height: auto;
 	padding: 4px;
@@ -37,6 +36,12 @@
 	border-radius: 0;
 }
 
+.burger-button {
+	position: fixed;
+	top: 30px;
+	left: 37px;
+}
+
 .menu-item {
 	display: flex;
 	gap: 14px;
@@ -98,6 +103,7 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
+	padding-right: 9px;
 	overflow: hidden scroll;
 }
 
@@ -210,6 +216,7 @@
 
 	.content-wrapper {
 		flex-direction: row;
+		padding-right: 0;
 	}
 
 	.sidebar.close {
@@ -294,12 +301,8 @@
 }
 
 @media screen and (height <= 665px) {
-	.title-container {
-		max-height: 46px;
-	}
-
-	.sidebar .content-wrapper {
-		padding-right: 12px;
+	.content-container {
+		gap: 14px;
 	}
 }
 
@@ -308,13 +311,45 @@
 		margin-right: -8px;
 	}
 
-	.sidebar:not(.open) {
-		padding-top: 80px;
+	.sidebar:not(.open) .title-container {
+		height: 0;
+		min-height: 0;
+		padding: 0;
 	}
 
-	.sidebar:not(.open) .title-container {
+	.burger-button:has(~ .sidebar) {
 		display: none;
 	}
+
+	.sidebar:not(.open) .burger-button-in-flow {
+		display: flex;
+		flex-shrink: 1;
+		align-items: flex-start;
+		width: 66px;
+		height: 100%;
+		min-height: 37px;
+		max-height: 103px;
+		margin: 15px 0 8px 1px;
+		color: var(--main-white);
+	}
+
+	.menu-item:first-of-type {
+		margin-top: 12px;
+	}
+
+	.content-container {
+		gap: 0;
+	}
+
+	.sidebar:not(.open) .content-container {
+		flex-direction: column-reverse;
+	}
+}
+
+@media screen and (--small-screen) and (height <= 665px) {
+	.burger-button:has(~ .sidebar) {
+		display: block;
+	}
 }
 
 @media (--hover-active) {