Create a Sidebar
The sidebar on this website pays homage to the design of sidebars in many great applications. For instance, Safari & Xcode both provide sidebars which make navigation of hierarchical data natural. This user interface is so important that it has a dedicated section within the Human Interface Guidelines: Outline Views. While NSOutlineView is a great choice for macOS apps, a website's sidebar must obviously be built upon a different technology stack. Luckily, w3schools.com provides a tutorial describing how to achieve a similar design using web technologies. The sidebar on this website is directly inspired by that article. Of course, the outline view needs a dedicated sidebar within which to reside. This demo shows how to build that.
With some effort, you should be able to leverage the two previous articles to produce a rudimentary sidebar. The following list enshrines a few solutions to pesky issues faced during the design of the sidebar on this website:
- The main content slid over the sidebar & navigation bar when the user scrolled until
z-indexwas introduced as described in this StackOverflow answer. - When the contents of the outline view in the sidebar exceeded the width of the sidebar, scrolling horizontally did not reveal any new content until the changes described in this StackOverflow answer were implemented.
- When the sidebar was too constrained vertically to render all the contents of the outline view, scrolling vertically did not reveal any new content until the changes described in this StackOverflow answer were implemented.