MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Sidebar stick to left. Fit content for different desktop viewports

Browse Source
This commit is contained in:
Hafid Nur
2025-03-27 23:17:43 +07:00
parent a4ca53004f
commit 46f3bd6014
5 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/src/app/accounts/layout.tsx
+2 -2
View File
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => { export const AppLayout: FC = (): ReactElement => {
return ( return (
<div className="bg-primary-50 min-h-screen flex justify-center"> <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 /> <BackofficeSidebar />
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
apps/backoffice/src/app/dashboard/layout.tsx
+2 -2
View File
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => { export const AppLayout: FC = (): ReactElement => {
return ( return (
<div className="bg-primary-50 min-h-screen flex justify-center"> <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 /> <BackofficeSidebar />
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
apps/backoffice/src/app/dashboard/page.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export const Components: FC = (): ReactElement => {
<img <img
src="gacha.png" src="gacha.png"
alt="" 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> </div>
</main> </main>
apps/backoffice/src/app/transactions/layout.tsx
+2 -2
View File
@@ -5,9 +5,9 @@ import { BackofficeSidebar } from '@imphnen-frontend-service/ui/organisms';
export const AppLayout: FC = (): ReactElement => { export const AppLayout: FC = (): ReactElement => {
return ( return (
<div className="bg-primary-50 min-h-screen flex justify-center"> <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 /> <BackofficeSidebar />
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto lg:max-w-[1000px] mx-auto">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
const isActive = (path: string) => location.pathname.includes(path); const isActive = (path: string) => location.pathname.includes(path);
return ( 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"> <div className="flex flex-col gap-20 justify-between items-center">
{/* Logo */} {/* Logo */}
<img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" /> <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />