From d152a109f72d0ab8fc411eb418b55c21985bb4f3 Mon Sep 17 00:00:00 2001 From: devilkiller-ag Date: Wed, 8 Jan 2025 17:17:27 +0530 Subject: [PATCH 1/8] added langauge option in mobile navbar --- components/navigation/MobileNavMenu.tsx | 43 +++++++++++++++++++++++-- components/navigation/NavBar.tsx | 18 +++++++---- 2 files changed, 53 insertions(+), 8 deletions(-) diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx index 8b0ccd740374..4b62596fc444 100644 --- a/components/navigation/MobileNavMenu.tsx +++ b/components/navigation/MobileNavMenu.tsx @@ -19,13 +19,15 @@ interface MenuItem { interface MobileNavMenuProps { onClickClose?: () => void; + uniqueLangs: { key: string; text: string; value: string }[]; + changeLanguage: (locale: string, langPicker: boolean) => void; } /** * @description MobileNavMenu component for displaying a responsive navigation menu on mobile devices. * @param {MobileNavMenuProps} props - The props for the MobileNavMenu component. */ -export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenuProps) { +export default function MobileNavMenu({ onClickClose = () => {}, uniqueLangs, changeLanguage }: MobileNavMenuProps) { const [open, setOpen] = useState(null); /** @@ -104,7 +106,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu {open === 'community' && } -
showMenu('others')} data-testid='MobileNav-others'> +
showMenu('others')} data-testid='MobileNav-others'>

@@ -127,6 +129,43 @@ export default function MobileNavMenu({ onClickClose = () => {} }: MobileNavMenu

+
showMenu('language')}> +
+
+

+ + Language{' '} + + + + + +

+ {open === 'language' && + uniqueLangs.map((lang) => ( + + ))} +
+
+
diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx index d0fd2ca6fa02..5774770d3a8e 100644 --- a/components/navigation/NavBar.tsx +++ b/components/navigation/NavBar.tsx @@ -43,7 +43,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps /** * Retrieves unique language options based on the current path and i18nPaths configuration. * - * @returns {string[]} - An array of unique language options in uppercase. + * @returns {string[]} - An array of unique language options with first letter in uppercase. */ const getUniqueLangs = (): string[] => { let pathnameWithoutLocale = pathname; @@ -56,10 +56,10 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps // Filter unique languages based on i18nPaths that include the modified pathnameWithoutLocale const uniqueLangs = Object.keys(i18nPaths) .filter((lang) => i18nPaths[lang].includes(pathnameWithoutLocale)) - .map((lang) => lang.toUpperCase()); + .map((lang) => lang.charAt(0).toUpperCase() + lang.slice(1)); - // If no unique languages are found, default to ["EN"] - return uniqueLangs.length === 0 ? ['EN'] : uniqueLangs; + // If no unique languages are found, default to ["En"] + return uniqueLangs.length === 0 ? ['En'] : uniqueLangs; }; const uniqueLangs = getUniqueLangs().map((lang) => ({ @@ -147,7 +147,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps return (
-
+
{!hideLogo && (
@@ -247,7 +247,13 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
{/* Mobile menu, show/hide based on mobile menu state. */} - {mobileMenuOpen && setMobileMenuOpen(false)} />} + {mobileMenuOpen && ( + setMobileMenuOpen(false)} + uniqueLangs={uniqueLangs} + changeLanguage={changeLanguage} + /> + )}
); } From 57955e1ba04c7a7d323437a2eda90deb6d6c01ab Mon Sep 17 00:00:00 2001 From: devilkiller-ag Date: Wed, 8 Jan 2025 18:03:06 +0530 Subject: [PATCH 2/8] updated locale names --- next-i18next.config.js | 6 +++--- public/locales/{de => deutsch}/common.json | 0 public/locales/{de => deutsch}/landing-page.json | 0 public/locales/{de => deutsch}/tools.json | 0 public/locales/{en => english}/common.json | 0 public/locales/{en => english}/landing-page.json | 0 public/locales/{en => english}/tools.json | 0 utils/getStatic.ts | 2 +- utils/i18n.ts | 8 ++++---- 9 files changed, 8 insertions(+), 8 deletions(-) rename public/locales/{de => deutsch}/common.json (100%) rename public/locales/{de => deutsch}/landing-page.json (100%) rename public/locales/{de => deutsch}/tools.json (100%) rename public/locales/{en => english}/common.json (100%) rename public/locales/{en => english}/landing-page.json (100%) rename public/locales/{en => english}/tools.json (100%) diff --git a/next-i18next.config.js b/next-i18next.config.js index 2848266d6554..85742bf6bae7 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -1,10 +1,10 @@ module.exports = { i18n: { - locales: ['en', 'de'], - defaultLocale : 'en', + locales: ['english', 'deutsch'], + defaultLocale : 'english', namespaces: ['landing-page', 'common', 'tools'], defaultNamespace: 'landing-page', react: { useSuspense: false },// this line }, - + }; diff --git a/public/locales/de/common.json b/public/locales/deutsch/common.json similarity index 100% rename from public/locales/de/common.json rename to public/locales/deutsch/common.json diff --git a/public/locales/de/landing-page.json b/public/locales/deutsch/landing-page.json similarity index 100% rename from public/locales/de/landing-page.json rename to public/locales/deutsch/landing-page.json diff --git a/public/locales/de/tools.json b/public/locales/deutsch/tools.json similarity index 100% rename from public/locales/de/tools.json rename to public/locales/deutsch/tools.json diff --git a/public/locales/en/common.json b/public/locales/english/common.json similarity index 100% rename from public/locales/en/common.json rename to public/locales/english/common.json diff --git a/public/locales/en/landing-page.json b/public/locales/english/landing-page.json similarity index 100% rename from public/locales/en/landing-page.json rename to public/locales/english/landing-page.json diff --git a/public/locales/en/tools.json b/public/locales/english/tools.json similarity index 100% rename from public/locales/en/tools.json rename to public/locales/english/tools.json diff --git a/utils/getStatic.ts b/utils/getStatic.ts index 974ff691920f..48eb1d5d3a89 100644 --- a/utils/getStatic.ts +++ b/utils/getStatic.ts @@ -29,7 +29,7 @@ export const getStaticPaths = () => ({ * @returns An object containing the internationalization props. */ export async function getI18nProps(ctx: any, ns = ['common']) { - const locale = ctx?.params?.lang ? ctx.params.lang : 'en'; + const locale = ctx?.params?.lang ? ctx.params.lang : 'english'; const props = { ...(await serverSideTranslations(locale, ns)) }; diff --git a/utils/i18n.ts b/utils/i18n.ts index 012b990d4efa..e656899991d9 100644 --- a/utils/i18n.ts +++ b/utils/i18n.ts @@ -5,19 +5,19 @@ interface I18nPaths { } export const i18nPaths: I18nPaths = { - en: [ + english: [ '', // Homepage Route '/tools/cli', '/newsletter' ], - de: [ + deutsch: [ '', // Homepage Route '/tools/cli', '/newsletter' ] }; -export const languages = ['en', 'de']; -export const defaultLanguage = 'en'; +export const languages = ['english', 'deutsch']; +export const defaultLanguage = 'english'; export { useTranslation }; From 6879ec8d1c2e5abae4d0d4ec6ab2a9383045e274 Mon Sep 17 00:00:00 2001 From: devilkiller-ag Date: Wed, 8 Jan 2025 18:37:33 +0530 Subject: [PATCH 3/8] added functionality to highlight current language --- components/languageSelector/LanguageSelect.tsx | 2 +- components/navigation/MobileNavMenu.tsx | 10 ++++++++-- components/navigation/NavBar.tsx | 7 ++++--- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/components/languageSelector/LanguageSelect.tsx b/components/languageSelector/LanguageSelect.tsx index d2d4f0750514..d815992adf31 100644 --- a/components/languageSelector/LanguageSelect.tsx +++ b/components/languageSelector/LanguageSelect.tsx @@ -16,7 +16,7 @@ export default function LanguageSelect({ className = '', onChange = () => {}, op data-testid='Select-form' onChange={(ev) => onChange(ev.target.value)} className={twMerge( - `form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}` + `form-select h-full px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}` )} value={selected} > diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx index 4b62596fc444..08abae518e54 100644 --- a/components/navigation/MobileNavMenu.tsx +++ b/components/navigation/MobileNavMenu.tsx @@ -20,6 +20,7 @@ interface MenuItem { interface MobileNavMenuProps { onClickClose?: () => void; uniqueLangs: { key: string; text: string; value: string }[]; + currentLanguage: string; changeLanguage: (locale: string, langPicker: boolean) => void; } @@ -27,7 +28,12 @@ interface MobileNavMenuProps { * @description MobileNavMenu component for displaying a responsive navigation menu on mobile devices. * @param {MobileNavMenuProps} props - The props for the MobileNavMenu component. */ -export default function MobileNavMenu({ onClickClose = () => {}, uniqueLangs, changeLanguage }: MobileNavMenuProps) { +export default function MobileNavMenu({ + onClickClose = () => {}, + uniqueLangs, + currentLanguage, + changeLanguage +}: MobileNavMenuProps) { const [open, setOpen] = useState(null); /** @@ -157,7 +163,7 @@ export default function MobileNavMenu({ onClickClose = () => {}, uniqueLangs, ch