From 575c12e87585084178b4ea09c1fae798ca744fbf Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Mon, 18 Mar 2024 14:56:01 +0200
Subject: [PATCH 01/12] fix(frontend): logout button in sidebar tm-567

---
 apps/frontend/src/assets/icons/log-out.svg    |   2 +-
 .../src/libs/components/sidebar/sidebar.tsx   |  48 ++--
 .../libs/components/sidebar/styles.module.css |  15 +-
 package-lock.json                             | 222 ++++++++++++++++--
 4 files changed, 244 insertions(+), 43 deletions(-)

diff --git a/apps/frontend/src/assets/icons/log-out.svg b/apps/frontend/src/assets/icons/log-out.svg
index 2acb0e181..8433720e0 100644
--- a/apps/frontend/src/assets/icons/log-out.svg
+++ b/apps/frontend/src/assets/icons/log-out.svg
@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="21" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.27273 20C1.64773 20 1.11269 19.7824 0.667614 19.3472C0.222538 18.912 0 18.3889 0 17.7778V2.22222C0 1.61111 0.222538 1.08796 0.667614 0.652778C1.11269 0.217593 1.64773 0 2.27273 0H9.09091C9.41288 0 9.68277 0.106481 9.90057 0.319444C10.1184 0.532407 10.2273 0.796296 10.2273 1.11111C10.2273 1.42593 10.1184 1.68981 9.90057 1.90278C9.68277 2.11574 9.41288 2.22222 9.09091 2.22222H2.27273V17.7778H9.09091C9.41288 17.7778 9.68277 17.8843 9.90057 18.0972C10.1184 18.3102 10.2273 18.5741 10.2273 18.8889C10.2273 19.2037 10.1184 19.4676 9.90057 19.6806C9.68277 19.8935 9.41288 20 9.09091 20H2.27273ZM16.108 11.1111H7.95455C7.63258 11.1111 7.36269 11.0046 7.14489 10.7917C6.92708 10.5787 6.81818 10.3148 6.81818 10C6.81818 9.68519 6.92708 9.4213 7.14489 9.20833C7.36269 8.99537 7.63258 8.88889 7.95455 8.88889H16.108L13.9773 6.80556C13.7689 6.60185 13.6648 6.35185 13.6648 6.05556C13.6648 5.75926 13.7689 5.5 13.9773 5.27778C14.1856 5.05556 14.4508 4.93981 14.7727 4.93056C15.0947 4.9213 15.3693 5.02778 15.5966 5.25L19.6591 9.22222C19.8864 9.44444 20 9.7037 20 10C20 10.2963 19.8864 10.5556 19.6591 10.7778L15.5966 14.75C15.3693 14.9722 15.0994 15.0787 14.7869 15.0694C14.4744 15.0602 14.2045 14.9444 13.9773 14.7222C13.7689 14.5 13.6695 14.2361 13.679 13.9306C13.6884 13.625 13.7973 13.3704 14.0057 13.1667L16.108 11.1111Z"/>
 </svg>
diff --git a/apps/frontend/src/libs/components/sidebar/sidebar.tsx b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
index 517640d42..4d23b81de 100644
--- a/apps/frontend/src/libs/components/sidebar/sidebar.tsx
+++ b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
@@ -72,29 +72,31 @@ const Sidebar: React.FC<Properties> = ({ menuItems, user }: Properties) => {
 					styles[isOpen ? "open" : "close"],
 				)}
 			>
-				<Link className={styles["title-container"]} to="/">
-					<Image alt="website logo" className={styles["logo"]} src={logo} />
-				</Link>
-				<nav className={styles["menu"]}>
-					{menuItems.map(({ href, icon, label, pagePermissions }) => {
-						return (
-							handleCheckPermissions(pagePermissions) && (
-								<Link
-									activeClassName={styles["active"]}
-									className={getValidClassNames(
-										styles["bottom-menu"],
-										styles["menu-item"],
-									)}
-									key={label}
-									to={href}
-								>
-									<Icon name={icon} />
-									<span className={styles["link-title"]}>{label}</span>
-								</Link>
-							)
-						);
-					})}
-				</nav>
+				<div className={styles["content-container"]}>
+					<Link className={styles["title-container"]} to="/">
+						<Image alt="website logo" className={styles["logo"]} src={logo} />
+					</Link>
+					<nav className={styles["menu"]}>
+						{menuItems.map(({ href, icon, label, pagePermissions }) => {
+							return (
+								handleCheckPermissions(pagePermissions) && (
+									<Link
+										activeClassName={styles["active"]}
+										className={getValidClassNames(
+											styles["bottom-menu"],
+											styles["menu-item"],
+										)}
+										key={label}
+										to={href}
+									>
+										<Icon name={icon} />
+										<span className={styles["link-title"]}>{label}</span>
+									</Link>
+								)
+							);
+						})}
+					</nav>
+				</div>
 				<Button
 					className={styles["log-out-btn"]}
 					iconName="logOut"
diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 042033c5b..53b52fbbd 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -5,7 +5,6 @@
 	z-index: var(--z-index-medium);
 	display: flex;
 	flex-direction: column;
-	gap: 76px;
 	height: 100%;
 	padding: 19px;
 	overflow: hidden;
