fix sidebar English language

components/Header/Sidebar.tsx

@@ -6,6 +6,10 @@ import { useEffect, useRef } from 'react';
 import useFocusTrap from '../hooks/useFocusTrap';
 import { useTheme } from 'next-themes';
 import Link from 'next/link';
+import LocalSwitcher from './LocalSwitcher';
+import useTypedLocale from '@/hooks/useTypedLocale';
+import clsx from 'clsx';
+import { useTranslations } from 'next-intl';
 
 type NavigationItems = {
   title: string;
@@ -18,41 +22,41 @@ type NavItem = {
   text?: string;
 };
 
-const navigationItems: NavigationItems[] = [
-  {
-    title: 'Newbies',
-    text: 'פעם ראשונה בקוד פתוח',
-    linkPath: '/newbies',
-  },
-  {
-    title: 'Members',
-    text: 'מי שכבר התנסה בקוד פתוח',
-    linkPath: '/members',
-  },
-  {
-    title: 'Maintainers',
-    text: 'בעלי פרויקטים שרוצים להצטרף',
-    linkPath: '/maintainers',
-  },
-  {
-    title: 'מי אנחנו',
-    linkPath: '/about',
-  },
-  {
-    title: 'הפרויקטים',
-    linkPath: '/projects',
-  },
-];
-
 interface SidebarProps {
   isOpen: boolean;
   toggleSidebar: () => void;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
   const sidebarRef = useRef<HTMLDivElement | null>(null);
-
+  const localActive = useTypedLocale();
   const { theme } = useTheme();
+  const t = useTranslations('Components.sideBar');
+  const navigationItems: NavigationItems[] = [
+    {
+      title: 'Newbies',
+      text: 'פעם ראשונה בקוד פתוח',
+      linkPath: '/newbies',
+    },
+    {
+      title: 'Members',
+      text: 'מי שכבר התנסה בקוד פתוח',
+      linkPath: '/members',
+    },
+    {
+      title: 'Maintainers',
+      text: 'בעלי פרויקטים שרוצים להצטרף',
+      linkPath: '/maintainers',
+    },
+    {
+      title: 'מי אנחנו',
+      linkPath: '/about',
+    },
+    {
+      title: 'הפרויקטים',
+      linkPath: '/projects',
+    },
+  ];
 
   useEffect(() => {
     const handleOutsideClick = (event: MouseEvent) => {
@@ -83,14 +87,26 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
   return (
     <div
       ref={sidebarRef}
-      className={`fixed inset-y-0 right-0 z-50 bg-lightBg dark:bg-darkBg border-l border-l-blue-400 w-[75%] shadow-lg transform transition-transform ease-in-out duration-300 ${
-        isOpen ? '-translate-x-0' : 'translate-x-full'
-      }`}
+      className={clsx(
+        `fixed inset-y-0 z-50 bg-lightBg dark:bg-darkBg border-l
+         border-l-blue-400 w-[75%] shadow-lg transform transition-transform
+          ease-in-out duration-300`,
+        {
+          'left-0': localActive === 'en',
+          'right-0': localActive === 'he',
+          '-translate-x-0': isOpen,
+          '-translate-x-full': !isOpen && localActive === 'en',
+          'translate-x-full': !isOpen && localActive === 'he',
+        }
+      )}
     >
       {isOpen ? (
         <div className="p-5 flex flex-col gap-14">
           <div className="flex items-center justify-between">
-            <Darkmode />
+            <div className="flex gap-3 items-center">
+              <LocalSwitcher />
+              <Darkmode />
+            </div>
             <button onClick={toggleSidebar}>
               {theme === 'dark' ? (
                 <Image

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "autoprefixer": "10.4.14",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.0.0-rc12",
     "embla-carousel-react": "^8.0.0-rc12",
     "eslint": "8.43.0",

public/locales/en.json

@@ -168,6 +168,13 @@
       "firstParagraph": "It's worth trying our Questions & Answers section, and if the answer isn't there, we have the",
       "discordTitle": "Discord Channel",
       "secondParagraph": "with genuinely, the nicest people you'll ever meet, who are always willing to help anyone who needs it"
+    },
+    "sideBar": {
+      "newbies": "First time in Open Source",
+      "members": "already participated in Open Source",
+      "maintainers": "Project maintainers who wants to join",
+      "whoWeAre": "About us",
+      "theProjects": "The projects"
     }
   },
   "Header": {

public/locales/he.json

@@ -181,6 +181,13 @@
       "firstParagraph": "שווה לנסות את סקטור השאלות תשובות שלנו, ואם התשובה לא כאן, יש לנו את",
       "discordTitle": "ערוץ הדיסקורד",
       "secondParagraph": "עם אנשים באמת, אבל באמת, הכי נחמדים שיש ומוכנים לעזור לכל מי שרק צריך."
+    },
+    "sideBar": {
+      "newbies": "פעם ראשונה בקוד פתוח",
+      "members": "מי שכבר התנסה בקוד פתוח",
+      "maintainers": "בעלי פרויקטים שרוצים להצטרף",
+      "whoWeAre": "מי אנחנו",
+      "theProjects": "הפרויקטים"
     }
   },
   "Header": {