From c374c97e66bcc1e551890d59f0f6184da0a15748 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Thu, 27 Mar 2025 23:15:11 +0700
Subject: [PATCH] fix: Sidebar stick to left. Fit content for different desktop
 viewports

---
 apps/backoffice/src/app/accounts/layout.tsx                   | 4 ++--
 apps/backoffice/src/app/dashboard/layout.tsx                  | 4 ++--
 apps/backoffice/src/app/dashboard/page.tsx                    | 2 +-
 apps/backoffice/src/app/transactions/layout.tsx               | 4 ++--
 .../src/organisms/backoffice-sidebar/backoffice-sidebar.tsx   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/backoffice/src/app/accounts/layout.tsx b/apps/backoffice/src/app/accounts/layout.tsx
index 423168f..d68b388 100644
--- a/apps/backoffice/src/app/accounts/layout.tsx
+++ b/apps/backoffice/src/app/accounts/layout.tsx
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>
diff --git a/apps/backoffice/src/app/dashboard/layout.tsx b/apps/backoffice/src/app/dashboard/layout.tsx
index 423168f..d68b388 100644
--- a/apps/backoffice/src/app/dashboard/layout.tsx
+++ b/apps/backoffice/src/app/dashboard/layout.tsx
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx
index f360744..d1f76c6 100644
--- a/apps/backoffice/src/app/dashboard/page.tsx
+++ b/apps/backoffice/src/app/dashboard/page.tsx
@@ -101,7 +101,7 @@ export const Components: FC = (): ReactElement => {
         <img
           src="gacha.png"
           alt=""
-          className="rounded-lg min-w-[436px] h-auto object-cover"
+          className="rounded-lg hidden xl:block xl:min-w-[436px] h-auto object-cover"
         />
       </div>
     </main>
diff --git a/apps/backoffice/src/app/transactions/layout.tsx b/apps/backoffice/src/app/transactions/layout.tsx
index 423168f..d68b388 100644
--- a/apps/backoffice/src/app/transactions/layout.tsx
+++ b/apps/backoffice/src/app/transactions/layout.tsx
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
 export const AppLayout: FC = (): ReactElement => {
   return (
     <div className="bg-primary-50 min-h-screen flex justify-center">
-      <div className="bg-primary-50 min-h-screen max-w-[1280px] w-full flex">
+      <div className="bg-primary-50 min-h-screen w-full flex">
         <BackofficeSidebar />
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto lg:max-w-[1000px] mr-auto">
           <Outlet />
         </div>
       </div>
diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
index 4824a66..b1aa794 100644
--- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
@@ -14,7 +14,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
   const isActive = (path: string) => location.pathname.includes(path);
 
   return (
-    <aside className="w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
+    <aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
       <div className="flex flex-col gap-20 justify-between items-center">
         {/* Logo */}
         <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />