nuxt-i18n-micro 3.30.3 → 4.0.0

package/dist/runtime/components/i18n-group.d.vue.ts

@@ -1,9 +1,23 @@
 declare const _default: typeof __VLS_export;
 export default _default;
+export type __VLS_LocalComponents = {};
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_Slots = ReturnType<typeof __VLS_template>["__VLS_Slots"];
+export type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
+declare function __VLS_template(): {
+    __VLS_Slots: {
+        default?: (props: {
+            prefix: string;
+            t: (key: any, params?: {}) => any;
+        }) => any;
+    };
+};
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** Key prefix every lookup inside the slot is resolved against. */
     prefix: {
@@ -29,9 +43,3 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     groupClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {
-        prefix: string;
-        t: (key: any, params?: {}) => any;
-    }) => any) | undefined;
-};

package/dist/runtime/components/i18n-group.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { useNuxtApp, useRoute } from "#imports";
+import { useNuxtApp } from "#imports";
 defineOptions({ name: "I18nGroup" });
 const props = defineProps({
   /** Key prefix every lookup inside the slot is resolved against. */
@@ -14,8 +14,6 @@ const props = defineProps({
   /** Extra class on the wrapper element. */
   groupClass: { type: String, default: "" }
 });
-const { $_t } = useNuxtApp();
-const route = useRoute();
-const $t = $_t(route);
+const { $t } = useNuxtApp();
 const translate = (key, params = {}) => $t(`${props.prefix}.${key}`, params);
 </script>

package/dist/runtime/components/i18n-group.vue.d.ts

@@ -1,9 +1,23 @@
 declare const _default: typeof __VLS_export;
 export default _default;
+export type __VLS_LocalComponents = {};
+export type __VLS_GlobalComponents = import("vue").GlobalComponents;
+export type __VLS_LocalDirectives = {};
+export type __VLS_Slots = ReturnType<typeof __VLS_template>["__VLS_Slots"];
+export type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
+declare function __VLS_template(): {
+    __VLS_Slots: {
+        default?: (props: {
+            prefix: string;
+            t: (key: any, params?: {}) => any;
+        }) => any;
+    };
+};
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /** Key prefix every lookup inside the slot is resolved against. */
     prefix: {
@@ -29,9 +43,3 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     groupClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {
-        prefix: string;
-        t: (key: any, params?: {}) => any;
-    }) => any) | undefined;
-};

package/dist/runtime/components/i18n-link.d.vue.ts

@@ -1,16 +1,19 @@
+import type { CSSProperties } from 'vue';
 import type { RouteLocationNamedRaw, RouteLocationResolvedGeneric } from 'vue-router';
 interface Props {
     /** Target route. Localized automatically; an external URL is passed through unchanged. */
     to: RouteLocationNamedRaw | RouteLocationResolvedGeneric | string;
     /** Inline style applied while the link points at the current route. */
-    activeStyle?: Partial<CSSStyleValue>;
+    activeStyle?: CSSProperties;
 }
-declare var __VLS_1: {}, __VLS_10: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_10) => any;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
 };
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/i18n-link.vue

@@ -4,14 +4,15 @@
     <slot />
   </a>
 
-  <NuxtLink v-else :to="$localePath(to)" :style="computedStyle">
+  <NuxtLink v-else :to="localizedPath" :style="computedStyle">
     <slot />
   </NuxtLink>
 </template>
 
 <script setup>
+import { externalLinkHref, isSamePage } from "@i18n-micro/core";
 import { computed } from "vue";
-import { useNuxtApp, useRoute, useRouter } from "#imports";
+import { useNuxtApp, useRoute } from "#imports";
 defineOptions({ name: "I18nLink" });
 const { $localePath } = useNuxtApp();
 const props = defineProps({
@@ -19,32 +20,10 @@ const props = defineProps({
   activeStyle: { type: Object, required: false }
 });
 const route = useRoute();
-const router = useRouter();
-const isExternalLink = computed(() => {
-  if (typeof props.to === "string") {
-    return /^(?:https?:\/\/|\/\/|[a-zA-Z0-9-]+\.[a-zA-Z]{2,})|tel:|mailto:/.test(props.to);
-  }
-  return false;
-});
-const externalHref = computed(() => {
-  if (isExternalLink.value && typeof props.to === "string") {
-    if (props.to.startsWith("//")) {
-      return props.to;
-    }
-    if (!/^https?:\/\//.test(props.to)) {
-      return `https://${props.to}`;
-    }
-    return props.to;
-  }
-  return void 0;
-});
-const isActive = computed(() => {
-  if (isExternalLink.value) {
-    return false;
-  }
-  const pathStr = $localePath(props.to);
-  return route.path === router.resolve(pathStr).path;
-});
+const externalHref = computed(() => externalLinkHref(props.to));
+const isExternalLink = computed(() => externalHref.value !== void 0);
+const localizedPath = computed(() => isExternalLink.value ? "" : $localePath(props.to));
+const isActive = computed(() => !isExternalLink.value && isSamePage(route.path, localizedPath.value));
 const computedStyle = computed(() => {
   return isActive.value ? { ...props.activeStyle } : {};
 });

package/dist/runtime/components/i18n-link.vue.d.ts

@@ -1,16 +1,19 @@
+import type { CSSProperties } from 'vue';
 import type { RouteLocationNamedRaw, RouteLocationResolvedGeneric } from 'vue-router';
 interface Props {
     /** Target route. Localized automatically; an external URL is passed through unchanged. */
     to: RouteLocationNamedRaw | RouteLocationResolvedGeneric | string;
     /** Inline style applied while the link points at the current route. */
-    activeStyle?: Partial<CSSStyleValue>;
+    activeStyle?: CSSProperties;
 }
-declare var __VLS_1: {}, __VLS_10: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_10) => any;
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    };
 };
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/i18n-switcher.d.vue.ts

