@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.4

package/docs/vi/packages/preact-intlayer/usePathname.md

@@ -0,0 +1,117 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: Tài liệu về usePathname Hook | preact-intlayer
+description: Xem cách sử dụng usePathname hook cho gói preact-intlayer
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Quốc tế hóa
+  - Tài liệu
+  - Preact
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - preact-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Tích hợp Preact: Tài liệu về `usePathname` Hook
+
+`usePathname` hook trả về pathname (đường dẫn) trình duyệt hiện tại với phân đoạn locale đã được loại bỏ. Điều này rất hữu ích để xây dựng các điều hướng nhận biết locale — ví dụ: xác định mục điều hướng nào đang hoạt động — mà không cần phải loại bỏ thủ công tiền tố locale.
+
+## Nhập `usePathname` trong Preact
+
+```typescript
+import { usePathname } from "preact-intlayer";
+```
+
+## Tổng quan
+
+`usePathname` đọc `window.location.pathname`, loại bỏ tiền tố locale thông qua `getPathWithoutLocale`, và kết xuất lại (re-renders) component bất cứ khi nào trình duyệt kích hoạt sự kiện `popstate` (điều hướng quay lại/tiến tới). Trong quá trình Server-Side Rendering (SSR), nó sẽ trả về một chuỗi rỗng.
+
+## Cách sử dụng
+
+```tsx fileName="src/components/NavItem.tsx"
+import type { FunctionComponent } from "preact";
+import { usePathname } from "preact-intlayer";
+
+type NavItemProps = {
+  href: string;
+  label: string;
+};
+
+const NavItem: FunctionComponent<NavItemProps> = ({ href, label }) => {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
+  return (
+    <a href={href} aria-current={isActive ? "page" : undefined}>
+      {label}
+    </a>
+  );
+};
+
+export default NavItem;
+```
+
+## Giá trị trả về
+
+| Kiểu dữ liệu | Mô tả                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------- |
+| `string`     | Pathname hiện tại không có tiền tố locale. Trả về chuỗi rỗng trong quá trình Server-Side Rendering (SSR). |
+
+## Hành vi
+
+- **Loại bỏ locale (Locale stripping)**: Xóa phân đoạn locale ở đầu URL (ví dụ: `/vi/dashboard` → `/dashboard`).
+- **Phản ứng tự động (Reactive)**: Cập nhật tự động dựa trên các sự kiện `popstate` (khi điều hướng tiến / lùi trên trình duyệt).
+- **An toàn với SSR (SSR-safe)**: Trả về `""` khi `window` không có sẵn.
+- **Dọn dẹp (Cleanup)**: Trình lắng nghe `popstate` được loại bỏ tự động khi component bị ngắt kết nối (unmount).
+
+## Ví dụ
+
+```tsx fileName="src/components/Sidebar.tsx"
+import type { FunctionComponent } from "preact";
+import { usePathname } from "preact-intlayer";
+
+const links = [
+  { href: "/dashboard", label: "Bảng điều khiển" },
+  { href: "/settings", label: "Cài đặt" },
+];
+
+const Sidebar: FunctionComponent = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav>
+      {links.map(({ href, label }) => (
+        <a
+          key={href}
+          href={href}
+          style={{ fontWeight: pathname === href ? "bold" : "normal" }}
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+  );
+};
+
+export default Sidebar;
+```
+
+## Các mục liên quan
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/preact-intlayer/exports.md) — locale hiện tại + bộ chuyển đổi locale
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getPathWithoutLocale.md) — tiện ích nền tảng được sử dụng bởi hook này

package/docs/vi/packages/react-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - react-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
   - version: 7.5.14
     date: 2026-01-21
     changes: "Hợp nhất tài liệu cho tất cả các exports"
