feat(navbar): toggle theme inside navbar (#759)

* feat(theme-toggle): toggle inside navbar

* chore: used partial parameters

* chore: create a constant for icons height inside navbar

* feat: better style integration

* review: invert enable label option

* review: change class value

* review

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

* docs: theme toggle

* docs: translations

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

exampleSite/content/docs/guide/configuration.fa.md

@@ -64,6 +64,12 @@ menu:
      params:
        icon: github
    ```
+5. تبديل السمة
+   ```yaml
+    - name: Theme Toggle
+      params:
+        type: theme-toggle
+   ```
 
 این آیتم‌های منو را می‌توان با تنظیم پارامتر `weight` مرتب کرد.
 

exampleSite/content/docs/guide/configuration.ja.md

@@ -64,6 +64,12 @@ menu:
      params:
        icon: github
    ```
+5. テーマ切り替え
+   ```yaml
+    - name: Theme Toggle
+      params:
+        type: theme-toggle
+   ```
 
 これらのメニュー項目は `weight` パラメータを設定することで並べ替えられます。
 

exampleSite/content/docs/guide/configuration.md

@@ -64,6 +64,12 @@ There are different types of menu items:
      params:
        icon: github
    ```
+5. Theme Toggle
+   ```yaml
+    - name: Theme Toggle
+      params:
+        type: theme-toggle
+   ```
 
 These menu items can be sorted by setting the `weight` parameter.
 

exampleSite/content/docs/guide/configuration.zh-cn.md

@@ -64,6 +64,12 @@ menu:
      params:
        icon: github
    ```
+5. 主题切换
+   ```yaml
+    - name: Theme Toggle
+      params:
+        type: theme-toggle
+   ```
 
 通过设置 `weight` 参数可以调整菜单项的排序。
 

layouts/_partials/navbar.html

@@ -7,6 +7,7 @@
   {{ end -}}
 {{- end -}}
 
+{{- $iconHeight := 24 -}}
 
 <div class="hextra-nav-container hx:sticky hx:top-0 hx:z-20 hx:w-full hx:bg-transparent hx:print:hidden">
   <div
@@ -33,9 +34,11 @@
         {{- if .Params.icon -}}
           {{- $rel := cond (eq .Params.icon "mastodon") "noreferrer me" "noreferrer" }}
           <a class="hx:p-2 hx:text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
-            {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
+            {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" (printf "height=%d" $iconHeight)) -}}
             <span class="hx:sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
+        {{- else if eq .Params.type "theme-toggle" -}}
+          {{- partial "theme-toggle.html" (dict "iconHeight" $iconHeight "class" "hx:p-2" "hideLabel" (not .Params.label)) -}}
         {{- else -}}
           {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
           {{- $activeClass := cond $active "hx:font-medium" "hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200" -}}
@@ -94,7 +97,7 @@
 
 
     <button type="button" aria-label="Menu" class="hextra-hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden">
-      {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
+      {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" (printf "height=%d" $iconHeight)) -}}
     </button>
   </nav>
 </div>

layouts/_partials/theme-toggle.html

@@ -1,21 +1,22 @@
-{{- $hideLabel := .hideLabel | default false -}}
+{{- $hideLabel := .hideLabel -}}
+{{- $iconHeight := .iconHeight | default 12 -}}
+{{- $class := .class | default "hx:px-2 hx:text-xs hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400" -}}
 
 {{- $changeTheme := (T "changeTheme") | default "Change theme" -}}
 {{- $light := (T "light") | default "Light" -}}
 {{- $dark := (T "dark") | default "Dark" -}}
 
-
 <button
   title="{{ $changeTheme }}"
   data-theme="light"
-  class="hextra-theme-toggle hx:cursor-pointer hx:group hx:h-7 hx:rounded-md hx:px-2 hx:text-left hx:text-xs hx:font-medium hx:text-gray-600 hx:transition-colors hx:dark:text-gray-400 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50"
+  class="hextra-theme-toggle hx:cursor-pointer hx:group hx:rounded-md hx:text-left {{ $class }}"
   type="button"
   aria-label="{{ $changeTheme }}"
 >
   <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
-    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12 class=\"hx:group-data-[theme=light]:hidden\"") -}}
+    {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf "height=%d class=\"hx:group-data-[theme=light]:hidden\"" $iconHeight)) -}}
     {{- if not $hideLabel }}<span class="hx:group-data-[theme=light]:hidden">{{ $light }}</span>{{ end -}}
-    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12 class=\"hx:group-data-[theme=dark]:hidden\"") -}}
+    {{- partial "utils/icon.html" (dict "name" "moon" "attributes" (printf "height=%d class=\"hx:group-data-[theme=dark]:hidden\"" $iconHeight)) -}}
     {{- if not $hideLabel }}<span class="hx:group-data-[theme=dark]:hidden">{{ $dark }}</span>{{ end -}}
   </div>
 </button>