@@ -1,57 +1,108 @@
-import type { CSSProperties } from 'vue';
-interface Props {
+import type { Locale } from '@i18n-micro/types';
+import type { CSSProperties, PropType, SlotsType } from 'vue';
+/**
+ * A locale switcher: a button showing the current locale and a dropdown of the rest,
+ * each linking to the equivalent route in that locale.
+ *
+ * It ships small inline default styles; each `custom*Style` prop is merged on top of the
+ * matching part, and the slots add markup around it. Locales with `disabled: true` are not listed.
+ * A click on a link is one navigation; with a modifier key it is the browser's (a new tab).
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Display name per locale code, overriding the `displayName` from the locale config. */
+    customLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /** Inline style for the outer wrapper. */
+    customWrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the button that opens the dropdown. */
+    customButtonStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the dropdown panel. */
+    customDropdownStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for each item in the dropdown. */
+    customItemStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the link inside an item. */
+    customLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the link of the currently active locale. */
+    customActiveLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the *current* locale button when it is `disabled: true` in config. */
+    customDisabledLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    /** Inline style for the caret icon on the button. */
+    customIconStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** Display name per locale code, overriding the `displayName` from the locale config. */
-    customLabels?: Record<string, string>;
+    customLabels: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
     /** Inline style for the outer wrapper. */
-    customWrapperStyle?: CSSProperties;
+    customWrapperStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the button that opens the dropdown. */
-    customButtonStyle?: CSSProperties;
+    customButtonStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the dropdown panel. */
-    customDropdownStyle?: CSSProperties;
+    customDropdownStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for each item in the dropdown. */
-    customItemStyle?: CSSProperties;
+    customItemStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the link inside an item. */
-    customLinkStyle?: CSSProperties;
+    customLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the link of the currently active locale. */
-    customActiveLinkStyle?: CSSProperties;
+    customActiveLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the *current* locale button when it is `disabled: true` in config. */
-    customDisabledLinkStyle?: CSSProperties;
+    customDisabledLinkStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
     /** Inline style for the caret icon on the button. */
-    customIconStyle?: CSSProperties;
-}
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {
-    locale: any;
-}, __VLS_21: {
-    locale: any;
-}, __VLS_23: {
-    locale: any;
-}, __VLS_25: {
-    locale: any;
-}, __VLS_27: {}, __VLS_29: {};
-type __VLS_Slots = {} & {
-    'before-button'?: (props: typeof __VLS_1) => any;
-} & {
-    'before-selected-locale'?: (props: typeof __VLS_3) => any;
-} & {
-    'after-selected-locale'?: (props: typeof __VLS_5) => any;
-} & {
-    'before-dropdown'?: (props: typeof __VLS_7) => any;
-} & {
-    'before-dropdown-items'?: (props: typeof __VLS_9) => any;
-} & {
-    'before-item'?: (props: typeof __VLS_11) => any;
-} & {
-    'before-link-content'?: (props: typeof __VLS_21) => any;
-} & {
-    'after-link-content'?: (props: typeof __VLS_23) => any;
-} & {
-    'after-item'?: (props: typeof __VLS_25) => any;
-} & {
-    'after-dropdown-items'?: (props: typeof __VLS_27) => any;
-} & {
-    'after-dropdown'?: (props: typeof __VLS_29) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    customIconStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
     customLabels: Record<string, string>;
     customWrapperStyle: CSSProperties;
     customButtonStyle: CSSProperties;
@@ -61,12 +112,35 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     customActiveLinkStyle: CSSProperties;
     customDisabledLinkStyle: CSSProperties;
     customIconStyle: CSSProperties;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}, SlotsType<{
+    /** Content before the button that opens the dropdown. */
+    'before-button': () => unknown;
+    /** Content before the active locale label inside the button. */
+    'before-selected-locale': () => unknown;
+    /** Content after the active locale label inside the button. */
+    'after-selected-locale': () => unknown;
+    /** Content between the button and the dropdown panel. */
+    'before-dropdown': () => unknown;
+    /** Content at the top of the dropdown, above the locale list. */
+    'before-dropdown-items': () => unknown;
+    /** Content before each locale entry. */
+    'before-item': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content before a locale's label inside its link. */
+    'before-link-content': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content after a locale's label inside its link. */
+    'after-link-content': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content after each locale entry. */
+    'after-item': (scope: {
+        locale: Locale;
+    }) => unknown;
+    /** Content at the bottom of the dropdown, below the locale list. */
+    'after-dropdown-items': () => unknown;
+    /** Content after the dropdown panel. */
+    'after-dropdown': () => unknown;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/i18n-switcher.vue

@@ -1,159 +1,59 @@
-<template>
-  <div :style="[wrapperStyle, customWrapperStyle]">
-    <!-- @slot Content before the button that opens the dropdown. -->
-    <slot name="before-button" />
-
-    <button
-      class="language-switcher"
-      :style="[buttonStyle, customButtonStyle, currentLocaleDisabled ? customDisabledLinkStyle : {}]"
-      @click="toggleDropdown"
-    >
-      <!-- @slot Content before the active locale label inside the button. -->
-      <slot name="before-selected-locale" />
-      {{ currentLocaleLabel }}
-      <!-- @slot Content after the active locale label inside the button. -->
-      <slot name="after-selected-locale" />
-      <span :style="[iconStyle, dropdownOpen ? openIconStyle : {}, customIconStyle]">&#9662;</span>
-    </button>
-
-    <!-- @slot Content between the button and the dropdown panel. -->
-    <slot name="before-dropdown" />
-
-    <ul v-show="dropdownOpen" :style="[dropdownStyle, customDropdownStyle]">
-      <!-- @slot Content at the top of the dropdown, above the locale list. -->
-      <slot name="before-dropdown-items" />
-
-      <li v-for="locale in locales" :key="locale.code" :style="[itemStyle, customItemStyle]">
-        <!-- @slot Content before each locale entry. -->
-        <slot name="before-item" :locale="locale" />
-
-        <NuxtLink
-          :class="`switcher-locale-${locale.code}`"
-          :to="switchLocaleRoute(locale.code)"
-          :style="[
-  linkStyle,
-  locale.code === currentLocale ? activeLinkStyle : {},
-  customLinkStyle,
-  locale.code === currentLocale ? customActiveLinkStyle : {}
-]"
-          :hreflang="locale.iso || locale.code"
-          @click="switchLocale(locale.code)"
-        >
-          <!-- @slot Content before a locale's label inside its link. -->
-          <slot name="before-link-content" :locale="locale" />
-          {{ localeLabel(locale) }}
-          <!-- @slot Content after a locale's label inside its link. -->
-          <slot name="after-link-content" :locale="locale" />
-        </NuxtLink>
-
-        <!-- @slot Content after each locale entry. -->
-        <slot name="after-item" :locale="locale" />
-      </li>
-
-      <!-- @slot Content at the bottom of the dropdown, below the locale list. -->
-      <slot name="after-dropdown-items" />
-    </ul>
-
-    <!-- @slot Content after the dropdown panel. -->
-    <slot name="after-dropdown" />
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from "vue";
-import { useNuxtApp } from "#imports";
-defineOptions({ name: "I18nSwitcher" });
-const props = defineProps({
-  customLabels: { type: Object, required: false, default: () => ({}) },
-  customWrapperStyle: { type: Object, required: false, default: () => ({}) },
-  customButtonStyle: { type: Object, required: false, default: () => ({}) },
-  customDropdownStyle: { type: Object, required: false, default: () => ({}) },
-  customItemStyle: { type: Object, required: false, default: () => ({}) },
-  customLinkStyle: { type: Object, required: false, default: () => ({}) },
-  customActiveLinkStyle: { type: Object, required: false, default: () => ({}) },
-  customDisabledLinkStyle: { type: Object, required: false, default: () => ({}) },
-  customIconStyle: { type: Object, required: false, default: () => ({}) }
-});
-const { $switchLocaleRoute, $switchLocale, $getLocales, $getLocale, $getLocaleName } = useNuxtApp();
-const allLocales = computed(() => $getLocales() ?? []);
-const locales = computed(() => allLocales.value.filter((locale) => !locale.disabled));
-const currentLocale = computed(() => $getLocale());
-const currentLocaleDisabled = computed(() => allLocales.value.some((l) => l.code === currentLocale.value && l.disabled));
-const currentLocaleName = computed(() => $getLocaleName());
-const dropdownOpen = ref(false);
-const toggleDropdown = () => {
-  dropdownOpen.value = !dropdownOpen.value;
-};
-const switchLocaleRoute = (code) => {
-  return $switchLocaleRoute(code);
-};
-const localeLabel = (locale) => {
-  const current = props.customLabels[locale.code] || locale.displayName;
-  if (!current && import.meta.dev) {
-    console.warn(
-      `[i18n-switcher] No label for "${locale.code}" \u2014 set a customLabels entry or a displayName in nuxt.config.i18n. Falling back to the code.`
+<script>
+import { createLocaleSwitcher } from "@i18n-micro/core/render";
+import { hasProtocol } from "ufo";
+import { defineComponent, Fragment, h, onMounted, onUnmounted, ref } from "vue";
+import { useNuxtApp, useRouter } from "#imports";
+export default defineComponent({
+  name: "I18nSwitcher",
+  props: {
+    /** Display name per locale code, overriding the `displayName` from the locale config. */
+    customLabels: { type: Object, default: () => ({}) },
+    /** Inline style for the outer wrapper. */
+    customWrapperStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the button that opens the dropdown. */
+    customButtonStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the dropdown panel. */
+    customDropdownStyle: { type: Object, default: () => ({}) },
+    /** Inline style for each item in the dropdown. */
+    customItemStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the link inside an item. */
+    customLinkStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the link of the currently active locale. */
+    customActiveLinkStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the *current* locale button when it is `disabled: true` in config. */
+    customDisabledLinkStyle: { type: Object, default: () => ({}) },
+    /** Inline style for the caret icon on the button. */
+    customIconStyle: { type: Object, default: () => ({}) }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const { $switchLocalePath, $switchLocale, $getLocales, $getLocale, $getLocaleName } = useNuxtApp();
+    const router = useRouter();
+    return createLocaleSwitcher(
+      { h, Fragment, ref, onMounted, onUnmounted },
+      {
+        // `$getLocales()` stays complete for SEO/meta; the switcher lists only the enabled ones
+        locales: () => $getLocales() ?? [],
+        locale: () => $getLocale(),
+        localeName: () => $getLocaleName(),
+        // the router adds `app.baseURL`; a URL of another domain is complete already
+        href: (code) => {
+          const path = $switchLocalePath(code);
+          return hasProtocol(path) ? path : router.resolve(path).href;
+        },
+        select: (code) => void $switchLocale(code),
+        // in the server HTML, for crawlers
+        keepList: true,
+        onMissingLabel: (code) => {
+          if (!import.meta.dev) return;
+          console.warn(
+            `[i18n-switcher] No label for "${code}" \u2014 set a customLabels entry or a displayName in nuxt.config.i18n. Falling back to the code.`
+          );
+        }
+      },
+      props,
+      slots
     );
   }
-  return current || locale.code;
-};
-const currentLocaleLabel = computed(
-  () => localeLabel({
-    code: currentLocale.value,
-    displayName: currentLocaleName.value ?? void 0
-  })
-);
-const switchLocale = (code) => {
-  toggleDropdown();
-  $switchLocale(code);
-};
-const wrapperStyle = {
-  position: "relative",
-  display: "inline-block"
-};
-const buttonStyle = {
-  padding: "4px 12px",
-  fontSize: "16px",
-  cursor: "pointer",
-  backgroundColor: "#fff",
-  border: "1px solid #333",
-  transition: "background-color 0.3s ease",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between"
-};
-const dropdownStyle = {
-  position: "absolute",
-  top: "100%",
-  left: "0",
-  zIndex: "10",
-  backgroundColor: "#fff",
-  border: "1px solid #333",
-  listStyle: "none",
-  padding: "0",
-  margin: "4px 0 0 0"
-};
-const itemStyle = {
-  margin: "0",
-  padding: "0"
-};
-const linkStyle = {
-  display: "block",
-  padding: "8px 12px",
-  color: "#333",
-  textDecoration: "none",
-  transition: "background-color 0.3s ease"
-};
-const activeLinkStyle = {
-  fontWeight: "bold",
-  color: "#007bff",
-  // Current locale is not a meaningful switch target
-  cursor: "not-allowed"
-};
-const iconStyle = {
-  marginLeft: "8px",
-  transition: "transform 0.3s ease"
-};
-const openIconStyle = {
-  transform: "rotate(180deg)"
-};
+});
 </script>