@@ -54,22 +57,23 @@ Nhập:
 import "react-intlayer";
 ```
 
-| Hook                   | Mô tả                                                                                                                          | Tài liệu liên quan                                                                                                      |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `useIntlayer`          | Hook phía client chọn một dictionary theo khóa và trả về nội dung của nó. Sử dụng locale từ context nếu không được cung cấp.   | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md)     |
-| `useDictionary`        | Hook chuyển đổi một đối tượng dictionary và trả về nội dung cho locale hiện tại. Xử lý các bản dịch `t()`, enumerations, v.v.  | [useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useDictionary.md) |
-| `useDictionaryAsync`   | Hook xử lý các dictionary bất đồng bộ. Chấp nhận một map dictionary dựa trên Promise và giải quyết nó cho locale hiện tại.     | -                                                                                                                       |
-| `useDictionaryDynamic` | Hook xử lý các từ điển động được tải theo khóa. Sử dụng React Suspense nội bộ để xử lý trạng thái tải.                         | -                                                                                                                       |
-| `useLocale`            | Hook phía client để lấy locale hiện tại, default locale, các locale khả dụng, và một hàm để cập nhật locale.                   | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md)         |
-| `useLocaleBase`        | Hook để lấy locale hiện tại và tất cả các trường liên quan (locale, defaultLocale, availableLocales, setLocale) từ context.    | -                                                                                                                       |
-| `useRewriteURL`        | Hook phía client để quản lý việc rewrite URL. Nếu tồn tại quy tắc rewrite cho pathname và locale hiện tại, nó sẽ cập nhật URL. | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useRewriteURL.md) |
-| `useI18n`              | Hook cung cấp một hàm dịch `t()` để truy cập nội dung lồng nhau theo khóa. Bắt chước mẫu i18next/next-intl.                    | [useI18n](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useI18n.md)             |
-| `useIntl`              | Hook cung cấp một đối tượng `Intl` liên kết với locale. Tự động chèn locale hiện tại và sử dụng bộ nhớ đệm tối ưu.             | -                                                                                                                       |
-| `useLocaleStorage`     | Hook cung cấp khả năng lưu trữ locale trong localStorage hoặc cookies. Trả về các hàm getter và setter.                        | -                                                                                                                       |
-| `useLocaleCookie`      | Không còn được khuyến nghị (Deprecated). Sử dụng `useLocaleStorage` thay thế. Hook quản lý việc lưu trữ locale trong cookies.  | -                                                                                                                       |
-| `useLoadDynamic`       | Hook để tải các từ điển động sử dụng React Suspense. Nhận một key và một Promise, lưu kết quả vào cache.                       | -                                                                                                                       |
-| `useIntlayerContext`   | Hook cung cấp các giá trị context hiện tại của client Intlayer (locale, setLocale, v.v.).                                      | -                                                                                                                       |
-| `useHTMLContext`       | Hook để truy cập các override (ghi đè) của component HTML từ context HTMLProvider.                                             | -                                                                                                                       |
+| Hook                   | Mô tả                                                                                                                                       | Tài liệu liên quan                                                                                                      |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`          | Hook phía client chọn một dictionary theo khóa và trả về nội dung của nó. Sử dụng locale từ context nếu không được cung cấp.                | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md)     |
+| `useDictionary`        | Hook chuyển đổi một đối tượng dictionary và trả về nội dung cho locale hiện tại. Xử lý các bản dịch `t()`, enumerations, v.v.               | [useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useDictionary.md) |
+| `useDictionaryAsync`   | Hook xử lý các dictionary bất đồng bộ. Chấp nhận một map dictionary dựa trên Promise và giải quyết nó cho locale hiện tại.                  | -                                                                                                                       |
+| `useDictionaryDynamic` | Hook xử lý các từ điển động được tải theo khóa. Sử dụng React Suspense nội bộ để xử lý trạng thái tải.                                      | -                                                                                                                       |
+| `useLocale`            | Hook phía client để lấy locale hiện tại, default locale, các locale khả dụng, và một hàm để cập nhật locale.                                | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md)         |
+| `useLocaleBase`        | Hook để lấy locale hiện tại và tất cả các trường liên quan (locale, defaultLocale, availableLocales, setLocale) từ context.                 | -                                                                                                                       |
+| `usePathname`          | Hook trả về đường dẫn hiện tại (pathname) đã được loại bỏ phân đoạn locale. Có tính phản hồi với điều hướng của trình duyệt qua `popstate`. | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/usePathname.md)     |
+| `useRewriteURL`        | Hook phía client để quản lý việc rewrite URL. Nếu tồn tại quy tắc rewrite cho pathname và locale hiện tại, nó sẽ cập nhật URL.              | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useRewriteURL.md) |
+| `useI18n`              | Hook cung cấp một hàm dịch `t()` để truy cập nội dung lồng nhau theo khóa. Bắt chước mẫu i18next/next-intl.                                 | [useI18n](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useI18n.md)             |
+| `useIntl`              | Hook cung cấp một đối tượng `Intl` liên kết với locale. Tự động chèn locale hiện tại và sử dụng bộ nhớ đệm tối ưu.                          | -                                                                                                                       |
+| `useLocaleStorage`     | Hook cung cấp khả năng lưu trữ locale trong localStorage hoặc cookies. Trả về các hàm getter và setter.                                     | -                                                                                                                       |
+| `useLocaleCookie`      | Không còn được khuyến nghị (Deprecated). Sử dụng `useLocaleStorage` thay thế. Hook quản lý việc lưu trữ locale trong cookies.               | -                                                                                                                       |
+| `useLoadDynamic`       | Hook để tải các từ điển động sử dụng React Suspense. Nhận một key và một Promise, lưu kết quả vào cache.                                    | -                                                                                                                       |
+| `useIntlayerContext`   | Hook cung cấp các giá trị context hiện tại của client Intlayer (locale, setLocale, v.v.).                                                   | -                                                                                                                       |
+| `useHTMLContext`       | Hook để truy cập các override (ghi đè) của component HTML từ context HTMLProvider.                                                          | -                                                                                                                       |
 
 ### Hàm
 