@@ -20,6 +19,12 @@
 	width: 100%;
 }
 
+.content-container {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
 .burger-button {
 	position: fixed;
 	top: 30px;
@@ -62,7 +67,9 @@
 }
 
 .title-container {
-	min-height: 50px;
+	height: 100%;
+	min-height: 60px;
+	max-height: 126px;
 }
 
 .title {
@@ -91,6 +98,10 @@
 	font-weight: 700;
 }
 
+.log-out-btn :last-child {
+	gap: 14px;
+}
+
 @media screen and (--large-screen) {
 	.menu-item {
 		width: 100%;
diff --git a/package-lock.json b/package-lock.json
index d1d506988..f889fb64a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,9 +90,54 @@
 				"npm": ">=9.x.x"
 			}
 		},
+		"apps/build": {
+			"name": "trackmates",
+			"version": "1.72.0",
+			"workspaces": [
+				"apps/*",
+				"packages/*"
+			],
+			"devDependencies": {
+				"@commitlint/cli": "18.6.0",
+				"@commitlint/config-conventional": "18.5.0",
+				"@commitlint/types": "18.6.0",
+				"@eslint/js": "8.56.0",
+				"@ls-lint/ls-lint": "2.2.2",
+				"@types/eslint": "8.56.2",
+				"@types/eslint__js": "8.42.3",
+				"@types/lint-staged": "13.3.0",
+				"@typescript-eslint/eslint-plugin": "6.19.1",
+				"@typescript-eslint/parser": "6.19.1",
+				"concurrently": "8.2.2",
+				"danger": "11.3.1",
+				"editorconfig-checker": "5.1.3",
+				"eslint": "8.56.0",
+				"eslint-import-resolver-typescript": "3.6.1",
+				"eslint-plugin-import": "2.29.1",
+				"eslint-plugin-jsdoc": "48.0.4",
+				"eslint-plugin-perfectionist": "2.5.0",
+				"eslint-plugin-require-explicit-generics": "1.0.0",
+				"eslint-plugin-sonarjs": "0.23.0",
+				"eslint-plugin-unicorn": "50.0.1",
+				"globals": "13.24.0",
+				"knip": "4.2.1",
+				"lint-staged": "15.2.0",
+				"prettier": "3.2.4",
+				"simple-git-hooks": "2.9.0",
+				"stylelint": "16.2.0",
+				"stylelint-config-recess-order": "4.4.0",
+				"stylelint-config-standard": "36.0.0",
+				"tsc-alias": "1.8.8",
+				"typescript": "5.3.3"
+			},
+			"engines": {
+				"node": "18.x.x",
+				"npm": ">=9.x.x"
+			}
+		},
 		"apps/frontend": {
 			"name": "@trackmates/frontend",
-			"version": "1.56.0",
+			"version": "1.57.0",
 			"dependencies": {
 				"@hookform/resolvers": "3.3.4",
 				"@reduxjs/toolkit": "2.0.1",
@@ -3319,6 +3364,30 @@
 				"node": ">=v18"
 			}
 		},
+		"node_modules/@cspotcode/source-map-support": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+			"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+			"dev": true,
+			"peer": true,
+			"dependencies": {
+				"@jridgewell/trace-mapping": "0.3.9"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.9",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+			"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+			"dev": true,
+			"peer": true,
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.0.3",
+				"@jridgewell/sourcemap-codec": "^1.4.10"
+			}
+		},
 		"node_modules/@csstools/css-parser-algorithms": {
 			"version": "2.5.0",
 			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz",
@@ -6109,6 +6178,34 @@
 			"resolved": "packages/shared",
 			"link": true
 		},
+		"node_modules/@tsconfig/node10": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+			"integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+			"dev": true,
+			"peer": true
+		},
+		"node_modules/@tsconfig/node12": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+			"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+			"dev": true,
+			"peer": true
+		},
+		"node_modules/@tsconfig/node14": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+			"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+			"dev": true,
+			"peer": true
+		},
+		"node_modules/@tsconfig/node16": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+			"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
 			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -6663,6 +6760,16 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+			"integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+			"dev": true,
+			"peer": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/agent-base": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -6835,6 +6942,13 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/arg": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+			"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -7436,7 +7550,6 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
 			"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0",
 				"es-errors": "^1.3.0",
@@ -8134,6 +8247,13 @@
 				"typescript": ">=4"
 			}
 		},
+		"node_modules/create-require": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+			"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8521,7 +8641,6 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
 			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0",
 				"es-errors": "^1.3.0",
@@ -8607,6 +8726,16 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/diff": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+			"dev": true,
+			"peer": true,
+			"engines": {
+				"node": ">=0.3.1"
+			}
+		},
 		"node_modules/digest-fetch": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",
@@ -8975,7 +9104,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
 			"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-			"dev": true,
 			"dependencies": {
 				"get-intrinsic": "^1.2.4"
 			},
@@ -8987,7 +9115,6 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
 			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -10358,7 +10485,6 @@
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
 			"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-			"dev": true,
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"function-bind": "^1.1.2",
@@ -10713,7 +10839,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
 			"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-			"dev": true,
 			"dependencies": {
 				"get-intrinsic": "^1.1.3"
 			},
@@ -10795,7 +10920,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
 			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0"
 			},
