From 8c789626be35c4157b82c0ee353e3cd126300fe1 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sun, 28 Apr 2024 23:37:50 +0100
Subject: [PATCH] refactor: move sidebar item styles to css

---
 assets/css/components/sidebar.css                  | 12 ++++++++++++
 layouts/partials/components/sidebar/item-link.html | 11 +++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
index 9c8221d..5911fc2 100644
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@@ -18,4 +18,16 @@
   li.open > a > span > svg > path {
     @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;
+  }
 }
diff --git a/layouts/partials/components/sidebar/item-link.html b/layouts/partials/components/sidebar/item-link.html
index 6fd4345..4f6dd63 100644
--- a/layouts/partials/components/sidebar/item-link.html
+++ b/layouts/partials/components/sidebar/item-link.html
@@ -1,11 +1,10 @@
 {{- $external := strings.HasPrefix .link "http" -}}
+
+{{- $activeClass := cond (.active) "sidebar-item-active" "sidebar-item-inactive" -}}
+
+
 <a
-  class="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 [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
-  {{- if .active }}
-    sidebar-active-item 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
-  {{- else }}
-    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
-  {{- end -}}"
+  class="sidebar-item {{ $activeClass }} [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]"
   href="{{ .link }}"
   {{ if $external }}target="_blank" rel="noreferer"{{ end }}
 >