package/docs/vi/packages/react-intlayer/usePathname.md

@@ -0,0 +1,87 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: Tài liệu usePathname Hook | react-intlayer
+description: Tìm hiểu cách sử dụng hook usePathname từ gói react-intlayer để lấy đường dẫn (pathname) của URL hiện tại mà không có phân đoạn locale.
+keywords:
+  - usePathname
+  - pathname
+  - react
+  - intlayer
+  - routing
+  - quốc tế hóa
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Tích hợp React: Tài liệu Hook `usePathname`
+
+Hook `usePathname` từ `react-intlayer` trả về đường dẫn hiện tại của trình duyệt (pathname) với phân đoạn ngôn ngữ (locale) đã được loại bỏ. Nó dựa trên thuộc tính `window.location.pathname` gốc và phản hồi các sự kiện điều hướng của trình duyệt qua `popstate`.
+
+## Nhập `usePathname`
+
+```typescript
+import { usePathname } from "react-intlayer";
+```
+
+## Tổng quan
+
+Không giống như các hook định tuyến dành riêng cho framework (như trong `next-intlayer` hoặc `react-router`), hook này là một giải pháp gọn nhẹ, độc lập với framework dành cho các ứng dụng React thuần túy. Nó trích xuất URL hiện tại và loại bỏ bất kỳ tiền tố locale nào phù hợp (ví dụ: `/vi/about` trở thành `/about`).
+
+## Sử dụng
+
+```tsx fileName="src/components/Navigation.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { usePathname } from "react-intlayer";
+
+const Navigation: FC = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav>
+      <a
+        href="/home"
+        style={{ fontWeight: pathname === "/home" ? "bold" : "normal" }}
+      >
+        Trang chủ
+      </a>
+      <a
+        href="/about"
+        style={{ fontWeight: pathname === "/about" ? "bold" : "normal" }}
+      >
+        Giới thiệu
+      </a>
+    </nav>
+  );
+};
+
+export default Navigation;
+```
+
+## Giá trị Trả về
+
+| Kiểu     | Mô tả                                                                                                        |
+| -------- | ------------------------------------------------------------------------------------------------------------ |
+| `string` | Đường dẫn hiện tại của trình duyệt với tiền tố locale đã bị loại bỏ (ví dụ: `/vi/dashboard` → `/dashboard`). |
+
+## Hành vi
+
+- **Loại bỏ Locale**: Bên dưới, nó sử dụng tiện ích `getPathWithoutLocale` để tự động phát hiện và loại bỏ locale khỏi pathname dựa trên cấu hình Intlayer của ứng dụng.
+- **Khả năng Phản hồi (Reactivity)**: Lắng nghe sự kiện `popstate`. Khi người dùng điều hướng bằng các nút tiến/lùi của trình duyệt hoặc khi gọi `pushState`/`replaceState`, hook sẽ cập nhật pathname được trả về.
+- **SSR Fallback**: Trên server (nơi `window` là undefined), mặc định nó trả về `/` vì trong ngữ cảnh React thuần túy, mặc định nó không thể truy cập vào request URL.
+
+## Tài liệu Liên quan
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useLocale.md)
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getPathWithoutLocale.md)