@@ -10807,7 +10931,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
 			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -10819,7 +10942,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
 			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -13109,6 +13231,13 @@
 				"semver": "bin/semver.js"
 			}
 		},
+		"node_modules/make-error": {
+			"version": "1.3.6",
+			"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+			"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/map-age-cleaner": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -13676,7 +13805,6 @@
 			"version": "1.13.1",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
 			"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-			"dev": true,
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -14683,7 +14811,6 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.4.0",
 				"object-assign": "^4.1.1",
@@ -14723,7 +14850,6 @@
 			"version": "6.11.2",
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
 			"integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
-			"dev": true,
 			"dependencies": {
 				"side-channel": "^1.0.4"
 			},
@@ -14875,8 +15001,7 @@
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-			"dev": true
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
 		"node_modules/react-redux": {
 			"version": "9.1.0",
@@ -15725,7 +15850,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
 			"integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
-			"dev": true,
 			"dependencies": {
 				"define-data-property": "^1.1.2",
 				"es-errors": "^1.3.0",
@@ -15797,7 +15921,6 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
 			"integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
-			"dev": true,
 			"dependencies": {
 				"call-bind": "^1.0.6",
 				"es-errors": "^1.3.0",
@@ -17137,6 +17260,10 @@
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
+		"node_modules/trackmates": {
+			"resolved": "apps/build",
+			"link": true
+		},
 		"node_modules/tree-kill": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -17167,6 +17294,50 @@
 				"typescript": ">=4.2.0"
 			}
 		},
+		"node_modules/ts-node": {
+			"version": "10.9.2",
+			"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+			"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+			"dev": true,
+			"peer": true,
+			"dependencies": {
+				"@cspotcode/source-map-support": "^0.8.0",
+				"@tsconfig/node10": "^1.0.7",
+				"@tsconfig/node12": "^1.0.7",
+				"@tsconfig/node14": "^1.0.0",
+				"@tsconfig/node16": "^1.0.2",
+				"acorn": "^8.4.1",
+				"acorn-walk": "^8.1.1",
+				"arg": "^4.1.0",
+				"create-require": "^1.1.0",
+				"diff": "^4.0.1",
+				"make-error": "^1.1.1",
+				"v8-compile-cache-lib": "^3.0.1",
+				"yn": "3.1.1"
+			},
+			"bin": {
+				"ts-node": "dist/bin.js",
+				"ts-node-cwd": "dist/bin-cwd.js",
+				"ts-node-esm": "dist/bin-esm.js",
+				"ts-node-script": "dist/bin-script.js",
+				"ts-node-transpile-only": "dist/bin-transpile.js",
+				"ts-script": "dist/bin-script-deprecated.js"
+			},
+			"peerDependencies": {
+				"@swc/core": ">=1.2.50",
+				"@swc/wasm": ">=1.2.50",
+				"@types/node": "*",
+				"typescript": ">=2.7"
+			},
+			"peerDependenciesMeta": {
+				"@swc/core": {
+					"optional": true
+				},
+				"@swc/wasm": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/ts-paths-esm-loader": {
 			"version": "1.4.3",
 			"resolved": "https://registry.npmjs.org/ts-paths-esm-loader/-/ts-paths-esm-loader-1.4.3.tgz",
@@ -17527,6 +17698,13 @@
 				"uuid": "dist/bin/uuid"
 			}
 		},
+		"node_modules/v8-compile-cache-lib": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+			"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+			"dev": true,
+			"peer": true
+		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -18494,6 +18672,16 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/yn": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+			"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+			"dev": true,
+			"peer": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

From feae85c11d0a3c3081205b51497aa056fb247d1b Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Mon, 18 Mar 2024 15:06:37 +0200
Subject: [PATCH 02/12] fix(frontend): inconsistency with pwa sidebar tm-567

---
 .../src/libs/components/sidebar/styles.module.css     | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 53b52fbbd..1e4ef8632 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -278,4 +278,15 @@
 	.sidebar.close .menu-item {
 		overflow: unset;
 	}
+
+	.content-container {
+		flex-grow: 3;
+	}
+
+	.log-out-btn :last-child {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		line-height: 24px;
+	}
 }

From d708111a39731791d61bc6361a699f32c7c51b54 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Mon, 18 Mar 2024 15:10:18 +0200
Subject: [PATCH 03/12] chore: remove changes from package lock tm-567

---
 package-lock.json | 226 ++++------------------------------------------
 1 file changed, 19 insertions(+), 207 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f889fb64a..81311ab64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "trackmates",
-	"version": "1.72.0",
+	"version": "1.74.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "trackmates",
-			"version": "1.72.0",
+			"version": "1.74.0",
 			"workspaces": [
 				"apps/*",
 				"packages/*"
@@ -90,54 +90,9 @@
 				"npm": ">=9.x.x"
 			}
 		},
