chore: update sidebar item list and link class names

This commit is contained in:
Xin
2024-04-30 22:42:04 +01:00
parent b91cc79674
commit 55af474f51
4 changed files with 19 additions and 20 deletions

View File

@ -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;
}
}
}

View File

@ -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;