package/docs/vi/packages/solid-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - solid-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Hợp nhất tài liệu cho tất cả các exports"
@@ -52,17 +55,18 @@ Nhập:
 import "solid-intlayer";
 ```
 
-| Hook                   | Mô tả                                                                                                              | Tài liệu liên quan                                                                                                      |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `useIntlayer`          | Dựa trên `useDictionary`, nhưng injects một phiên bản tối ưu hóa của dictionary từ khai báo được sinh.             | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useIntlayer.md)     |
-| `useDictionary`        | Xử lý các đối tượng có cấu trúc giống từ điển (key, content). Nó xử lý các bản dịch `t()`, enumerations, v.v.      | -                                                                                                                       |
-| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các từ điển bất đồng bộ.                                                     | -                                                                                                                       |
-| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các từ điển động.                                                            | -                                                                                                                       |
-| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                 | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useLocale.md)         |
-| `useRewriteURL`        | Hook phía client để quản lý việc viết lại URL. Tự động cập nhật URL nếu tồn tại quy tắc viết lại được bản địa hóa. | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useRewriteURL.md) |
-| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                         | -                                                                                                                       |
-| `useLoadDynamic`       | Hook để tải từ điển động.                                                                                          | -                                                                                                                       |
-| `t`                    | Chọn nội dung dựa trên locale hiện tại.                                                                            | [translation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/translation.md)                  |
+| Hook                   | Mô tả                                                                                                                    | Tài liệu liên quan                                                                                                      |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`          | Dựa trên `useDictionary`, nhưng injects một phiên bản tối ưu hóa của dictionary từ khai báo được sinh.                   | [useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useIntlayer.md)     |
+| `useDictionary`        | Xử lý các đối tượng có cấu trúc giống từ điển (key, content). Nó xử lý các bản dịch `t()`, enumerations, v.v.            | -                                                                                                                       |
+| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các từ điển bất đồng bộ.                                                           | -                                                                                                                       |
+| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các từ điển động.                                                                  | -                                                                                                                       |
+| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                       | [useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useLocale.md)         |
+| `usePathname`          | Trả về pathname hiện tại dưới dạng `Accessor<string>` với phần locale đã bị loại bỏ. Reactive (phản ứng) với `popstate`. | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/usePathname.md)     |
+| `useRewriteURL`        | Hook phía client để quản lý việc viết lại URL. Tự động cập nhật URL nếu tồn tại quy tắc viết lại được bản địa hóa.       | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useRewriteURL.md) |
+| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                               | -                                                                                                                       |
+| `useLoadDynamic`       | Hook để tải từ điển động.                                                                                                | -                                                                                                                       |
+| `t`                    | Chọn nội dung dựa trên locale hiện tại.                                                                                  | [translation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/translation.md)                  |
 
 ### Thành phần
 

package/docs/vi/packages/solid-intlayer/usePathname.md