-		"apps/build": {
-			"name": "trackmates",
-			"version": "1.72.0",
-			"workspaces": [
-				"apps/*",
-				"packages/*"
-			],
-			"devDependencies": {
-				"@commitlint/cli": "18.6.0",
-				"@commitlint/config-conventional": "18.5.0",
-				"@commitlint/types": "18.6.0",
-				"@eslint/js": "8.56.0",
-				"@ls-lint/ls-lint": "2.2.2",
-				"@types/eslint": "8.56.2",
-				"@types/eslint__js": "8.42.3",
-				"@types/lint-staged": "13.3.0",
-				"@typescript-eslint/eslint-plugin": "6.19.1",
-				"@typescript-eslint/parser": "6.19.1",
-				"concurrently": "8.2.2",
-				"danger": "11.3.1",
-				"editorconfig-checker": "5.1.3",
-				"eslint": "8.56.0",
-				"eslint-import-resolver-typescript": "3.6.1",
-				"eslint-plugin-import": "2.29.1",
-				"eslint-plugin-jsdoc": "48.0.4",
-				"eslint-plugin-perfectionist": "2.5.0",
-				"eslint-plugin-require-explicit-generics": "1.0.0",
-				"eslint-plugin-sonarjs": "0.23.0",
-				"eslint-plugin-unicorn": "50.0.1",
-				"globals": "13.24.0",
-				"knip": "4.2.1",
-				"lint-staged": "15.2.0",
-				"prettier": "3.2.4",
-				"simple-git-hooks": "2.9.0",
-				"stylelint": "16.2.0",
-				"stylelint-config-recess-order": "4.4.0",
-				"stylelint-config-standard": "36.0.0",
-				"tsc-alias": "1.8.8",
-				"typescript": "5.3.3"
-			},
-			"engines": {
-				"node": "18.x.x",
-				"npm": ">=9.x.x"
-			}
-		},
 		"apps/frontend": {
 			"name": "@trackmates/frontend",
-			"version": "1.57.0",
+			"version": "1.56.0",
 			"dependencies": {
 				"@hookform/resolvers": "3.3.4",
 				"@reduxjs/toolkit": "2.0.1",
@@ -3364,30 +3319,6 @@
 				"node": ">=v18"
 			}
 		},
-		"node_modules/@cspotcode/source-map-support": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
-			"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"@jridgewell/trace-mapping": "0.3.9"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
-		"node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.9",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-			"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"@jridgewell/resolve-uri": "^3.0.3",
-				"@jridgewell/sourcemap-codec": "^1.4.10"
-			}
-		},
 		"node_modules/@csstools/css-parser-algorithms": {
 			"version": "2.5.0",
 			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz",
@@ -6178,34 +6109,6 @@
 			"resolved": "packages/shared",
 			"link": true
 		},
-		"node_modules/@tsconfig/node10": {
-			"version": "1.0.9",
-			"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
-			"integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/@tsconfig/node12": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
-			"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/@tsconfig/node14": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
-			"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-			"dev": true,
-			"peer": true
-		},
-		"node_modules/@tsconfig/node16": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
-			"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
 			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -6760,16 +6663,6 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
-		"node_modules/acorn-walk": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-			"integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">=0.4.0"
-			}
-		},
 		"node_modules/agent-base": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -6942,13 +6835,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/arg": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-			"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -7550,6 +7436,7 @@
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
 			"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0",
 				"es-errors": "^1.3.0",
@@ -8247,13 +8134,6 @@
 				"typescript": ">=4"
 			}
 		},
-		"node_modules/create-require": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
-			"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8641,6 +8521,7 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
 			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0",
 				"es-errors": "^1.3.0",
@@ -8726,16 +8607,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/diff": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">=0.3.1"
-			}
-		},
 		"node_modules/digest-fetch": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",
@@ -9104,6 +8975,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
 			"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+			"dev": true,
 			"dependencies": {
 				"get-intrinsic": "^1.2.4"
 			},
@@ -9115,6 +8987,7 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
 			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -10485,6 +10358,7 @@
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
 			"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+			"dev": true,
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"function-bind": "^1.1.2",
@@ -10839,6 +10713,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
 			"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+			"dev": true,
 			"dependencies": {
 				"get-intrinsic": "^1.1.3"
 			},
@@ -10920,6 +10795,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
 			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+			"dev": true,
 			"dependencies": {
 				"es-define-property": "^1.0.0"
 			},
@@ -10931,6 +10807,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
 			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -10942,6 +10819,7 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
 			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -13231,13 +13109,6 @@
 				"semver": "bin/semver.js"
 			}
 		},
