Expand Sidebar

[primerpy]

First of all, awesome work! Thank you.

One request though, would it be possible to add expand to side bar? Similar to the one here
https://chrisyee.ca/pushy/

For now, it will display all the children trees with no option to unfold.

[matcornic]

Hello @primerpy,

It would be a nice feature to have. It's in http://docdock.netlify.com/, but i did not implement it when creating the V2. I could not find a nice and clean way to have both the fold/unfold icon and the "tick" icon.

For example, docdock uses a circle at left, instead of a tick at right. But I don't really like it though.

Maybe, you have an idea ?

[ilyasustun]

I would really love to be able to have an option that by default is not expanded, except the current parent link. It should only expand the first children under the current clicked parent.

I am a data scientist and can't really help in this regard.

[matalo33]

Does there need to be a visible clue that any menu section expands into further pages? That is currently not the case with the Tier 1 menu items.

[matalo33]

I've had a good look at this. I figured I could achieve everything I need by only writing custom CSS into my theme but I don't think the current CSS classes make this possible.

To recap: I only want to display menu items if their parent is active, so as an example:

• Chapter One
• Chapter Two
  • Foo 1
    • Bar 1
  • Foo 2
    • Bar 2
• Chapter Three

Bar 1 is only visible because its parent, Foo 1, is active. Bar 2 is invisible because its parent, Foo 2, isn't the active page. Navigating to Foo 2 will hide Bar 1 and show Bar 2.

The CSS class parent is applied to parent menu items of the active page, however the CSS selector in the theme #sidebar ul.topics li.parent ul captures all ul of the parent, and not just the direct descendent.

I found the only way I could achieve what I wanted was to also apply the class to the ul as follows.

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index a780ba1..12c7b33 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -110,7 +110,9 @@
       </a>
       {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
       {{ if ne $numberOfPages 0 }}
-        <ul>
+        <ul class="
+        {{if .IsAncestor $currentNode }}parent{{end}}
+        ">
           {{ $currentNode.Scratch.Set "pages" .Pages }}
           {{ if .Sections}}
             {{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}

And then select this in my theme CSS with:

/* This selector comes from the parent theme and is overridden here */
#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
  display: none;
}

/* This resets display to block for our new ul.parent class */
#sidebar ul.topics li.parent > ul.parent {
  display: block;
}

I'm not submitting this as a pull request because it only solves my needs and doesn't address the wider problem. But it might be useful as an input into requirements.

[robhoes]

This seems to work for me, without changing menu.html:

diff --git a/static/css/theme.css b/static/css/theme.css
index e443e71..d1ff541 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -257,7 +257,7 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 #sidebar ul.topics ul ul {
     padding-bottom: 0;
 }
-#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
+#sidebar ul.topics li.parent > ul {
     display: block;
 }
 #sidebar ul.topics > li > a {

The parent class is set (only) on all <li> elements that are ancestors of the active page. This selects all <ul> elements that sit immediately below them.

[MitchStares]

This seems to work for me, without changing menu.html:

diff --git a/static/css/theme.css b/static/css/theme.css
index e443e71..d1ff541 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -257,7 +257,7 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 #sidebar ul.topics ul ul {
     padding-bottom: 0;
 }
-#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
+#sidebar ul.topics li.parent > ul {
     display: block;
 }
 #sidebar ul.topics > li > a {

The parent class is set (only) on all <li> elements that are ancestors of the active page. This selects all <ul> elements that sit immediately below them.

This works perfectly! Just implemented it without any issues. Changed the single line in the theme.css.