@@ -0,0 +1,119 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: Tài liệu Hook usePathname | solid-intlayer
+description: Tìm hiểu cách sử dụng hook usePathname từ gói solid-intlayer
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Quốc tế hóa
+  - Tài liệu
+  - Solid
+  - Solid.js
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - solid-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Tích hợp Solid: Tài liệu Hook `usePathname`
+
+Hook `usePathname` trả về pathname của trình duyệt hiện tại với phần locale đã bị loại bỏ, dưới dạng một `Accessor<string>` của Solid. Nó hữu ích cho việc xây dựng điều hướng nhận biết locale — ví dụ, xác định mục điều hướng nào đang hoạt động — mà không cần phải loại bỏ tiền tố locale theo cách thủ công.
+
+## Import `usePathname` trong Solid
+
+```typescript
+import { usePathname } from "solid-intlayer";
+```
+
+## Tổng quan
+
+`usePathname` tạo ra một reactive signal được khởi tạo từ `window.location.pathname`, loại bỏ tiền tố locale thông qua `getPathWithoutLocale`, và cập nhật signal mỗi khi trình duyệt kích hoạt sự kiện `popstate` (điều hướng quay lại/tiến lên). Event listener sẽ tự động được dọn dẹp thông qua `onCleanup`.
+
+## Sử dụng
+
+```tsx fileName="src/components/NavItem.tsx"
+import type { Component } from "solid-js";
+import { usePathname } from "solid-intlayer";
+
+type NavItemProps = {
+  href: string;
+  label: string;
+};
+
+const NavItem: Component<NavItemProps> = ({ href, label }) => {
+  const pathname = usePathname();
+
+  return (
+    <a href={href} aria-current={pathname() === href ? "page" : undefined}>
+      {label}
+    </a>
+  );
+};
+
+export default NavItem;
+```
+
+## Giá trị trả về
+
+| Kiểu dữ liệu       | Mô tả                                                                                       |
+| ------------------ | ------------------------------------------------------------------------------------------- |
+| `Accessor<string>` | Accessor của Solid (reactive getter) trả về pathname hiện tại không bao gồm tiền tố locale. |
+
+## Hành vi
+
+- **Loại bỏ locale**: Xóa bỏ phần locale ở đầu pathname (ví dụ: `/vi/dashboard` → `/dashboard`).
+- **Reactive (Phản ứng)**: Tự động cập nhật dựa trên các sự kiện `popstate` (điều hướng quay lại / tiến lên của trình duyệt).
+- **An toàn cho SSR**: Trả về `""` khi `window` không có sẵn.
+- **Dọn dẹp**: `popstate` listener được loại bỏ tự động thông qua hàm `onCleanup` của Solid.
+
+## Ví dụ
+
+```tsx fileName="src/components/Sidebar.tsx"
+import type { Component } from "solid-js";
+import { For } from "solid-js";
+import { usePathname } from "solid-intlayer";
+
+const links = [
+  { href: "/dashboard", label: "Bảng điều khiển" },
+  { href: "/settings", label: "Cài đặt" },
+];
+
+const Sidebar: Component = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav>
+      <For each={links}>
+        {({ href, label }) => (
+          <a
+            href={href}
+            style={{ "font-weight": pathname() === href ? "bold" : "normal" }}
+          >
+            {label}
+          </a>
+        )}
+      </For>
+    </nav>
+  );
+};
+
+export default Sidebar;
+```
+
+## Các tài liệu liên quan
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/solid-intlayer/useLocale.md) — locale hiện tại + bộ chuyển đổi locale
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getPathWithoutLocale.md) — tiện ích nền tảng được sử dụng bởi hook này

