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

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

@@ -6,15 +6,22 @@ import styles from "./styles.module.css";
 
 type Properties = {
 	children: React.ReactNode;
+	position?: "absolute" | "fixed";
 };
 
-const Portal: React.FC<Properties> = ({ children }: Properties) => {
+const Portal: React.FC<Properties> = ({
+	children,
+	position = "fixed",
+}: Properties) => {
 	const portalContainer = useMemo(() => {
 		const element = document.createElement("div");
-		element.classList.add(styles["portal"] as string);
+		element.classList.add(
+			styles["portal"] as string,
+			styles[position] as string,
+		);
 
 		return element;
-	}, []);
+	}, [position]);
 
 	useEffect(() => {
 		document.body.append(portalContainer);

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

@@ -4,3 +4,11 @@
 	left: 0;
 	z-index: 1000;
 }
+
+.fixed {
+	position: fixed;
+}
+
+.absolute {
+	position: absolute;
+}

apps/frontend/src/libs/components/sidebar/libs/constants/constants.ts

@@ -0,0 +1 @@
+export { SMALL_WIDTH_BREAKPOINT } from "./small-width-breakpoint.constant.js";

apps/frontend/src/libs/components/sidebar/libs/constants/small-width-breakpoint.constant.ts

@@ -0,0 +1,3 @@
+const SMALL_WIDTH_BREAKPOINT = 480;
+
+export { SMALL_WIDTH_BREAKPOINT };

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

@@ -8,6 +8,7 @@ import {
 	useCallback,
 	useState,
 	useToggleScroll,
+	useWindowWidth,
 } from "~/libs/hooks/hooks.js";
 import { type MenuItem, type PagePermissions } from "~/libs/types/types.js";
 import {
@@ -21,6 +22,8 @@ import { Button } from "../button/button.js";
 import { Icon } from "../icon/icon.js";
 import { Image } from "../image/image.js";
 import { Link } from "../link/link.js";
+import { Portal } from "../portal/portal.js";
+import { SMALL_WIDTH_BREAKPOINT } from "./libs/constants/constants.js";
 import styles from "./styles.module.css";
 
 type Properties = {
@@ -58,21 +61,25 @@ const Sidebar: React.FC<Properties> = ({ menuItems, user }: Properties) => {
 		[user],
 	);
 
+	const windowWidth = useWindowWidth();
+
+	const burgerButton = (
+		<Button
+			className={getValidClassNames(
+				styles["burger-button"],
+				styles[isOpen ? "open" : "close"],
+			)}
+			hasVisuallyHiddenLabel
+			iconName="burger"
+			label="burger-button"
+			onClick={handleToggleSidebar}
+			style="secondary"
+		/>
+	);
 	useToggleScroll(isOpen);
 
 	return (
 		<>
-			<Button
-				className={getValidClassNames(
-					styles["burger-button"],
-					styles[isOpen ? "open" : "close"],
-				)}
-				hasVisuallyHiddenLabel
-				iconName="burger"
-				label="burger-button"
-				onClick={handleToggleSidebar}
-				style="secondary"
-			/>
 			<div
 				className={getValidClassNames(
 					styles["sidebar"],
@@ -85,6 +92,11 @@ const Sidebar: React.FC<Properties> = ({ menuItems, user }: Properties) => {
 							<Image alt="website logo" className={styles["logo"]} src={logo} />
 						</Link>
 						<nav className={styles["menu"]}>
+							{windowWidth > SMALL_WIDTH_BREAKPOINT ? (
+								burgerButton
+							) : (
+								<Portal position="absolute">{burgerButton}</Portal>
+							)}
 							{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 {
@@ -98,7 +99,8 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	overflow: hidden scroll;
+	padding-right: 9px;
+	overflow: hidden;
 }
 
 @media screen and (--large-screen) {
@@ -168,6 +170,10 @@
 	}
 }
 
+.absolute {
+	position: absolute;
+}
+
 @media screen and (--small-screen) {
 	.sidebar.close {
 		width: 270px;
@@ -184,6 +190,26 @@
 		left: 33px;
 		z-index: var(--z-index-low);
 		color: var(--color-button);
+		transition:
+			all 0.3s,
+			color 0s;
+	}
+
+	.burger-button.open {
+		display: flex;
+		color: transparent;
+		visibility: hidden;
+	}
+
+	.burger-button.close {
+		transition:
+			all 0.3s,
+			color 0.3s cubic-bezier(1, -0.03, 1, 0.49);
+	}
+
+	.sidebar,
+	.content-wrapper {
+		overflow: unset;
 	}
 
 	.blurred-background {
@@ -210,6 +236,7 @@
 
 	.content-wrapper {
 		flex-direction: row;
+		padding-right: 0;
 	}
 
 	.sidebar.close {
@@ -294,12 +321,12 @@
 }
 
 @media screen and (height <= 665px) {
-	.title-container {
-		max-height: 46px;
+	.content-container {
+		gap: 14px;
 	}
 
-	.sidebar .content-wrapper {
-		padding-right: 12px;
+	.content-wrapper {
+		overflow: hidden scroll;
 	}
 }
 
@@ -308,12 +335,47 @@
 		margin-right: -8px;
 	}
 
-	.sidebar:not(.open) {
-		padding-top: 80px;
+	.sidebar:not(.open) .title-container {
+		height: 0;
+		min-height: 0;
+		padding: 0;
+	}
+
+	.burger-button {
+		position: static;
+		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);
 	}
 
-	.sidebar:not(.open) .title-container {
-		display: none;
+	.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 <= 665) {
+	.burger-button {
+		position: absolute;
+		width: unset;
+		height: unset;
+		min-height: unset;
+		max-height: unset;
+		margin: 0;
+		color: var(--color-button);
 	}
 }
 

apps/frontend/src/libs/hooks/hooks.ts

@@ -7,6 +7,7 @@ export { useHandleEscPress } from "./use-handle-esc-press/use-handle-esc-press.h
 export { useInfiniteScroll } from "./use-infinite-scroll/use-infinite-scroll.hook.js";
 export { usePagination } from "./use-pagination/use-pagination.hook.js";
 export { useToggleScroll } from "./use-toggle-scroll/use-toggle-scroll.hook.js";
+export { useWindowWidth } from "./use-window-width/use-window-width.hook.js";
 export {
 	forwardRef,
 	useCallback,

apps/frontend/src/libs/hooks/use-window-width/use-window-width.hook.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+const useWindowWidth = (): number => {
+	const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
+
+	useEffect(() => {
+		const handleResize = (): void => {
+			setWindowWidth(window.innerWidth);
+		};
+
+		window.addEventListener("resize", handleResize);
+
+		return (): void => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+
+	return windowWidth;
+};
+
+export { useWindowWidth };