fix: replace deprecated site.IsMultiLingual

assets/css/compiled/main.css

@@ -2483,7 +2483,7 @@ article details > summary::before {
   color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
 }
 @media (max-width: 767px) {
-  .sidebar-container {
+  .hextra-sidebar-container {
     position: fixed;
     top: 0px;
     bottom: 0px;
@@ -2494,28 +2494,152 @@ article details > summary::before {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
     padding-top: calc(var(--navbar-height));
   }
-  .sidebar-container:is(html[class~="dark"] *) {
+  .hextra-sidebar-container:is(html[class~="dark"] *) {
     --tw-bg-opacity: 1;
     background-color: rgb(17 17 17 / var(--tw-bg-opacity));
   }
-  .sidebar-container {
+  .hextra-sidebar-container {
     transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
     will-change: transform, opacity;
     contain: layout style;
     backface-visibility: hidden;
   }
 }
-.sidebar-container li > div {
+.hextra-sidebar-container li > div {
   height: 0px;
 }
-.sidebar-container li.open > div {
+.hextra-sidebar-container li.open > div {
   height: auto;
   padding-top: 0.25rem;
 }
-.sidebar-container li.open > a > span > svg > path {
+.hextra-sidebar-container li.open > a > span > svg > path {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hextra-sidebar-container .hextra-sidebar-item-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list::before {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  width: 1px;
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:is(html[class~="dark"] *)::before {
+  content: var(--tw-content);
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *) {
+  margin-left: 0.75rem;
+  padding-left: 0.75rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *)::before {
+  content: var(--tw-content);
+  left: 0px;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0.75rem;
+  padding-right: 0.75rem;
+}
+.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *)::before {
+  content: var(--tw-content);
+  right: 0px;
+}
+.hextra-sidebar-container .hextra-sidebar-item-link {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: .875rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.active {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.active {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive {
+    border-width: 1px;
+    border-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity));
+  }
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
+  --tw-text-opacity: 1;
+  color: rgb(163 163 163 / var(--tw-text-opacity));
+}
+.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
+  background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+@media (prefers-contrast: more) {
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
+    --tw-text-opacity: 1;
+    color: rgb(249 250 251 / var(--tw-text-opacity));
+  }
+
+  .hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+  }
+}
 nav .search-wrapper {
   display: none;
 }

exampleSite/hugo_stats.json

@@ -69,6 +69,7 @@
       "[hyphens:auto]",
       "[transition:background-color_1.5s_ease]",
       "[word-break:break-word]",
+      "active",
       "active:hx-bg-gray-400/20",
       "active:hx-opacity-50",
       "active:hx-shadow-gray-200",
@@ -242,6 +243,10 @@
       "hextra-pdf",
       "hextra-scrollbar",
       "hextra-sidebar-collapsible-button",
+      "hextra-sidebar-container",
+      "hextra-sidebar-item",
+      "hextra-sidebar-item-link",
+      "hextra-sidebar-item-list",
       "hextra-tabs-panel",
       "hextra-tabs-toggle",
       "hextra-toc",
@@ -542,6 +547,7 @@
       "hx-z-20",
       "hx-z-[-1]",
       "icon",
+      "inactive",
       "language-options",
       "language-switcher",
       "last-of-type:hx-mb-0",

layouts/docs/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
-    {{ partial "sidebar.html" (dict "context" .) }}
+    {{ partial "sidebar-ng.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
     <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

layouts/docs/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
   <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
-    {{ partial "sidebar.html" (dict "context" .) }}
+    {{ partial "sidebar-ng.html" (dict "context" .) }}
     {{ partial "toc.html" . }}
     <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
       <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

layouts/partials/sidebar-ng.html

@@ -32,14 +32,10 @@
 <aside class="hextra-sidebar-container hx-flex hx-flex-col print:hx-hidden md:hx-top-16 md:hx-shrink-0 md:hx-w-64 md:hx-self-start max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
   {{/* Search bar on small screen */}}
   {{- partialCached "components/sidebar/mobile-search" . -}}
-
-
   <div class="hextra-scrollbar hx-overflow-y-auto hx-overflow-x-hidden hx-p-4 hx-grow md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
     {{/* Mobile Navigation */}}
     <ul class="hx-flex hx-flex-col hx-gap-1 md:hx-hidden">
-      {{- with $dataMobile -}}
+      {{- with $dataMobile -}}{{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}{{- end -}}
-        {{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}
-      {{- end -}}
     </ul>
 
     {{/* Sidebar on large screen */}}
@@ -58,6 +54,7 @@
         {{- partialCached "components/sidebar/bottom" $context site.Home -}}
       </ul>
     {{ end -}}
+  <div style="position: absolute; top: 10px; right: 0; font-size: 10px; color: #888;">new</div>
   </div>
   {{- partial "components/sidebar/switches" (dict "context" $context "disableSidebar" $disableSidebar) -}}
 </aside>
@@ -75,14 +72,14 @@
   {{ $switchesClass := cond $disableSidebar "md:hx-hidden" "" -}}
   {{ $displayThemeToggle := (site.Params.theme.displayToggle | default true) -}}
 
-  {{ if or site.IsMultiLingual $displayThemeToggle }}
+  {{ if or hugo.IsMultilingual $displayThemeToggle }}
     <div
-      class="{{ $switchesClass }} {{ with site.IsMultiLingual }}
+      class="{{ $switchesClass }} {{ with hugo.IsMultilingual -}}
         hx-justify-end
-      {{ end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
+      {{- end }} hx-sticky hx-bottom-0 hx-bg-white dark:hx-bg-dark hx-mx-4 hx-py-4 hx-shadow-[0_-12px_16px_#fff] hx-flex hx-items-center hx-gap-2 dark:hx-border-neutral-800 dark:hx-shadow-[0_-12px_16px_#111] contrast-more:hx-border-neutral-400 contrast-more:hx-shadow-none contrast-more:dark:hx-shadow-none hx-border-t"
       data-toggle-animation="show"
     >
-      {{- with site.IsMultiLingual -}}
+      {{- with hugo.IsMultilingual -}}
         {{- partial "language-switch" (dict "context" $context "grow" true) -}}
         {{- with $displayThemeToggle }}{{ partial "theme-toggle" (dict "hideLabel" true) }}{{ end -}}
       {{- else -}}