Skip to content

Commit

Permalink
Merge pull request #1358 from gethinode/develop
Browse files Browse the repository at this point in the history
Refine sidebar behavior
  • Loading branch information
markdumay authored Jan 10, 2025
2 parents 912a34b + 9f85b5b commit 45bd45c
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 56 deletions.
101 changes: 53 additions & 48 deletions assets/scss/components/_sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,53 @@
top: var(--navbar-offset);
max-height: 90vh;
overflow-y: auto;
scrollbar-gutter: stable;
}

.sidebar-item {
color: rgba(0, 0, 0, 0.65);
margin-left: 0 !important;
padding-left: 0.85rem !important;
display: inline-block;
padding: 0.1875rem 0.5rem !important;

&.active,
&.active {
color: $primary;
}

&:hover,
&:focus {
color: $primary;
background-color: tint-color($primary, 90%);
}
}

.sidebar-item-group {
&:hover,
&:focus {
color: black;
color: $primary;
background-color: tint-color($primary, 90%);
}

> div > a {
color: var(--bs-body-color) !important;
text-decoration: none;
cursor: pointer;
}
}

.btn-toggle {
.sidebar-item-group > div {
padding: 0.1875rem 0.5rem !important;
}

.btn-toggle-group {
padding: 0.25rem 0.5rem;
font-weight: 600;
color: rgba(0, 0, 0, 0.65);
background-color: transparent;

&:hover,
&:focus {
color: black;
background-color: tint-color($primary, 90%);
background-color: transparent;
}

&::before {
Expand All @@ -43,50 +65,49 @@
}
}

.btn-toggle[aria-expanded="true"] {
color: black;

.btn-toggle-group[aria-expanded="true"] {
&::before {
transform: rotate(90deg);
}
}

.btn-toggle-nav a {
padding: 0.1875rem 0.5rem;
margin-top: 0.125rem;
margin-left: 1.25rem;

&:hover,
&:focus {
background-color: tint-color($primary, 90%);
}

&.active {
font-weight: bold;
}
}

@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-item {
color: var(--bs-body-color);
margin-left: 0 !important;
padding-left: 0.85rem !important;

&.active,

&.active {
color: $primary-text-emphasis-dark !important;
}

&:hover,
&:focus {
color: $primary-text-emphasis-dark !important;
background-color: transparent;
box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
}
}

.sidebar-item-group {
color: var(--bs-body-color) !important;

&.active {
color: $primary-text-emphasis-dark !important;
}

&:hover,
&:focus {
color: white !important;
background-color: transparent;
box-shadow: inset 0 0 0 1px $primary-bg-subtle-dark;
}
}

.btn-toggle {
.btn-toggle-group {
color: var(--bs-body-color);

&:hover,
&:focus {
color: white !important;
background-color: transparent;
}

Expand All @@ -95,26 +116,10 @@
}
}

.btn-toggle[aria-expanded="true"] {
.btn-toggle-group[aria-expanded="true"] {
color: var(--bs-secondary-color);
}

.btn-toggle-nav a {
padding: 0.1875rem 0.5rem;
margin-top: 0.125rem;
margin-left: 1.25rem;

&:hover,
&:focus {
color: white !important;
background-color: transparent;
}

&.active {
font-weight: bold;
}
}
}
}
}

// scss-docs-end sidebar
Expand Down
34 changes: 29 additions & 5 deletions layouts/partials/assets/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,34 @@

{{- $doc_slug := partial "utilities/URLJoin.html" (dict "base" $baseURL "path" ($group.title | urlize)) -}}
{{- $href := or $group.link $doc_slug -}}
{{ $ref := partial "utilities/GetPage.html" (dict "url" $href "page" $page) }}
{{ if eq $group.link "#" }}{{ $href = $doc_slug }}{{ end }}
{{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
{{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
{{- $current := eq $href $page.RelPermalink }}

<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}" aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}">
<div class="text-start flex-fill">{{ $group.title }}</div>
</button>
<div class="d-flex w-100 p-0 sidebar-item-group">
<div class="text-start flex-grow-1 {{ if $current }}fw-bold{{ end }}">
{{ $dest := $href }}
{{ $target := "" }}
{{ if or $current (not $ref) }}
{{ $dest = "" }}
{{ end }}
<a {{ with $dest }} href="{{ . }}"{{ else }}
data-bs-toggle="collapse"
data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}"
{{ end }}>{{ $group.title }}</a>
</div>

<button
class="btn btn-toggle-group d-inline-flex align-items-center rounded border-0 collapsed"
data-bs-toggle="collapse"
data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}"
aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}"
>
</button>
</div>
<div class="collapse {{ if $collapsed }}show{{ end }}" id="sidebar-collapse-{{ $index }}-{{ $level }}">
<ul class="btn-toggle-nav list-unstyled fw-normal {{ if eq $level 0}} pb-1 {{ end }}ps-3">
{{- range $item := $group.pages -}}
Expand Down Expand Up @@ -79,9 +101,11 @@
{{ $href = . }}
{{ else }}
{{- $href = partial "utilities/URLJoin.html" (dict "base" $baseURL "path" .) -}}
{{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
{{ end }}
{{ else }}
{{- $href = partial "utilities/URLJoin.html" (dict "base" $baseURL "path" ($title | urlize)) -}}
{{ if not (hasSuffix $href "/") }}{{ $href = printf "%s/" $href }}{{ end }}
{{ end }}
{{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}

Expand All @@ -91,7 +115,7 @@
<li>
<ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
<li>
{{ $class := "sidebar-item text-decoration-none rounded" }}
{{ $class := "sidebar-item text-decoration-none rounded w-100" }}
{{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
{{ $link := partial "assets/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
{{ if $link }}
Expand All @@ -104,7 +128,7 @@
</li>
{{ else }}
<li>
{{ $class := "sidebar-item text-decoration-none rounded small" }}
{{ $class := "sidebar-item text-decoration-none rounded small w-100" }}
{{ if $active }}{{ $class = printf "%s active" $class }}{{ end }}
{{ $link := partial "assets/link.html" (dict "destination" $href "text" $title "class" $class "page" $page) }}
{{ if $link }}
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gethinode/hinode",
"version": "0.27.26",
"version": "0.27.27",
"description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
"keywords": [
"hugo",
Expand Down

0 comments on commit 45bd45c

Please sign in to comment.