menu translations and ability to add new translations using the base translation

components/sidebar.tsx

@@ -6,10 +6,13 @@ import sidemenu, { footerMenu } from './sidemenuData.js'; // Move sidemenu data
 import axiosInstance from "src/axiosSecure";
 import common from "src/helpers/common";
 import LanguageSwitcher from "./languageSwitcher";
+import { useTranslations } from 'next-intl';
 //get package version from package.json
 const packageVersion = require('../package.json').version;
 
 function SidebarMenuItem({ item, session, isSubmenu }) {
+  // const tMenu = useTranslations('menu');
+  const t = useTranslations('common');
   const router = useRouter();
   const isActive = router.pathname.includes(item.url);
 
@@ -92,6 +95,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
   const { data: session, status } = useSession();
   const sidebarWidth = 226; // Simplify by using a constant
   const sidebarRef = useRef(null);
+  const t = useTranslations('menu');
   //const [locations, setLocations] = useState([]);
 
 
@@ -137,6 +141,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
         <div className="flex flex-col justify-between pb-4">
           <nav>
             {sidemenu.map((item, index) => (
+              item.text = t(item.id) || item.text, // Use the translation if available
               <SidebarMenuItem key={index} item={item} session={session} />
             ))}
             <hr className="my-3 border-gray-200 dark:border-gray-600" />
@@ -164,14 +169,16 @@ function UserSection({ session }) {
 }
 
 function SignInButton() {
+  const t = useTranslations('common');
   return (
     <div className="items-center py-2 font-bold" onClick={() => signIn()}>
-      <button>Впишете се</button>
+      <button>{t('login')}</button>
     </div>
   );
 }
 
 function UserDetails({ session }) {
+  const t = useTranslations('common');
   return (
     <>
       <hr className="m-0" />
@@ -182,7 +189,7 @@ function UserDetails({ session }) {
         <div className="ml-3 overflow-hidden">
           <p className="mx-1 mt-1 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
           <p className="mx-1 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
-          <a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>Изход</a>
+          <a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>{t('logout')}</a>
         </div>
       </div>
     </>