From a75009c0df19d79460eb6d43356ebc72f12c3561 Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Mon, 13 May 2024 19:51:33 +0700
Subject: [PATCH] Update route check and add PageBody wrapper

Updated the `isRouteActive` check in the sidebar component to ensure it doesn't falsely identify nested routes as active. Additionally, introduced a `PageBody` wrapper in the account page component for consistent styling and padding.
---
 apps/web/app/admin/accounts/[id]/page.tsx | 7 ++++++-
 packages/ui/src/makerkit/sidebar.tsx      | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/admin/accounts/[id]/page.tsx b/apps/web/app/admin/accounts/[id]/page.tsx
index 79bb0a8eb..086b2580a 100644
--- a/apps/web/app/admin/accounts/[id]/page.tsx
+++ b/apps/web/app/admin/accounts/[id]/page.tsx
@@ -3,6 +3,7 @@ import { cache } from 'react';
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { PageBody } from '@kit/ui/page';
 
 interface Params {
   params: {
@@ -21,7 +22,11 @@ export const generateMetadata = async ({ params }: Params) => {
 async function AccountPage({ params }: Params) {
   const account = await loadAccount(params.id);
 
-  return <AdminAccountPage account={account} />;
+  return (
+    <PageBody className={'py-4'}>
+      <AdminAccountPage account={account} />
+    </PageBody>
+  );
 }
 
 export default AdminGuard(AccountPage);
diff --git a/packages/ui/src/makerkit/sidebar.tsx b/packages/ui/src/makerkit/sidebar.tsx
index a15405fe4..6effbb6b2 100644
--- a/packages/ui/src/makerkit/sidebar.tsx
+++ b/packages/ui/src/makerkit/sidebar.tsx
@@ -159,7 +159,7 @@ export function SidebarItem({
   const { collapsed } = useContext(SidebarContext);
   const currentPath = usePathname() ?? '';
 
-  const active = isRouteActive(path, currentPath, end);
+  const active = isRouteActive(path, currentPath, end ?? false);
   const variant = active ? 'secondary' : 'ghost';
   const size = collapsed ? 'icon' : 'sm';
 
@@ -254,4 +254,4 @@ export function SidebarNavigation({
       })}
     </>
   );
-}
\ No newline at end of file
+}