package/docs/vi/packages/svelte-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - svelte-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Hợp nhất tài liệu cho tất cả các exports"
@@ -64,15 +67,16 @@ Nhập:
 import "svelte-intlayer";
 ```
 
-| Hàm                    | Mô tả                                                                                                                  | Tài liệu liên quan                                                                                                       |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `useIntlayer`          | Dựa trên `useDictionary`, nhưng chèn một phiên bản tối ưu của dictionary từ khai báo được sinh ra.                     | -                                                                                                                        |
-| `useDictionary`        | Xử lý các đối tượng có dạng dictionary (key, content). Nó xử lý các bản dịch `t()`, các enumeration, v.v.              | -                                                                                                                        |
-| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các dictionary bất đồng bộ.                                                      | -                                                                                                                        |
-| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các dictionary động.                                                             | -                                                                                                                        |
-| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                     | -                                                                                                                        |
-| `useRewriteURL`        | Hàm phía client để quản lý việc rewrite URL. Tự động cập nhật URL nếu tồn tại một quy tắc rewrite đã được bản địa hóa. | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/svelte-intlayer/useRewriteURL.md) |
-| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                             | -                                                                                                                        |
+| Hàm                    | Mô tả                                                                                                                      | Tài liệu liên quan                                                                                                       |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `useIntlayer`          | Dựa trên `useDictionary`, nhưng chèn một phiên bản tối ưu của dictionary từ khai báo được sinh ra.                         | -                                                                                                                        |
+| `useDictionary`        | Xử lý các đối tượng có dạng dictionary (key, content). Nó xử lý các bản dịch `t()`, các enumeration, v.v.                  | -                                                                                                                        |
+| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các dictionary bất đồng bộ.                                                          | -                                                                                                                        |
+| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các dictionary động.                                                                 | -                                                                                                                        |
+| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                         | -                                                                                                                        |
+| `usePathname`          | Trả về pathname hiện tại dưới dạng một `Readable<string>` store với phần locale đã bị loại bỏ. Có phản ứng với `popstate`. | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/svelte-intlayer/usePathname.md)     |
+| `useRewriteURL`        | Hàm phía client để quản lý việc rewrite URL. Tự động cập nhật URL nếu tồn tại một quy tắc rewrite đã được bản địa hóa.     | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/svelte-intlayer/useRewriteURL.md) |
+| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                                 | -                                                                                                                        |
 
 ### Markdown
 

package/docs/vi/packages/svelte-intlayer/usePathname.md

@@ -0,0 +1,103 @@
+---
+createdAt: 2026-06-22
+updatedAt: 2026-06-22
+title: Tài liệu hàm usePathname | svelte-intlayer
+description: Tìm hiểu cách sử dụng hàm usePathname từ gói svelte-intlayer
+keywords:
+  - usePathname
+  - pathname
+  - locale
+  - Intlayer
+  - Quốc tế hóa
+  - Tài liệu
+  - Svelte
+  - JavaScript
+slugs:
+  - doc
+  - packages
+  - svelte-intlayer
+  - usePathname
+history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
+  - version: 8.2.0
+    date: 2026-06-22
+    changes: "Khởi tạo lịch sử"
+author: aymericzip
+---
+
+# Tích hợp Svelte: Tài liệu `usePathname`
+
+Hàm `usePathname` trả về pathname của trình duyệt hiện tại với phần locale đã bị loại bỏ, dưới dạng một Svelte `Readable<string>` store. Nó hữu ích cho việc xây dựng điều hướng nhận biết locale — ví dụ, xác định mục điều hướng nào đang hoạt động — mà không cần phải loại bỏ tiền tố locale theo cách thủ công.
+
+## Import `usePathname` trong Svelte
+
+```typescript
+import { usePathname } from "svelte-intlayer";
+```
+
+## Tổng quan
+
+`usePathname` tạo ra một Svelte readable store được khởi tạo từ `window.location.pathname`, loại bỏ tiền tố locale thông qua `getPathWithoutLocale`, và phát ra một giá trị mới mỗi khi trình duyệt kích hoạt sự kiện `popstate` (điều hướng quay lại/tiến lên). Đăng ký theo dõi (subscribe) bằng cú pháp `$` trong các component.
+
+## Sử dụng
+
+```svelte fileName="src/components/NavItem.svelte"
+<script lang="ts">
+  import { usePathname } from "svelte-intlayer";
+
+  export let href: string;
+  export let label: string;
+
+  const pathname = usePathname();
+</script>
+
+<a {href} aria-current={$pathname === href ? "page" : undefined}>
+  {label}
+</a>
+```
+
+## Giá trị trả về
+
+| Kiểu dữ liệu       | Mô tả                                                                      |
+| ------------------ | -------------------------------------------------------------------------- |
+| `Readable<string>` | Svelte readable store chứa pathname hiện tại không bao gồm tiền tố locale. |
+
+## Hành vi
+
+- **Loại bỏ locale**: Xóa bỏ phần locale ở đầu pathname (ví dụ: `/vi/dashboard` → `/dashboard`).
+- **Phản ứng (Reactive)**: Phát ra giá trị mới trên mỗi sự kiện `popstate` (điều hướng quay lại / tiến lên của trình duyệt).
+- **An toàn cho SSR**: Trả về `""` khi `window` không có sẵn.
+- **Dọn dẹp**: `popstate` listener được loại bỏ tự động khi subscriber cuối cùng hủy đăng ký.
+
+## Ví dụ
+
+```svelte fileName="src/components/Sidebar.svelte"
+<script lang="ts">
+  import { usePathname } from "svelte-intlayer";
+
+  const links = [
+    { href: "/dashboard", label: "Bảng điều khiển" },
+    { href: "/settings", label: "Cài đặt" },
+  ];
+
+  const pathname = usePathname();
+</script>
+
+<nav>
+  {#each links as link}
+    <a
+      href={link.href}
+      style:font-weight={$pathname === link.href ? "bold" : "normal"}
+    >
+      {link.label}
+    </a>
+  {/each}
+</nav>
+```
+
+## Các tài liệu liên quan
+
+- [`useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/svelte-intlayer/useLocale.md) — locale hiện tại + bộ chuyển đổi locale
+- [`getPathWithoutLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/intlayer/getPathWithoutLocale.md) — tiện ích nền tảng được sử dụng bởi hook này

package/docs/vi/packages/vue-intlayer/exports.md

@@ -14,6 +14,9 @@ slugs:
   - vue-intlayer
   - exports
 history:
+  - version: 10.0.0
+    date: 2026-06-23
+    changes: "Thêm tiện ích usePathname"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Hợp nhất tài liệu cho tất cả các exports"
@@ -52,16 +55,17 @@ Import:
 import "vue-intlayer";
 ```
 
-| Composable             | Mô tả                                                                                                                | Tài liệu liên quan                                                                                                    |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `useIntlayer`          | Dựa trên `useDictionary`, nhưng chèn một phiên bản tối ưu hóa của dictionary từ khai báo được sinh ra.               | -                                                                                                                     |
-| `useDictionary`        | Xử lý các object trông giống dictionary (key, content). Nó xử lý các bản dịch `t()`, enumerations, v.v.              | -                                                                                                                     |
-| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các từ điển bất đồng bộ.                                                       | -                                                                                                                     |
-| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các từ điển động.                                                              | -                                                                                                                     |
-| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                   | -                                                                                                                     |
-| `useRewriteURL`        | Composable phía client để quản lý rewrite URL. Tự động cập nhật URL nếu tồn tại quy tắc rewrite đã được bản địa hóa. | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/vue-intlayer/useRewriteURL.md) |
-| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                           | -                                                                                                                     |
-| `useLoadDynamic`       | Composable để tải các từ điển động.                                                                                  | -                                                                                                                     |
+| Composable             | Mô tả                                                                                                                                        | Tài liệu liên quan                                                                                                    |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `useIntlayer`          | Dựa trên `useDictionary`, nhưng chèn một phiên bản tối ưu hóa của dictionary từ khai báo được sinh ra.                                       | -                                                                                                                     |
+| `useDictionary`        | Xử lý các object trông giống dictionary (key, content). Nó xử lý các bản dịch `t()`, enumerations, v.v.                                      | -                                                                                                                     |
+| `useDictionaryAsync`   | Tương tự `useDictionary`, nhưng xử lý các từ điển bất đồng bộ.                                                                               | -                                                                                                                     |
+| `useDictionaryDynamic` | Tương tự `useDictionary`, nhưng xử lý các từ điển động.                                                                                      | -                                                                                                                     |
+| `useLocale`            | Trả về locale hiện tại và một hàm để thiết lập nó.                                                                                           | -                                                                                                                     |
+| `usePathname`          | Trả về pathname hiện tại dưới dạng `ComputedRef<string>` với phân đoạn locale đã bị xóa. Có tính phản ứng (reactive) với sự kiện `popstate`. | [usePathname](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/vue-intlayer/usePathname.md)     |
+| `useRewriteURL`        | Composable phía client để quản lý rewrite URL. Tự động cập nhật URL nếu tồn tại quy tắc rewrite đã được bản địa hóa.                         | [useRewriteURL](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/vue-intlayer/useRewriteURL.md) |
+| `useIntl`              | Trả về đối tượng Intl cho locale hiện tại.                                                                                                   | -                                                                                                                     |
+| `useLoadDynamic`       | Composable để tải các từ điển động.                                                                                                          | -                                                                                                                     |
 
 ### Hàm