diff --git a/packages/app-client/src/locales/de.json b/packages/app-client/src/locales/de.json
index fc245471..80957031 100644
--- a/packages/app-client/src/locales/de.json
+++ b/packages/app-client/src/locales/de.json
@@ -9,6 +9,7 @@
},
"navbar": {
"new-note": "Neue Notiz",
+ "github": "GitHub",
"theme": {
"light-mode": "Light mode",
"dark-mode": "Dark mode",
diff --git a/packages/app-client/src/locales/en.json b/packages/app-client/src/locales/en.json
index 4f8cf2ea..be17fd6c 100644
--- a/packages/app-client/src/locales/en.json
+++ b/packages/app-client/src/locales/en.json
@@ -9,7 +9,10 @@
},
"navbar": {
"new-note": "New note",
+ "github": "GitHub",
+ "language": "Language",
"theme": {
+ "theme": "Theme",
"light-mode": "Light mode",
"dark-mode": "Dark mode",
"system-mode": "System"
diff --git a/packages/app-client/src/locales/es.json b/packages/app-client/src/locales/es.json
index 11f5dc00..51314def 100644
--- a/packages/app-client/src/locales/es.json
+++ b/packages/app-client/src/locales/es.json
@@ -9,6 +9,7 @@
},
"navbar": {
"new-note": "Nueva nota",
+ "github": "GitHub",
"theme": {
"light-mode": "Modo claro",
"dark-mode": "Modo oscuro",
diff --git a/packages/app-client/src/locales/fr.json b/packages/app-client/src/locales/fr.json
index 3d0080fa..03f471e6 100644
--- a/packages/app-client/src/locales/fr.json
+++ b/packages/app-client/src/locales/fr.json
@@ -9,6 +9,7 @@
},
"navbar": {
"new-note": "Nouvelle note",
+ "github": "GitHub",
"theme": {
"light-mode": "Mode clair",
"dark-mode": "Mode sombre",
diff --git a/packages/app-client/src/locales/ru.json b/packages/app-client/src/locales/ru.json
index ec7c0b0c..36c437d2 100644
--- a/packages/app-client/src/locales/ru.json
+++ b/packages/app-client/src/locales/ru.json
@@ -9,6 +9,7 @@
},
"navbar": {
"new-note": "Новая заметка",
+ "github": "GitHub",
"theme": {
"light-mode": "Светлая тема",
"dark-mode": "Темная тема",
@@ -135,4 +136,4 @@
"label": "Скопировать в буфер обмена",
"success": "Скопировано"
}
-}
+}
diff --git a/packages/app-client/src/modules/ui/components/navbar-sub-menus.tsx b/packages/app-client/src/modules/ui/components/navbar-sub-menus.tsx
new file mode 100644
index 00000000..05f3a6c5
--- /dev/null
+++ b/packages/app-client/src/modules/ui/components/navbar-sub-menus.tsx
@@ -0,0 +1,44 @@
+import { useI18n } from '@/modules/i18n/i18n.provider';
+import { cn } from '@/modules/shared/style/cn';
+import { useThemeStore } from '@/modules/theme/theme.store';
+import { DropdownMenuItem, DropdownMenuSeparator } from './dropdown-menu';
+
+export function ThemeSwitcher() {
+ const themeStore = useThemeStore();
+ const { t } = useI18n();
+ return (
+ <>
+ themeStore.setColorMode({ mode: 'light' })} class="flex items-center gap-2 cursor-pointer">
+
+ {t('navbar.theme.light-mode')}
+
+ themeStore.setColorMode({ mode: 'dark' })} class="flex items-center gap-2 cursor-pointer">
+
+ {t('navbar.theme.dark-mode')}
+
+ themeStore.setColorMode({ mode: 'system' })} class="flex items-center gap-2 cursor-pointer">
+
+ {t('navbar.theme.system-mode')}
+
+
+ );
+}
+
+export function LanguageSwitcher() {
+ const { t, getLocale, setLocale, locales } = useI18n();
+ return (
+ <>
+ {locales.map(locale => (
+ setLocale(locale.key)} class={cn('flex items-center gap-2 cursor-pointer', { 'font-semibold': getLocale() === locale.key })}>
+ {locale.name}
+
+ ))}
+
+
+
+
+ {t('navbar.settings.contribute-to-i18n')}
+
+
+ );
+}
diff --git a/packages/app-client/src/modules/ui/layouts/app.layout.tsx b/packages/app-client/src/modules/ui/layouts/app.layout.tsx
index bc6318b8..e6e6c15d 100644
--- a/packages/app-client/src/modules/ui/layouts/app.layout.tsx
+++ b/packages/app-client/src/modules/ui/layouts/app.layout.tsx
@@ -4,19 +4,19 @@ import { getConfig } from '@/modules/config/config.provider';
import { buildDocUrl } from '@/modules/docs/docs.models';
import { useI18n } from '@/modules/i18n/i18n.provider';
import { useNoteContext } from '@/modules/notes/notes.context';
-import { cn } from '@/modules/shared/style/cn';
import { useThemeStore } from '@/modules/theme/theme.store';
import { Button } from '@/modules/ui/components/button';
import { DropdownMenu } from '@kobalte/core/dropdown-menu';
import { A, useNavigate } from '@solidjs/router';
import { type Component, type ParentComponent, Show } from 'solid-js';
-import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../components/dropdown-menu';
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../components/dropdown-menu';
+import { LanguageSwitcher, ThemeSwitcher } from '../components/navbar-sub-menus';
export const Navbar: Component = () => {
const themeStore = useThemeStore();
const { triggerResetNoteForm } = useNoteContext();
const navigate = useNavigate();
- const { t, getLocale, setLocale, locales } = useI18n();
+ const { t } = useI18n();
const config = getConfig();
@@ -44,56 +44,66 @@ export const Navbar: Component = () => {
{t('navbar.new-note')}
-