Add language change feature in navigation bar.

frontend/Site/src/app/components/common/icon.ts

@@ -17,7 +17,8 @@ import {
     FaAnglesLeft,
     FaAnglesRight,
     FaAngleDown,
-    FaRegCircleXmark    
+    FaRegCircleXmark,
+    FaCheck
     } from "react-icons/fa6";
 
 
@@ -40,3 +41,4 @@ import {
   export const AnglesRightIcon = FaAnglesRight;
   export const ArrowDownIcon = FaAngleDown ;
   export const CircleXMarkIcon = FaRegCircleXmark;
+  export const TickIcon = FaCheck;

frontend/Site/src/app/components/language/LanguageSwitcher.css

@@ -0,0 +1,87 @@
+.custom-toggle {
+  color: var(--typography-color-primary-invert) !important;
+  font: var(--typography-regular-large-body);
+  height: 31px;
+}
+
+.custom-toggle:first-child:active {
+  border-color: transparent !important;
+}
+
+.custom-menu {
+  border-radius: var(--surface-border-radius-medium) !important;
+  padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
+  gap: 16px;
+  width: 272px;
+  height: 370px;
+  box-shadow: var(--shadow-medium);
+  background-color: var(--surface-background-white) !important;
+}
+
+.custom-item {
+  padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) !important;
+  gap: var(--layout-margin-medium);
+  color: var(--typography-color-primary) !important;
+  height: 43px;
+  width: 272px !important;
+  font: var(--typography-regular-body);
+}
+
+.custom-item:hover {
+    background-color: var(--surface-secondary-hover) !important;
+}
+
+.custom-item-first-child {
+  padding: var(--layout-padding-small) var(--layout-padding-medium) var(--layout-padding-small) var(--layout-padding-medium) !important;
+  gap: var(--layout-margin-medium);
+  width: 272px !important;
+  height: 43px;
+}
+
+.custom-item-first-child:hover {
+    background-color: var(--surface-secondary-hover) !important;
+}
+
+.custom-item-label {
+  font: var(--typography-regular-label);
+  color: var(--typography-color-secondary) !important;
+  height: 21px;
+}
+
+/* .custom-item:active {background-color: #EDEBE9 !important;}
+.custom-item-first-child:active {background-color: #EDEBE9 !important;} */
+
+.tick-icon {
+  color: var(--icons-icons-primary);
+  width: 14px;
+  height: 27px;
+  float: right;
+}
+
+@media screen and (max-width: 767px){
+    .custom-menu {
+        border-radius: 0px 0px var(--surface-border-radius-medium) var(--surface-border-radius-medium) !important;
+        padding: var(--layout-padding-large) !important;
+        gap: 16px;
+        width: 320px;
+        height: 498px;
+        box-shadow: var(--shadow-medium);
+        background-color: var(--surface-background-white) !important;
+      }
+
+      .custom-item {
+        padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
+        gap: var(--layout-margin-medium);
+        color: var(--typography-color-primary) !important;
+        height: 59px;
+        width: 272px !important;
+        font: var(--typography-regular-body);
+      }
+
+      .custom-item-first-child {
+        padding: var(--layout-padding-medium) 0px var(--layout-padding-medium) 0px !important;
+        gap: var(--layout-margin-medium);
+        width: 272px !important;
+
+      }
+}

frontend/Site/src/app/components/language/LanguageSwitcher.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import Dropdown from "react-bootstrap/Dropdown";
+import "./LanguageSwitcher.css";
+import { TickIcon } from "../common/icon";
+
+const LanguageSwitcher = () => {
+  // Define available languages
+  const LANGUAGE = [
+    {
+      key: "ar",
+      value: "العربية (Arabic)",
+    },
+    {
+      key: "zh-CN",
+      value: "简体字 (Chinese - Simplified)",
+    },
+    {
+      key: "en",
+      value: "English",
+    },
+    {
+      key: "es",
+      value: "Español (Spanish)",
+    },
+    {
+      key: "fr",
+      value: "Français (French)",
+    },
+    {
+      key: "it",
+      value: "Italiano (Italian)",
+    },
+    {
+      key: "ru",
+      value: "Pусский (Russian)",
+    },
+  ];
+
+  // Initialize current language state with English as default
+  const [currentLanguage, setCurrentLanguage] = useState("en");
+
+  // const { i18n } = useTranslation();
+  // const currentLanguage = i18n.language || 'en';
+
+  // Function to handle language change
+  const changeLanguage = (lng: string) => {
+    setCurrentLanguage(lng);
+    // i18n.changeLanguage(lng);
+  };
+
+  return (
+    <>
+      {/* Dropdown component for language selection */}
+      <Dropdown className="justify-content-end " aria-label="Language Selector">
+        {/* Dropdown toggle button */}
+        <Dropdown.Toggle
+          id="language-dropdown"
+          variant=""
+          className="custom-toggle"
+          aria-label="Language Menu"
+        >
+          {/* Display current selected language */}
+          {currentLanguage.toUpperCase()}
+        </Dropdown.Toggle>
+
+        {/* Dropdown menu */}
+        <Dropdown.Menu
+          className="custom-menu"
+          role="menu"
+          aria-labelledby="language-dropdown"
+        >
+          {/* Language options */}
+          <div role="none">
+            {/* Default option */}
+            <Dropdown.Item
+              className="custom-item-first-child"
+              disabled
+              role="menuitem"
+            >
+              <div className="custom-item-label">Please select a language:</div>
+            </Dropdown.Item>
+          </div>
+
+          {/* Map through available languages */}
+          {LANGUAGE &&
+            LANGUAGE.map((lang) => (
+              <Dropdown.Item
+                onClick={() => changeLanguage(lang.key)}
+                className="custom-item"
+                role="menuitem"
+                aria-label={lang.value}
+                aria-current={currentLanguage === lang.key ? "true" : undefined}
+              >
+                {/* Display language name */}
+                <span>{lang.value}</span>
+
+                {/* Display tick icon if current language is selected */}
+                {currentLanguage === lang.key && (
+                  <TickIcon className="tick-icon" />
+                )}
+              </Dropdown.Item>
+            ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </>
+  );
+};
+
+export default LanguageSwitcher;

frontend/Site/src/app/components/navigation/Header.tsx

@@ -7,6 +7,7 @@ import { BarsIcon } from "../common/icon";
 import { useState } from "react";
 import MobileNavMenu from "./MobileNavMenu";
 import { ArrowDownIcon } from "../common/icon";
+import LanguageSwitcher from "../language/LanguageSwitcher";
 
 const Header = () => {
 
@@ -26,8 +27,7 @@ const Header = () => {
         <h1 className="siteName">SITE</h1>
       </div>
       <div className="header-right-corner-section m-2">
-        <div >EN <ArrowDownIcon/></div>
-
+        <LanguageSwitcher/>
         <button
           className="navbar-toggler display-upto-medium"
           type="button"