3102 feature/implement responsive vertical sidebar with expand/collap…

…se (#3189)

* feat(web): [Vertical Sidebar] add vertical sidebar, responsive sidebar with expand and collapse feature

* refactor(web): [Vertical Sidebar] fix header nav height on setting pages and refactor the next.js image domains

* refactor(web): [Vertical Sidebar] add vertical-sidebar on all pages as layout and fix link spacing

* refactor(web): [Vertical Sidebar] correct spaces in sub vertical sidebar links

* fix: fix spelling errors

* fix(web): deepscan errors

* refactor(web): [Vertical Sidebar] remove unused icons

* refactor(web): [Vertical Sidebar] add next-link to app-sidebar

* fix(web): modal issue

* refactor(web): Consider modernizing imports and centralizing constants and Optimize state initialization to prevent hydration flicker.

* refactor(web): Update apps/web/components/ui/sidebar.tsx

* style(web): Consolidate base layer definitions in globals.css

* fix(web): build error

.cspell.json

@@ -4,25 +4,38 @@
 	"caseSensitive": false,
 	"$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
 	"words": [
-		"Unplan",
-		"nivo",
 		"accepte",
 		"Accordian",
 		"adipiscing",
 		"aliqua",
+		"alldays",
 		"amet",
 		"Andross",
 		"animatable",
+		"apicivo",
+		"apicw",
+		"apida",
+		"apidemo",
+		"apidemocivo",
+		"apidemocw",
+		"apidemoda",
+		"apidemodt",
+		"apidemodts",
 		"apidev",
 		"apisauce",
 		"apistage",
+		"apistagecivo",
+		"apistagecw",
+		"apistageda",
+		"apistagedt",
+		"apistagedts",
 		"appdev",
 		"appkey",
 		"applesimutils",
 		"APPSTORE",
 		"arrowleft",
+		"asar",
 		"asel",
-		"alldays",
 		"Authentificate",
 		"authjs",
 		"barcodes",
@@ -33,8 +46,6 @@
 		"borde",
 		"Bowser",
 		"Btns",
-		"Konviser",
-		"Ruslan",
 		"Bugsnag",
 		"buildjet",
 		"cacheable",
@@ -68,6 +79,7 @@
 		"commitlint",
 		"comparision",
 		"comparization",
+		"compat",
 		"compodoc",
 		"consectetur",
 		"containerd",
@@ -85,6 +97,7 @@
 		"Desabled",
 		"Descrption",
 		"deserunt",
+		"digitaloceanspaces",
 		"dimesions",
 		"discrepenancy",
 		"dolor",
@@ -100,6 +113,7 @@
 		"dvalue",
 		"Efate",
 		"eiusmod",
+		"electronmon",
 		"elit",
 		"ellipsize",
 		"embla",
@@ -108,6 +122,7 @@
 		"Entra",
 		"Entypo",
 		"envalid",
+		"Environtment",
 		"errr",
 		"everco",
 		"everteamsdesktop",
@@ -122,10 +137,10 @@
 		"Filder",
 		"filtmembers",
 		"firstname",
-		"fullcalendar",
 		"flaticon",
 		"fomated",
 		"Formated",
+		"fullcalendar",
 		"FULLNAME",
 		"Funtion",
 		"Galery",
@@ -152,6 +167,7 @@
 		"hwba",
 		"hyperscript",
 		"ianatz",
+		"icns",
 		"icnsutils",
 		"Icontent",
 		"imagebutton",
@@ -165,6 +181,7 @@
 		"inital",
 		"Instanciate",
 		"insted",
+		"intefaces",
 		"Intervall",
 		"invdate",
 		"Invitatio",
@@ -191,16 +208,20 @@
 		"keyrings",
 		"Kiritimati",
 		"Kolkata",
+		"Konviser",
 		"Kosrae",
 		"Koyeb",
-		"Krisp",
 		"krisp",
+		"Krisp",
 		"labore",
+		"languagedetector",
 		"Lask",
 		"lastest",
 		"lastlog",
 		"lgcard",
 		"libappindicator",
+		"livekit",
+		"livekitroom",
 		"Lngs",
 		"Loadtasks",
 		"localstorage",
@@ -209,10 +230,10 @@
 		"longpress",
 		"Lorem",
 		"lucide",
-		"livekit",
-		"livekitroom",
+		"mainconfig",
 		"mappagination",
 		"mathieudutour",
+		"maximizable",
 		"Mazen",
 		"Metral",
 		"MICROSOFTENTRAID",
@@ -224,12 +245,14 @@
 		"Neue",
 		"nextjs",
 		"nimg",
+		"nivo",
 		"nocheck",
 		"nodesource",
 		"nodistro",
 		"noreferrer",
 		"Northflank",
 		"Notif",
+		"nsis",
 		"Opena",
 		"opentelemetry",
 		"Ordereds",
@@ -238,12 +261,16 @@
 		"otlp",
 		"outclick",
 		"overlapper",
+		"pageleave",
+		"pageview",
+		"pageviews",
 		"Pago",
 		"pako",
 		"paren",
 		"Parens",
 		"passcode",
 		"payperiod",
+		"Periode",
 		"Permisson",
 		"Personnal",
 		"phraseapp",
@@ -252,7 +279,10 @@
 		"plan",
 		"plasmo",
 		"plasmohq",
+		"pmmmwh",
 		"popperjs",
+		"posthog",
+		"POSTHOG",
 		"Pourtcent",
 		"prebuild",
 		"precommit",
@@ -272,11 +302,13 @@
 		"RESERVERD",
 		"Rickert",
 		"runned",
+		"Ruslan",
 		"Screenshoot",
 		"screenshoots",
 		"SCREENSHOOTS",
 		"screenstatus",
 		"sentryclirc",
+		"serverweb",
 		"setrole",
 		"Settingfilter",
 		"settingsCloseButton",
@@ -315,9 +347,11 @@
 		"taskid",
 		"taskstatus",
 		"tblr",
+		"teamsupercell",
 		"teamtask",
 		"tempor",
 		"testid",
+		"timegrid",
 		"Timesheet",
 		"Timesheets",
 		"Timeslot",
@@ -331,7 +365,6 @@
 		"Transpiles",
 		"tsbuildinfo",
 		"typeof",
-		"timegrid",
 		"uicolors",
 		"uidotdev",
 		"UIUX",
@@ -340,6 +373,7 @@
 		"unhang",
 		"unimodules",
 		"unoffic",
+		"Unplan",
 		"UPWORK",
 		"usehooks",
 		"Uturn",
@@ -350,7 +384,11 @@
 		"Verifiy",
 		"VERSONS",
 		"vertificalline",
+		"vhidden",
+		"WARNING️",
 		"wasabisys",
+		"webm",
+		"webp",
 		"wght",
 		"withteam",
 		"worksace",
@@ -363,29 +401,22 @@
 		"xlcard",
 		"xlight",
 		"yellowbox",
-		"vhidden",
-		"POSTHOG",
-		"posthog",
-		"pageviews",
-		"pageleave",
-		"pageview",
-		"serverweb",
-		"intefaces",
-		"Environtment",
-		"asar",
-		"icns",
-		"nsis",
-		"WARNING️",
-		"Periode",
-		"maximizable",
-		"mainconfig",
-		"electronmon",
-		"languagedetector",
-		"teamsupercell",
-		"pmmmwh",
-		"compat",
-		"webm",
-		"webp"
+		"twing",
+		"gitops",
+		"autorun",
+		"locutus",
+		"X",
+		"offcanvas",
+		"nums",
+		"Elipssis",
+		"evereq",
+		"everteamswebserver",
+		"expanded",
+		"expanded",
+		" X",
+		" X ",
+		"X ",
+		"collapsable"
 	],
 	"useGitignore": true,
 	"ignorePaths": [

apps/web/app/[locale]/page-component.tsx

@@ -84,7 +84,7 @@ function MainPage() {
 								)}
 								onResize={(size) => setHeaderSize(size)}
 							>
-								<div className="sticky z-50 bg-white dark:bg-dark-high">
+								<div className="sticky z-40 bg-white dark:bg-dark-high">
 									<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
 										<div className="mx-8-container pt-6 !px-0 flex flex-row items-start justify-between ">
 											<div className="flex items-center justify-center h-10 gap-8">