-		"node_modules/make-error": {
-			"version": "1.3.6",
-			"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-			"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/map-age-cleaner": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -13805,6 +13676,7 @@
 			"version": "1.13.1",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
 			"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+			"dev": true,
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -14811,6 +14683,7 @@
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
 			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+			"dev": true,
 			"dependencies": {
 				"loose-envify": "^1.4.0",
 				"object-assign": "^4.1.1",
@@ -14850,6 +14723,7 @@
 			"version": "6.11.2",
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
 			"integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+			"dev": true,
 			"dependencies": {
 				"side-channel": "^1.0.4"
 			},
@@ -15001,7 +14875,8 @@
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+			"dev": true
 		},
 		"node_modules/react-redux": {
 			"version": "9.1.0",
@@ -15850,6 +15725,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
 			"integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+			"dev": true,
 			"dependencies": {
 				"define-data-property": "^1.1.2",
 				"es-errors": "^1.3.0",
@@ -15921,6 +15797,7 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
 			"integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
+			"dev": true,
 			"dependencies": {
 				"call-bind": "^1.0.6",
 				"es-errors": "^1.3.0",
@@ -17260,10 +17137,6 @@
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
-		"node_modules/trackmates": {
-			"resolved": "apps/build",
-			"link": true
-		},
 		"node_modules/tree-kill": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -17294,50 +17167,6 @@
 				"typescript": ">=4.2.0"
 			}
 		},
-		"node_modules/ts-node": {
-			"version": "10.9.2",
-			"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
-			"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-			"dev": true,
-			"peer": true,
-			"dependencies": {
-				"@cspotcode/source-map-support": "^0.8.0",
-				"@tsconfig/node10": "^1.0.7",
-				"@tsconfig/node12": "^1.0.7",
-				"@tsconfig/node14": "^1.0.0",
-				"@tsconfig/node16": "^1.0.2",
-				"acorn": "^8.4.1",
-				"acorn-walk": "^8.1.1",
-				"arg": "^4.1.0",
-				"create-require": "^1.1.0",
-				"diff": "^4.0.1",
-				"make-error": "^1.1.1",
-				"v8-compile-cache-lib": "^3.0.1",
-				"yn": "3.1.1"
-			},
-			"bin": {
-				"ts-node": "dist/bin.js",
-				"ts-node-cwd": "dist/bin-cwd.js",
-				"ts-node-esm": "dist/bin-esm.js",
-				"ts-node-script": "dist/bin-script.js",
-				"ts-node-transpile-only": "dist/bin-transpile.js",
-				"ts-script": "dist/bin-script-deprecated.js"
-			},
-			"peerDependencies": {
-				"@swc/core": ">=1.2.50",
-				"@swc/wasm": ">=1.2.50",
-				"@types/node": "*",
-				"typescript": ">=2.7"
-			},
-			"peerDependenciesMeta": {
-				"@swc/core": {
-					"optional": true
-				},
-				"@swc/wasm": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/ts-paths-esm-loader": {
 			"version": "1.4.3",
 			"resolved": "https://registry.npmjs.org/ts-paths-esm-loader/-/ts-paths-esm-loader-1.4.3.tgz",
@@ -17698,13 +17527,6 @@
 				"uuid": "dist/bin/uuid"
 			}
 		},
-		"node_modules/v8-compile-cache-lib": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
-			"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -18672,16 +18494,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/yn": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-			"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-			"dev": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

From bf1b390d69afbae954dec61c017e83cbc7f83a43 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Wed, 20 Mar 2024 11:32:39 +0200
Subject: [PATCH 04/12] chore(frontend): adjust sidebar layout to account for
 management btn tm-567

---
 .../src/libs/components/sidebar/styles.module.css    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 1e4ef8632..7721a3e28 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -290,3 +290,15 @@
 		line-height: 24px;
 	}
 }
+
+@media screen and (height <= 350px) {
+	.menu-item,
+	.log-out-btn {
+		min-height: 44px;
+		padding: 6px 24px;
+	}
+
+	.title-container {
+		margin-bottom: 10px;
+	}
+}

From d83356acc1f5fc8c7ac299df93c65fd76e1e6686 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Wed, 20 Mar 2024 22:36:36 +0200
Subject: [PATCH 05/12] fix(frontend): add overflow to sidebar tm-567

---
 .../src/libs/components/sidebar/sidebar.tsx   | 64 ++++++++++---------
 .../libs/components/sidebar/styles.module.css | 35 +++++++---
 2 files changed, 60 insertions(+), 39 deletions(-)

diff --git a/apps/frontend/src/libs/components/sidebar/sidebar.tsx b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
index 4d23b81de..d165af8e9 100644
--- a/apps/frontend/src/libs/components/sidebar/sidebar.tsx
+++ b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
@@ -72,38 +72,40 @@ const Sidebar: React.FC<Properties> = ({ menuItems, user }: Properties) => {
 					styles[isOpen ? "open" : "close"],
 				)}
 			>
-				<div className={styles["content-container"]}>
-					<Link className={styles["title-container"]} to="/">
-						<Image alt="website logo" className={styles["logo"]} src={logo} />
-					</Link>
-					<nav className={styles["menu"]}>
-						{menuItems.map(({ href, icon, label, pagePermissions }) => {
-							return (
-								handleCheckPermissions(pagePermissions) && (
-									<Link
-										activeClassName={styles["active"]}
-										className={getValidClassNames(
-											styles["bottom-menu"],
-											styles["menu-item"],
-										)}
-										key={label}
-										to={href}
-									>
-										<Icon name={icon} />
-										<span className={styles["link-title"]}>{label}</span>
-									</Link>
-								)
-							);
-						})}
-					</nav>
+				<div className={styles["content-wrapper"]}>
+					<div className={styles["content-container"]}>
+						<Link className={styles["title-container"]} to="/">
+							<Image alt="website logo" className={styles["logo"]} src={logo} />
+						</Link>
+						<nav className={styles["menu"]}>
+							{menuItems.map(({ href, icon, label, pagePermissions }) => {
+								return (
+									handleCheckPermissions(pagePermissions) && (
+										<Link
+											activeClassName={styles["active"]}
+											className={getValidClassNames(
+												styles["bottom-menu"],
+												styles["menu-item"],
+											)}
+											key={label}
+											to={href}
+										>
+											<Icon name={icon} />
+											<span className={styles["link-title"]}>{label}</span>
+										</Link>
+									)
+								);
+							})}
+						</nav>
+					</div>
+					<Button
+						className={styles["log-out-btn"]}
+						iconName="logOut"
+						label="Log Out"
+						onClick={handleLogOut}
+						style="plain"
+					/>
 				</div>
