search

poole / lanyon

A content-first, sliding sidebar theme for Jekyll.
http://lanyon.getpoole.com
Other
3.25k stars 2.95k forks source link

Suggestion: New Sidebar #138

Closed nicholaelaw closed 4 years ago

nicholaelaw commented 9 years ago

Don't know if this is relevant, but I think I've found a better sidebar implementation.

I've recently replaced the default sidebar with eager-side-nav and found the result good enough. It uses almost solely js to make the sidebar, and has a nice animated button.

You can preview the effects at its eager.io install page.

Right now it's a standalone package with some basic options. If properly integrated the side nav should support Lanyon color theming and also reverse-layout and sidebar-overlay options. I've only been able to make a few hacks to place it to the right (like reverse-layout) and change the color to #AC4142 (theme-base-08). I'll try to integrate it, but anyone more capable than I are more than welcome to do it.

bernardosulzbach commented 9 years ago

better sidebar implementation

Can you please elaborate?

nice animated button

This is not enough to make it any better. It is different and no more than that. Also, I think it does not blend well with Lanyon.

nicholaelaw commented 9 years ago

I'm sorry I shouldn't have said "better". I should have said "I like it better". Some highlights are:

  1. It allows multiple sections in sidebar (labels that separates groups of link);
  2. I've had a problem I can't fix with Lanyon's sidebar: Issue 137, this implementation behaves fine;
  3. The nice animated toggle has a fixed position. In some use cases, this reduces mouse/finger travel;
  4. Built-in icon support which does not require any additional setup.

I also recognize some shortfalls:

  1. It is written in JS+JSON, which could raise compatibility issues;
  2. On narrower screens the toggle button overlays on texts;
  3. It needs to be loaded in HTML head: if loaded in body, the toggle appears halfway through page loading, which can be perceived as poor performance;
  4. It behaves like Lanyon's sidebar-overlay, which conflicts with current sidebar's default behaviour.

Lastly, I'm afraid I disagree with your assessment that it does not blend well with Lanyon. Here's Lanyon's sidebar:

lanyon-sidebar

and here's eager-side-nav modified by me:

side-nav-adapted

Aside from the narrower width and different text position, I couldn't see why it does not blend well with Lanyon.

Edit: typo.

bernardosulzbach commented 9 years ago

I think I even like it better after seeing this images. I didn't experiment with it enough to make it blend in properly. I have nothing else to say, if performance and compatibility are minor issues I'm likely going to use this in my own website. Can't say I think it is a good idea to make it Lanyon's default, though.

Thanks for sharing this.