Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

chore: update sidebar item list and link class names

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/components/sidebar.css
View File

@ -19,19 +19,18 @@
@apply hx-rotate-90; @apply hx-rotate-90;
} }
.sidebar-item { .hextra-sidebar-item-list {
@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 {
@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; @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;
}
}
} }

6
assets/js/sidebar.js
View File

@ -33,8 +33,8 @@ document.addEventListener("DOMContentLoaded", function () {
if (currentPagePath === linkPath) { if (currentPagePath === linkPath) {
// add active class to the link // add active class to the link
link.classList.add("sidebar-item-active"); link.classList.add("active");
link.classList.remove("sidebar-item-inactive"); link.classList.remove("inactive");
if (!isVisible(link)) { if (!isVisible(link)) {
return; return;
@ -42,7 +42,7 @@ document.addEventListener("DOMContentLoaded", function () {
// recursively open parent lists // recursively open parent lists
let parent = link.parentElement; let parent = link.parentElement;
while (parent && !parent.classList.contains("hextra-sidebar-container")) { 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.classList.add("open");
} }
parent = parent.parentElement; parent = parent.parentElement;

4
layouts/partials/components/sidebar/item-link.html
View File

@ -1,10 +1,10 @@
{{- $external := strings.HasPrefix .link "http" -}} {{- $external := strings.HasPrefix .link "http" -}}
{{- $activeClass := cond (.active) "sidebar-item-active" "sidebar-item-inactive" -}} {{- $activeClass := cond (.active) "active" "inactive" -}}
<a <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 }}" href="{{ .link }}"
{{ if $external }}target="_blank" rel="noreferer"{{ end }} {{ if $external }}target="_blank" rel="noreferer"{{ end }}
> >

4
layouts/partials/components/sidebar/render-items.html
View File

@ -4,13 +4,13 @@
<div class="ltr:hx-pr-0 hx-overflow-hidden"> <div class="ltr:hx-pr-0 hx-overflow-hidden">
<ul class="sidebar-item-list-container"> <ul class="hextra-sidebar-item-list">
{{- range $items }} {{- range $items }}
{{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}} {{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
{{- $containsPage := hasPrefix $pageLink .link -}} {{- $containsPage := hasPrefix $pageLink .link -}}
{{- $shouldOpen := or (.open) $containsPage $active | default false -}} {{- $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) -}} {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
{{- if .items -}} {{- if .items -}}
{{- partial "components/sidebar/render-items" (dict "items" .items "link" .link "cached" $cached) -}} {{- partial "components/sidebar/render-items" (dict "items" .items "link" .link "cached" $cached) -}}