feat: Add language selector dropdown to navbar (#2526)

2025-12-21 17:34:25 +04:00 · 2025-11-02 20:49:13 +01:00
parent 6e656ad1de
commit 8d8727f587
16 changed files with 238 additions and 96 deletions
--- a/shared/data/countries.json
+++ b/shared/data/countries.json
@@ -0,0 +1,53 @@
+[
+  {
+    "name": "United States",
+    "flag": "us",
+    "code": "us"
+  },
+  {
+    "name": "United Kingdom",
+    "flag": "gb",
+    "code": "gb"
+  },
+  {
+    "name": "Germany",
+    "flag": "de",
+    "code": "de"
+  },
+  {
+    "name": "France",
+    "flag": "fr",
+    "code": "fr"
+  },
+  {
+    "name": "Poland",
+    "flag": "pl",
+    "code": "pl"
+  },
+  {
+    "name": "Spain",
+    "flag": "es",
+    "code": "es"
+  },
+  {
+    "name": "Italy",
+    "flag": "it",
+    "code": "it"
+  },
+  {
+    "name": "Canada",
+    "flag": "ca",
+    "code": "ca"
+  },
+  {
+    "name": "Australia",
+    "flag": "au",
+    "code": "au"
+  },
+  {
+    "name": "Japan",
+    "flag": "jp",
+    "code": "jp"
+  }
+]
+
--- a/shared/data/languages.json
+++ b/shared/data/languages.json
@@ -1,94 +1,112 @@
 [
-  {
-    "name": "العربية",
-    "flag": "ar"
-  },
  {
    "name": "Čeština",
-    "flag": "cz"
+    "flag": "cz",
+    "code": "cs"
  },
  {
    "name": "Deutsch",
-    "flag": "de"
+    "flag": "de",
+    "code": "de"
  },
  {
    "name": "Ελληνικά",
-    "flag": "gr"
+    "flag": "gr",
+    "code": "el"
  },
  {
    "name": "English",
-    "flag": "gb"
+    "flag": "gb",
+    "code": "en"
  },
  {
    "name": "Español",
-    "flag": "es"
+    "flag": "es",
+    "code": "es"
  },
  {
    "name": "Français",
-    "flag": "fr"
+    "flag": "fr",
+    "code": "fr"
  },
  {
    "name": "हिंदी",
-    "flag": "in"
+    "flag": "in",
+    "code": "hi"
  },
  {
    "name": "Magyar",
-    "flag": "hu"
+    "flag": "hu",
+    "code": "hu"
  },
  {
    "name": "Bahasa Indonesia",
-    "flag": "in"
+    "flag": "id",
+    "code": "id"
  },
  {
    "name": "Italiano",
-    "flag": "it"
+    "flag": "it",
+    "code": "it"
  },
  {
    "name": "日本語",
-    "flag": "jp"
+    "flag": "jp",
+    "code": "ja"
  },
  {
    "name": "한국어",
-    "flag": "kr"
+    "flag": "kr",
+    "code": "ko"
  },
  {
    "name": "Nederlands (Nederland)",
-    "flag": "ne"
+    "flag": "ne",
+    "code": "nl"
  },
  {
    "name": "Polski",
-    "flag": "pl"
+    "flag": "pl",
+    "code": "pl"
  },
  {
    "name": "Português",
-    "flag": "pt"
+    "flag": "pt",
+    "code": "pt"
  },
  {
    "name": "Română",
-    "flag": "ro"
+    "flag": "ro",
+    "code": "ro"
  },
  {
    "name": "Русский",
-    "flag": "ru"
+    "flag": "ru",
+    "code": "ru"
  },
  {
    "name": "ภาษาไทย",
-    "flag": "th"
+    "flag": "th",
+    "code": "th"
  },
  {
    "name": "Türkçe",
-    "flag": "tr"
+    "flag": "tr",
+    "code": "tr"
  },
  {
    "name": "Українською",
-    "flag": "ua"
+    "flag": "ua",
+    "code": "uk"
  },
  {
    "name": "Tiếng Việt",
-    "flag": "vn"
+    "flag": "vn",
+    "code": "vi"
  },
  {
    "name": "中文",
-    "flag": "cn"
+    "flag": "cn",
+    "code": "zh"
  }
 ]
--- a/shared/includes/layout/navbar-side-apps.html
+++ b/shared/includes/layout/navbar-side-apps.html
@@ -0,0 +1,14 @@
+<!-- BEGIN APPS -->
+<div class="nav-item dropdown d-none d-md-flex">
+	<span data-bs-toggle="tooltip" title="Apps" data-bs-placement="bottom">
+		<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
+			{% include "ui/icon.html" icon="apps" %}
+		</a>
+	</span>
+	<!-- BEGIN NAVBAR APPS -->
+	<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+		{% include "cards/navbar-apps.html" %}
+	</div>
+	<!-- END NAVBAR APPS -->
+</div>
+<!-- END APPS -->
--- a/shared/includes/layout/navbar-side-language.html
+++ b/shared/includes/layout/navbar-side-language.html
@@ -0,0 +1,17 @@
+<!-- BEGIN LANGUAGE SELECTOR -->
+<div class="nav-item dropdown d-none d-md-flex">
+	<span data-bs-toggle="tooltip" title="Select language" data-bs-placement="bottom">
+		<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Select language"
+			data-bs-auto-close="outside" aria-expanded="false">
+			EN
+		</a>
+	</span>
+	<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end">
+		{% for language in languages %}
+		<a class="dropdown-item" href="#" data-lang="{{ language.code }}">
+			{{ language.name }}
+		</a>
+		{% endfor %}
+	</div>
+</div>
+<!-- END LANGUAGE SELECTOR -->
--- a/shared/includes/layout/navbar-side-notifications.html
+++ b/shared/includes/layout/navbar-side-notifications.html
@@ -0,0 +1,15 @@
+<!-- BEGIN NOTIFICATIONS -->
+<div class="nav-item dropdown d-none d-md-flex">
+	<span data-bs-toggle="tooltip" title="Notifications" data-bs-placement="bottom">
+		<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
+			{% include "ui/icon.html" icon="bell" %}
+			<span class="badge bg-red"></span>
+		</a>
+	</span>
+	<!-- BEGIN NAVBAR NOTIFICATIONS -->
+	<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+		{% include "cards/navbar-notifications.html" %}
+	</div>
+	<!-- END NAVBAR NOTIFICATIONS -->
+</div>
+<!-- END NOTIFICATIONS -->
--- a/shared/includes/layout/navbar-side-theme.html
+++ b/shared/includes/layout/navbar-side-theme.html
@@ -0,0 +1,13 @@
+<!-- BEGIN THEME TOGGLE -->
+<div class="nav-item">
+	<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
+		data-bs-placement="bottom">
+		{% include "ui/icon.html" icon="moon" %}
+	</a>
+
+	<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
+		data-bs-placement="bottom">
+		{% include "ui/icon.html" icon="sun" %}
+	</a>
+</div>
+<!-- END THEME TOGGLE -->
--- a/shared/includes/layout/navbar-side-user.html
+++ b/shared/includes/layout/navbar-side-user.html
@@ -0,0 +1,24 @@
+<!-- BEGIN USER MENU -->
+{% assign person-id = include.person-id | default: 1 %}
+{% assign person = people[person-id] %}
+<div class="nav-item dropdown">
+	<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
+		{% include "ui/avatar.html" person-id=person-id size="sm" %}
+
+		{% unless include.hide-username %}
+		<div class="d-none d-xl-block ps-2">
+			<div>{{ person.full_name }}</div>
+			<div class="mt-1 small text-secondary">{{ person.job_title }}</div>
+		</div>
+		{% endunless %}
+	</a>
+	<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
+		<a class="dropdown-item" href="{{ page | relative }}/profile.html">{% include "ui/icon.html" icon="user" class="dropdown-item-icon" %} Profile</a>
+		<a class="dropdown-item" href="#">{% include "ui/icon.html" icon="chart-pie" class="dropdown-item-icon" %} Analytics</a>
+		<div class="dropdown-divider"></div>
+		<a class="dropdown-item" href="{{ page | relative }}/settings.html">Settings &amp; Privacy</a>
+		<a class="dropdown-item" href="#">Help</a>
+		<a class="dropdown-item" href="{{ page | relative }}/sign-in.html">Sign out</a>
+	</div>
+</div>
+<!-- END USER MENU -->
--- a/shared/includes/layout/navbar-side.html
+++ b/shared/includes/layout/navbar-side.html
@@ -11,62 +11,24 @@
 	</div>
 	{% endunless %}

-	<div class="d-none d-{{ include.breakpoint }}-flex">
-		<div class="nav-item">
-			<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
-				data-bs-placement="bottom">
-				{% include "ui/icon.html" icon="moon" %}
-			</a>
-
-			<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
-				data-bs-placement="bottom">
-				{% include "ui/icon.html" icon="sun" %}
-			</a>
-		</div>
-		<div class="nav-item dropdown d-none d-md-flex">
-			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
-				{% include "ui/icon.html" icon="bell" %}
-				<span class="badge bg-red"></span>
-			</a>
-			<!-- BEGIN NAVBAR NOTIFICATIONS -->
-			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
-				{% include "cards/navbar-notifications.html" %}
-			</div>
-			<!-- END NAVBAR NOTIFICATIONS -->
-		</div>
-
-		<div class="nav-item dropdown d-none d-md-flex me-3">
-			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show app menu" data-bs-auto-close="outside" aria-expanded="false">
-				{% include "ui/icon.html" icon="apps" %}
-			</a>
-			<!-- BEGIN NAVBAR APPS -->
-			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
-				{% include "cards/navbar-apps.html" %}
-			</div>
-			<!-- END NAVBAR APPS -->
-		</div>
+	{% if include.show-theme-toggle or include.show-notifications or include.show-apps or include.show-language-selector %}
+	<div class="d-none d-{{ include.breakpoint }}-flex me-3">
+		{% if include.show-theme-toggle %}
+			{% include "layout/navbar-side-theme.html" %}
+		{% endif %}
+		{% if include.show-notifications %}
+			{% include "layout/navbar-side-notifications.html" %}
+		{% endif %}
+		{% if include.show-apps %}
+			{% include "layout/navbar-side-apps.html" %}
+		{% endif %}
+		{% if include.show-language-selector %}
+			{% include "layout/navbar-side-language.html" %}
+		{% endif %}
 	</div>
+	{% endif %}

-	<div class="nav-item dropdown">
-		<a href="#" class="nav-link d-flex lh-1 p-0 px-2" data-bs-toggle="dropdown" aria-label="Open user menu">
-			{% include "ui/avatar.html" person-id=person-id size="sm" %}
-
-			{% unless include.hide-username %}
-			<div class="d-none d-xl-block ps-2">
-				<div>{{ person.full_name }}</div>
-				<div class="mt-1 small text-secondary">{{ person.job_title }}</div>
-			</div>
-			{% endunless %}
-		</a>
-		<!-- BEGIN USER MENU -->
-		<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow"{% if include.dark %} data-bs-theme="light"{% endif %}>
-			<a href="#" class="dropdown-item">Status</a>
-			<a href="{{ page | relative }}/profile.html" class="dropdown-item">Profile</a>
-			<a href="#" class="dropdown-item">Feedback</a>
-			<div class="dropdown-divider"></div>
-			<a href="{{ page | relative }}/settings.html" class="dropdown-item">Settings</a>
-			<a href="{{ page | relative }}/sign-in.html" class="dropdown-item">Logout</a>
-		</div>
-		<!-- END USER MENU -->
-	</div>
+	{% if include.show-user %}
+		{% include "layout/navbar-side-user.html" person-id=person-id hide-username=include.hide-username dark=include.dark %}
+	{% endif %}
 </div>
--- a/shared/includes/layout/navbar.html
+++ b/shared/includes/layout/navbar.html
@@ -1,5 +1,10 @@
 {% assign breakpoint = include.breakpoint | default: 'md' %}
 {% assign condensed = include.condensed | default: false %}
+{% assign show-theme = include.show-theme | default: true %}
+{% assign show-notifications = include.show-notifications | default: true %}
+{% assign show-apps = include.show-apps | default: true %}
+{% assign show-language = include.show-language | default: true %}
+{% assign show-user = include.show-user | default: true %}

 {% if include.sticky %}
 <div class="sticky-top">
@@ -13,7 +18,7 @@
 				{% include "layout/navbar-logo.html" small-logo=include.small-logo hide-logo=include.hide-logo class="d-none-navbar-horizontal pe-0 pe-md-3" breakpoint=breakpoint show-title=include.show-title header=true %}
 			{% endunless %}

-			{% include "layout/navbar-side.html" class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint dark=include.dark %}
+			{% include "layout/navbar-side.html" class="order-md-last" hide-username=include.hide-username condensed=condensed person-id=include.person-id breakpoint=breakpoint dark=include.dark show-theme-toggle=show-theme show-notifications=show-notifications show-apps=show-apps show-language-selector=show-language show-user=show-user %}

 			{% if condensed %}
 			<div class="collapse navbar-collapse" id="navbar-menu">
--- a/shared/includes/ui/dropdown-menu.html
+++ b/shared/includes/ui/dropdown-menu.html
@@ -24,7 +24,11 @@
 		{% endfor %}
 	{% elsif include.people %}
 		{% for person in people limit: 5 %}
-		<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
+		<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id size="xs" %} {{ person.full_name }}</a>
+		{% endfor %}
+	{% elsif include.flag %}
+		{% for country in countries limit: 5 %}
+		<a href="#" class="dropdown-item">{% include "ui/flag.html" flag=country.flag size="xs" %} {{ country.name }}</a>
 		{% endfor %}
 	{% elsif include.type == 'text' %}