From 3e41b359c5a07027c0fc5fc5afdb0565bd20a7e1 Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Mon, 30 Jun 2025 21:21:17 +0530
Subject: [PATCH] feat: changed layout to absolute

---
 .../src/layouts/ProjectLayout/ProjectLayout.tsx   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx b/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
index cc6c2edcb..e4054a37c 100644
--- a/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
@@ -3,6 +3,7 @@ import { faDotCircle, faMobile, faWindowMaximize } from "@fortawesome/free-solid
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet, useLocation } from "@tanstack/react-router";
 import { motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
 
 import { ShouldWrap } from "@app/components/utilities/ShouldWrapComponent";
 import {
@@ -58,8 +59,11 @@ export const ProjectLayout = () => {
   return (
     <>
       <div
-        className="dark hidden w-full flex-col overflow-x-hidden md:flex"
-        style={{ height: "calc(100vh - 3rem)" }}
+        className="dark relative hidden w-full flex-col overflow-x-hidden md:flex"
+        style={{
+          height: "calc(100vh - 3rem)",
+          paddingLeft: !(sidebarStyle === SidebarStyle.Expanded) ? MIN_SIDEBAR_SIZE : "0px"
+        }}
       >
         <div className="flex flex-grow flex-col overflow-y-auto overflow-x-hidden md:flex-row">
           <motion.div
@@ -68,11 +72,14 @@ export const ProjectLayout = () => {
             animate={{ x: 0 }}
             exit={{ x: -150 }}
             transition={{ duration: 0.2 }}
-            style={{ width: minSidebarWidth }}
+            style={{ width: minSidebarWidth, height: "calc(100vh - 3rem)" }}
             whileHover={{
               width: maxSidebarWidth
             }}
-            className="dark group w-full overflow-hidden border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60"
+            className={twMerge(
+              "dark group z-10 w-full overflow-hidden border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60",
+              !(sidebarStyle === SidebarStyle.Expanded) && "absolute bottom-0 left-0"
+            )}
           >
             <nav className="items-between flex h-full flex-col justify-between">
               <Menu>