Navigational Panel Design
- thx. hard to do... there are 2 issues
- if i add Table of Contents in the content area, then u have the duplicate problem
here's problem of duplication of content, in main content area and in side panel.
- Better, is perhaps then, to add table of contents on the main area and remove the side panel.
- But then, u have the issue of different style for the same table of contents. E.g. Every other page, uses the side panel. But on the index pages, it's the same content of side panel, but not in side panel.
- Btw, i discussed this in one of the talk show. The general issue is, there is no standardize way to make the side nav panel.
- 2 issue of that, the design, and the tech implementation issue.
- first, the design. if u look at every other lang doc or tutorial site, look into their side panel. each site have diff semantics of the side panel.
- some, organize the side panel such that, side panel links are sub section or category of the current page.
- btw, Java doc, is the best example of this.
- but most other sites, including ms powershell, tutorial point, w3school etc etc, the semantic of side panel, namely, what links goes there, is pretty much "convenience". Namely, whatever use might want to view/jumpTo in connection to the current page.
- above is the side panel semantic issue.
- The implementation issue, is that, even with js and html5, it's very hard, extremely hard to do. Problem being: some sites, if no js, sidepanel don't show. Some, if no js, side panel don't highlight current page. And, all sites, when u go to a diff page, the side panel flashes, and after half a second, highlight of current page in the side panel links turnes on, and or, the side panel position moves about so that the link of current page in nav panel is vertically centered. These delay and flashing, are super annoying.
- also, some site's side panel, they have scroll bar (as in, a inner frame), some sites not, where you scroll whole page.
- The real proper tech to do side panel index/navBar, is HTML4 frame. Best example is JavaDoc for Java 8? or before.
- but the html5 fuckheads killed it. Google Apple. In particular, Google pushed to kill the html4 frames, saying that it messes with search indexing.
- so to this day, we don't have a good way to implement side panel index/TableOfContent.
- btw, i struggled wthh this side panel design and implementation every few years.
- have 2 or so blogs about it, and 1 livestream.
- currently, i decided , the best way for side panel today, the semantic of it, is to put whatever links that the viewer will find it relevant or likely to visit, as pertaining to the current page's content.
- that means, the side panel, include links of things that are technically a subset of current page, eg if current page is say date object, then the side panel includes all method and properties of the object. But also, it'll include navigation links not related to the tech classicification of the language, such as, link to pages related to coding date object, or goto top of the tutorial page, or link to a page about date format cultural conventions, or a link of structure of the website (such as typical in hamburger menu)
here's the problem of main content area design. special case must be considered for small screen, else it looks bad on phone.