From 55af474f5187f9fe58d55e658c09c5d7cca00eaa Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Tue, 30 Apr 2024 22:42:04 +0100
Subject: [PATCH] chore: update sidebar item list and link class names

---
 assets/css/components/sidebar.css             | 25 +++++++++----------
 assets/js/sidebar.js                          |  6 ++---
 .../components/sidebar/item-link.html         |  4 +--
 .../components/sidebar/render-items.html      |  4 +--
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
index fcfa35f..7fe6c8c 100644
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@@ -19,19 +19,18 @@
     @apply hx-rotate-90;
   }
 
-  .sidebar-item {
-    @apply hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors;
-  }
-
-  .sidebar-item-active {
-    @apply hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500;
-  }
-
-  .sidebar-item-inactive {
-    @apply hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50;
-  }
-
-  .sidebar-item-list-container {
+  .hextra-sidebar-item-list {
     @apply hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800;
   }
+
+  .hextra-sidebar-item-link {
+    @apply hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors;
+
+    &.active {
+      @apply hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500;
+    }
+    &.inactive {
+      @apply hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50;
+    }
+  }
 }
diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js
index 895f9bc..dedc92d 100644
--- a/assets/js/sidebar.js
+++ b/assets/js/sidebar.js
@@ -33,8 +33,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
         if (currentPagePath === linkPath) {
           // add active class to the link
-          link.classList.add("sidebar-item-active");
-          link.classList.remove("sidebar-item-inactive");
+          link.classList.add("active");
+          link.classList.remove("inactive");
 
           if (!isVisible(link)) {
             return;
@@ -42,7 +42,7 @@ document.addEventListener("DOMContentLoaded", function () {
           // recursively open parent lists
           let parent = link.parentElement;
           while (parent && !parent.classList.contains("hextra-sidebar-container")) {
-            if (parent.tagName === "LI" && parent.classList.contains("sidebar-item-list")) {
+            if (parent.tagName === "LI" && parent.classList.contains("hextra-sidebar-item-list")) {
               parent.classList.add("open");
             }
             parent = parent.parentElement;
diff --git a/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html
index 4f6dd63..c60a52e 100644
--- a/layouts/partials/components/sidebar/item-link.html
+++ b/layouts/partials/components/sidebar/item-link.html
@@ -1,10 +1,10 @@
 {{- $external := strings.HasPrefix .link "http" -}}
 
-{{- $activeClass := cond (.active) "sidebar-item-active" "sidebar-item-inactive" -}}
+{{- $activeClass := cond (.active) "active" "inactive" -}}
 
 
 <a
-  class="sidebar-item {{ $activeClass }} [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]"
+  class="hextra-sidebar-item-link {{ $activeClass }} [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]"
   href="{{ .link }}"
   {{ if $external }}target="_blank" rel="noreferer"{{ end }}
 >
diff --git a/layouts/partials/components/sidebar/render-items.html b/layouts/partials/components/sidebar/render-items.html
index c47dda2..d34866f 100644
--- a/layouts/partials/components/sidebar/render-items.html
+++ b/layouts/partials/components/sidebar/render-items.html
@@ -4,13 +4,13 @@
 
 
 <div class="ltr:hx-pr-0 hx-overflow-hidden">
-  <ul class="sidebar-item-list-container">
+  <ul class="hextra-sidebar-item-list">
     {{- range $items }}
       {{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
       {{- $containsPage := hasPrefix $pageLink .link -}}
       {{- $shouldOpen := or (.open) $containsPage $active | default false -}}
 
-      <li class="sidebar-item-list hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
+      <li class="hextra-sidebar-item hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
         {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
         {{- if .items -}}
           {{- partial "components/sidebar/render-items" (dict "items" .items "link" .link "cached" $cached) -}}