-				<Button
-					className={styles["log-out-btn"]}
-					iconName="logOut"
-					label="Log Out"
-					onClick={handleLogOut}
-					style="plain"
-				/>
 			</div>
 			<BlurredBackground
 				className={styles["blurred-background"]}
diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 148c022bf..d4782279a 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -9,7 +9,7 @@
 	padding: 19px;
 	overflow: hidden;
 	background-color: var(--color-menu);
-	transition: 0.3s ease;
+	transition: width 0.3s ease;
 }
 
 .menu {
@@ -89,6 +89,13 @@
 	gap: 14px;
 }
 
+.content-wrapper {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	overflow: hidden scroll;
+}
+
 @media screen and (--large-screen) {
 	.menu-item {
 		width: 100%;
@@ -196,6 +203,10 @@
 		padding-bottom: 21px;
 	}
 
+	.content-wrapper {
+		flex-direction: row;
+	}
+
 	.sidebar.close {
 		width: 100%;
 		transform: none;
@@ -278,15 +289,23 @@
 	}
 }
 
-@media screen and (height <= 350px) {
-	.menu-item,
-	.log-out-btn {
-		min-height: 44px;
-		padding: 6px 24px;
+@media screen and (height <= 665px) {
+	.sidebar .content-wrapper {
+		padding-right: 12px;
 	}
+}
 
-	.title-container {
-		margin-bottom: 10px;
+@media screen and (--large-screen) and (height <= 665px) {
+	.sidebar:not(.open) {
+		padding-top: 80px;
+	}
+
+	.sidebar:not(.open) .title-container {
+		display: none;
+	}
+
+	.sidebar:not(.open) .content-wrapper {
+		margin-right: -8px;
 	}
 }
 

From 95d7cfa01b99c08e2843a345fb35a5e75090fefa Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Wed, 20 Mar 2024 22:55:38 +0200
Subject: [PATCH 06/12] fix(frontend): jumping logo tm-567

---
 .../src/libs/components/sidebar/styles.module.css    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 7ee54b9aa..d33b7dcde 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -290,12 +290,20 @@
 }
 
 @media screen and (height <= 665px) {
+	.title-container {
+		max-height: 46px;
+	}
+
 	.sidebar .content-wrapper {
 		padding-right: 12px;
 	}
 }
 
 @media screen and (--large-screen) and (height <= 665px) {
+	.sidebar:not(.open) .content-wrapper {
+		margin-right: -8px;
+	}
+
 	.sidebar:not(.open) {
 		padding-top: 80px;
 	}
@@ -303,10 +311,6 @@
 	.sidebar:not(.open) .title-container {
 		display: none;
 	}
-
-	.sidebar:not(.open) .content-wrapper {
-		margin-right: -8px;
-	}
 }
 
 @media (--hover-active) {

From 3341f888a405ee4d9f6d50569a026a7cf2705de3 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 08:43:02 +0200
Subject: [PATCH 07/12] fix(frontend): jumping elements tm-567

---
 .../src/libs/components/sidebar/sidebar.tsx   | 11 ++++
 .../libs/components/sidebar/styles.module.css | 64 +++++++++++--------
 2 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/libs/components/sidebar/sidebar.tsx b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
index 5a47be0ae..d0b21737a 100644
--- a/apps/frontend/src/libs/components/sidebar/sidebar.tsx
+++ b/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) && (
diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 2746bc4d0..9cbe3914e 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -25,10 +25,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 +35,12 @@
 	border-radius: 0;
 }
 
+.burger-button {
+	position: fixed;
+	top: 30px;
+	left: 37px;
+}
+
 .menu-item {
 	display: flex;
 	gap: 14px;
@@ -294,13 +298,13 @@
 }
 
 @media screen and (height <= 665px) {
-	.title-container {
-		max-height: 46px;
-	}
-
 	.sidebar .content-wrapper {
 		padding-right: 12px;
 	}
+
+	.content-container {
+		gap: 14px;
+	}
 }
 
 @media screen and (--large-screen) and (height <= 665px) {
@@ -308,36 +312,46 @@
 		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;
 	}
-}
 
-@media screen and (height <= 665px) {
-	.title-container {
-		max-height: 46px;
+	.sidebar:not(.open) .burger-button-in-flow {
+		display: flex;
+		flex-shrink: 1;
+		align-items: flex-start;
+		width: 66px;
+		height: 100%;
+		min-height: 38px;
+		max-height: 103px;
+		margin-top: 15px;
+		margin-bottom: 8px;
+		margin-left: 1px;
+		color: var(--main-white);
 	}
 
-	.sidebar .content-wrapper {
-		padding-right: 12px;
+	.menu-item:first-of-type {
+		margin-top: 12px;
 	}
-}
 
-@media screen and (--large-screen) and (height <= 665px) {
-	.sidebar:not(.open) .content-wrapper {
-		margin-right: -8px;
+	.content-container {
+		gap: 0;
 	}
 
-	.sidebar:not(.open) {
-		padding-top: 80px;
+	.sidebar:not(.open) .content-container {
+		flex-direction: column-reverse;
 	}
+}
 
-	.sidebar:not(.open) .title-container {
-		display: none;
+@media screen and (--small-screen) and (height <= 665px) {
+	.burger-button:has(~ .sidebar) {
+		display: block;
 	}
 }
 

From f375e3b8f9ba77421c7c6031f333239dc4a19ce6 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 11:01:17 +0200
Subject: [PATCH 08/12] fix(frontend): remove horizontal jump tm-567

---
 .../src/libs/components/sidebar/styles.module.css        | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 9cbe3914e..142b1508e 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/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 {
@@ -102,6 +103,7 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
+	padding-right: 9px;
 	overflow: hidden scroll;
 }
 
@@ -214,6 +216,7 @@
 
 	.content-wrapper {
 		flex-direction: row;
+		padding-right: 0;
 	}
 
 	.sidebar.close {
@@ -298,10 +301,6 @@
 }
 
 @media screen and (height <= 665px) {
-	.sidebar .content-wrapper {
-		padding-right: 12px;
-	}
-
 	.content-container {
 		gap: 14px;
 	}

From d04af1eebac43c3af15d4db51ba05902e9c72f7b Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 11:12:01 +0200
Subject: [PATCH 09/12] chore(frontend): combine 3 properties into 1 tm-567

---
 apps/frontend/src/libs/components/sidebar/styles.module.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 142b1508e..50a29f51c 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -329,9 +329,7 @@
 		height: 100%;
 		min-height: 38px;
 		max-height: 103px;
-		margin-top: 15px;
-		margin-bottom: 8px;
-		margin-left: 1px;
+		margin: 15px 0 8px 1px;
 		color: var(--main-white);
 	}
 

From e0ed3568701c0a03f9b9ca1d3a829ad9cffa5752 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 11:16:22 +0200
Subject: [PATCH 10/12] fix(frontend): micro jump tm-567

---
 apps/frontend/src/libs/components/sidebar/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 50a29f51c..63a3b8a87 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -327,7 +327,7 @@
 		align-items: flex-start;
 		width: 66px;
 		height: 100%;
-		min-height: 38px;
+		min-height: 37px;
 		max-height: 103px;
 		margin: 15px 0 8px 1px;
 		color: var(--main-white);

From db3d323aa85e283f1422135334a819738c349568 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 16:30:10 +0200
Subject: [PATCH 11/12] fix(frontend): pwa scroll problem tm-567

---
 apps/frontend/src/libs/components/sidebar/styles.module.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 63a3b8a87..593da4f7d 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -104,7 +104,7 @@
 	flex: 1;
 	flex-direction: column;
 	padding-right: 9px;
-	overflow: hidden scroll;
+	overflow: hidden;
 }
 
 @media screen and (--large-screen) {
@@ -304,6 +304,10 @@
 	.content-container {
 		gap: 14px;
 	}
+
+	.content-wrapper {
+		overflow: hidden scroll;
+	}
 }
 
 @media screen and (--large-screen) and (height <= 665px) {

From d7568b683084ddf695174be9c25d39fd37df40f2 Mon Sep 17 00:00:00 2001
From: Maxim <toper.one111@gmail.com>
Date: Fri, 22 Mar 2024 21:30:44 +0200
Subject: [PATCH 12/12] refactor(frontend): remove duplicate burger button
 tm-567

---
 .../src/libs/components/portal/portal.tsx     | 13 ++++-
 .../libs/components/portal/styles.module.css  |  8 +++
 .../sidebar/libs/constants/constants.ts       |  1 +
 .../small-width-breakpoint.constant.ts        |  3 +
 .../src/libs/components/sidebar/sidebar.tsx   | 52 ++++++++++--------
 .../libs/components/sidebar/styles.module.css | 55 +++++++++++++------
 apps/frontend/src/libs/hooks/hooks.ts         |  1 +
 .../use-window-width/use-window-width.hook.ts | 21 +++++++
 8 files changed, 112 insertions(+), 42 deletions(-)
 create mode 100644 apps/frontend/src/libs/components/sidebar/libs/constants/constants.ts
 create mode 100644 apps/frontend/src/libs/components/sidebar/libs/constants/small-width-breakpoint.constant.ts
 create mode 100644 apps/frontend/src/libs/hooks/use-window-width/use-window-width.hook.ts

diff --git a/apps/frontend/src/libs/components/portal/portal.tsx b/apps/frontend/src/libs/components/portal/portal.tsx
index b0476b56f..c0a3dfb44 100644
--- a/apps/frontend/src/libs/components/portal/portal.tsx
+++ b/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);
diff --git a/apps/frontend/src/libs/components/portal/styles.module.css b/apps/frontend/src/libs/components/portal/styles.module.css
index fffec80de..24684e59a 100644
--- a/apps/frontend/src/libs/components/portal/styles.module.css
+++ b/apps/frontend/src/libs/components/portal/styles.module.css
@@ -4,3 +4,11 @@
 	left: 0;
 	z-index: 1000;
 }
+
+.fixed {
+	position: fixed;
+}
+
+.absolute {
+	position: absolute;
+}
diff --git a/apps/frontend/src/libs/components/sidebar/libs/constants/constants.ts b/apps/frontend/src/libs/components/sidebar/libs/constants/constants.ts
new file mode 100644
index 000000000..73cf0862c
--- /dev/null
+++ b/apps/frontend/src/libs/components/sidebar/libs/constants/constants.ts
@@ -0,0 +1 @@
+export { SMALL_WIDTH_BREAKPOINT } from "./small-width-breakpoint.constant.js";
diff --git a/apps/frontend/src/libs/components/sidebar/libs/constants/small-width-breakpoint.constant.ts b/apps/frontend/src/libs/components/sidebar/libs/constants/small-width-breakpoint.constant.ts
new file mode 100644
index 000000000..5dff8a2a5
--- /dev/null
+++ b/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 };
diff --git a/apps/frontend/src/libs/components/sidebar/sidebar.tsx b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
index d0b21737a..73f6d8dab 100644
--- a/apps/frontend/src/libs/components/sidebar/sidebar.tsx
+++ b/apps/frontend/src/libs/components/sidebar/sidebar.tsx
@@ -3,7 +3,12 @@ import {
 	checkIfUserHasPermissions,
 	getValidClassNames,
 } from "~/libs/helpers/helpers.js";
-import { useAppDispatch, useCallback, useState } from "~/libs/hooks/hooks.js";
+import {
+	useAppDispatch,
+	useCallback,
+	useState,
+	useWindowWidth,
+} from "~/libs/hooks/hooks.js";
 import { type MenuItem, type PagePermissions } from "~/libs/types/types.js";
 import {
 	type UserAuthResponseDto,
@@ -16,6 +21,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 = {
@@ -53,19 +60,24 @@ 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"
+		/>
+	);
+
 	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"],
@@ -78,17 +90,11 @@ 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"
-							/>
+							{windowWidth > SMALL_WIDTH_BREAKPOINT ? (
+								burgerButton
+							) : (
+								<Portal position="absolute">{burgerButton}</Portal>
+							)}
 							{menuItems.map(({ href, icon, label, pagePermissions }) => {
 								return (
 									handleCheckPermissions(pagePermissions) && (
diff --git a/apps/frontend/src/libs/components/sidebar/styles.module.css b/apps/frontend/src/libs/components/sidebar/styles.module.css
index 593da4f7d..3d159251b 100644
--- a/apps/frontend/src/libs/components/sidebar/styles.module.css
+++ b/apps/frontend/src/libs/components/sidebar/styles.module.css
@@ -26,8 +26,10 @@
 	flex-grow: 1;
 }
 
-.burger-button,
-.burger-button-in-flow {
+.burger-button {
+	position: fixed;
+	top: 30px;
+	left: 37px;
 	display: none;
 	min-height: auto;
 	padding: 4px;
@@ -36,12 +38,6 @@
 	border-radius: 0;
 }
 
-.burger-button {
-	position: fixed;
-	top: 30px;
-	left: 37px;
-}
-
 .menu-item {
 	display: flex;
 	gap: 14px;
@@ -174,6 +170,10 @@
 	}
 }
 
+.absolute {
+	position: absolute;
+}
+
 @media screen and (--small-screen) {
 	.sidebar.close {
 		width: 270px;
@@ -190,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 {
@@ -321,11 +341,8 @@
 		padding: 0;
 	}
 
-	.burger-button:has(~ .sidebar) {
-		display: none;
-	}
-
-	.sidebar:not(.open) .burger-button-in-flow {
+	.burger-button {
+		position: static;
 		display: flex;
 		flex-shrink: 1;
 		align-items: flex-start;
@@ -350,9 +367,15 @@
 	}
 }
 
-@media screen and (--small-screen) and (height <= 665px) {
-	.burger-button:has(~ .sidebar) {
-		display: block;
+@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);
 	}
 }
 
diff --git a/apps/frontend/src/libs/hooks/hooks.ts b/apps/frontend/src/libs/hooks/hooks.ts
index b6e0be57b..064d5bb83 100644
--- a/apps/frontend/src/libs/hooks/hooks.ts
+++ b/apps/frontend/src/libs/hooks/hooks.ts
@@ -5,6 +5,7 @@ export { useAppTitle } from "./use-app-titile/use-app-title.hooks.js";
 export { useHandleClickOutside } from "./use-handle-click-outside/use-handle-click-outside.hook.js";
 export { useHandleEscPress } from "./use-handle-esc-press/use-handle-esc-press.hook.js";
 export { usePagination } from "./use-pagination/use-pagination.hook.js";
+export { useWindowWidth } from "./use-window-width/use-window-width.hook.js";
 export { useCallback, useEffect, useMemo, useRef, useState } from "react";
 export { useController as useFormController } from "react-hook-form";
 export { useInView } from "react-intersection-observer";
diff --git a/apps/frontend/src/libs/hooks/use-window-width/use-window-width.hook.ts b/apps/frontend/src/libs/hooks/use-window-width/use-window-width.hook.ts
new file mode 100644
index 000000000..3559c4fa3
--- /dev/null
+++ b/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 };