Skip to content

Icons sidebar menu new #508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LisaFC merged 4 commits into from
Apr 12, 2021
Merged

Icons sidebar menu new #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
359f2f9
Icons for sidebar menu
narrenfrei Apr 8, 2021
31e8e15
Docs: Icons for sidebar menu
narrenfrei Apr 8, 2021
e9c02d7
small update for icons in sidebar tree
narrenfrei Apr 10, 2021
0ebb118
updated how to use icons in sidebar menu
narrenfrei Apr 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions assets/scss/_sidebar-tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
}

@include media-breakpoint-up(md) {
& > ul {
padding-left: .5rem;
& .ul-1 ul {
padding-left: 1.5em;
}
}

Expand Down Expand Up @@ -87,6 +87,22 @@
padding-top: .5rem;
padding-left: 1.5rem;
}

li i { // Layout of icons
padding-right: 0.5em;
&:before{
display: inline-block;
text-align: center;
min-width: 1em;
}
}

.td-sidebar-link.tree-root{
font-weight: $font-weight-bold;
color: $primary;
border-bottom: 1px $primary solid;
margin-bottom: 1rem;
}
}

.td-sidebar {
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/sidebar-tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
{{ $pages := $pages_tmp | first $sidebarMenuTruncate }}
{{ $withChild := gt (len $pages) 0 }}
<li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if not $show }} collapse{{ end }}" id="{{ $mid }}-li">
<a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}"><span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
<a href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}{{ if $treeRoot }} tree-root{{ end }}" id="{{ $mid }}">{{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $s.LinkTitle }}</span></a>
{{if $withChild }}
{{ $ulNr := add $ulNr 1 }}
<ul class="pr-md-3 ul-{{ $ulNr }}">
Expand Down
8 changes: 8 additions & 0 deletions userguide/content/en/docs/Adding content/navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,14 @@ With the compact menu (`.ui.sidebar_menu_compact = true`), only the current page

On large sites (default: > 2000 pages) the section menu is not generated for each page, but cached for the whole section. The HTML classes for marking the active menu item (and menu path) are then set using JS. You can adjust the limit for activating the cached section menu with the optional parameter `.ui.sidebar_cache_limit`.

### Adding icons to section menu

It's also possible to add icons to the section menu in the sidebar by setting the `icon` parameter in the page front matter (e.g. `icon: fas fa-tools`).

You can find a complete list of icons to use in the [FontAwesome documentation](https://fontawesome.com/icons?d=gallery&p=2). Docsy includes the free FontAwesome icons by default.

Out of the box, if you want to use icons, you should define icons for all items on the same menu level in order to ensure an appropriate look. If the icons are used in a different way, individual CSS adjustments are likely necessary.

## Breadcrumb navigation

Breadcrumb navigation is enabled by default. To disable breadcrumb navigation, set site param `ui.breadcrumb_disable = true` in `config.toml`.
Expand Down