mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-07 18:14:28 +00:00
Merge pull request #1358 from gethinode/develop
Refine sidebar behavior
This commit is contained in:
Mark Dumay
@@ -7,22 +7,45 @@
|
||||
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 {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: black;
|
||||
color: $primary;
|
||||
background-color: tint-color($primary, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
.sidebar-item-group {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary;
|
||||
background-color: tint-color($primary, 90%);
|
||||
}
|
||||
|
||||
> div > a {
|
||||
color: var(--bs-body-color) !important;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
@@ -30,8 +53,7 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: black;
|
||||
background-color: tint-color($primary, 90%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 -}}
|
||||
@@ -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) -}}
|
||||
|
||||
@@ -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 }}
|
||||
@@ -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 }}
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@gethinode/hinode",
|
||||
"version": "0.27.26",
|
||||
"version": "0.27.27",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@gethinode/hinode",
|
||||
"version": "0.27.26",
|
||||
"version": "0.27.27",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fullhuman/postcss-purgecss": "^7.0.2",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user