another step for constructing base project

client/src/layout/PrivateLayout.tsx

@@ -1,45 +1,23 @@
+'use client';
 import { FunctionComponent, PropsWithChildren } from 'react';
+import { useTranslations } from 'next-intl';
 import { LinkToPage } from '@/utils';
 import TopBarAndSideBarLayout from './TopBarAndSideBarLayout';
 
-const TITLE_PRIVATE = 'Balinyaar'; // Title for pages after authentication
-
-/**
- * SideBar navigation items with links for Private Layout
- */
-const SIDE_BAR_ITEMS: Array<LinkToPage> = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: 'home',
-  },
-  {
-    title: 'My Profile',
-    path: '/me',
-    icon: 'account',
-  },
-  {
-    title: '404',
-    path: '/wrong-url',
-    icon: 'error',
-  },
-  {
-    title: 'About',
-    path: '/about',
-    icon: 'info',
-  },
-];
-
 /**
  * Renders "Private Layout" composition
  * @layout PrivateLayout
  */
 const PrivateLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
-  const title = TITLE_PRIVATE;
-  document.title = title; // Also Update Tab Title  // TODO: Do we need this? Move it to useEffect()?
+  const t = useTranslations('nav');
+
+  const sidebarItems: Array<LinkToPage> = [
+    { title: t('home'), path: '/', icon: 'home' },
+    { title: '404', path: '/wrong-url', icon: 'error' },
+  ];
 
   return (
-    <TopBarAndSideBarLayout sidebarItems={SIDE_BAR_ITEMS} title={title} variant="sidebarPersistentOnDesktop">
+    <TopBarAndSideBarLayout sidebarItems={sidebarItems} title="Balinyaar" variant="sidebarPersistentOnDesktop">
       {children}
       {/* <Stack component="footer">Copyright &copy; </Stack> */}
     </TopBarAndSideBarLayout>