Ideas for Sidebars, Asides, and Offcanvas Elements
, and since then there has been discussion on and off about Tiki implementations. The first actual implementation was the Unified Admin Backend left-side menu when the layout was updated to use a Bootstrap accordion in that part of the page. Now that we're more familiar with it, it's a good time to see how else offcanvas, along with other approaches to sidebars and asides, can be used in Tiki.
Background: Tiki's standard side-column design
Since the earliest days, Tiki has had a content layout of three columns, maximum, a main center column and the options of either a left-side column or right-side column or both for a classic portal layout. The visibility of each side column can be toggled by the user without a page refresh. And the columns can fill the width of the viewport or be centered with side margins in a Bootstrap container div.
The Bootstrap offcanvas element
An offcanvas element is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport and overlay the main content. It’s often used for creating hidden navigation menus or additional content that slides in when activated. See https://getbootstrap.com/docs/5.3/components/offcanvas/.
First implementation: the UAB side menu
Currently in Tiki, as mentioned, the UAB side menu is contained in an offcanvas element. This isn't apparent in the desktop view because, as of Tiki 27, the visibility of the element is determined responsively by the page width rather than with a show/hide toggle. But in mobile view, a click on the menu button brings the offcanvas content into view. Either another click on the button or a click anywhere in the main content area will close the menu again.
This will be reworked soon to enable user control of the side-menu display so that clicking an icon will hide the menu and, importantly, allow the main page content to widen to fill the vacated space. Since Bootstrap offcanvas elements are an overlay by design, an alternative Bootstrap-compatible construction will be used to get the "push" effect (see discussion and demos at https://stackoverflow.com/questions/69181456/how-to-push-content-with-offcanvas-navbar and https://startbootstrap.com/previews/simple-sidebar).
Options for relocating or supplementing Tiki's side columns
What is proposed here isn't to replace the current Tiki layouts, but to add one or more new ones, choosing from the following options or others, and doing the implementation(s) as described below.
1. Move the side columns from the container grid to offcanvas elements
Offcanvas side columns - desktop
The image at left shows the side columns moved to Bootstrap offcanvas asides. In this example, the left offcanvas keeps the center column scrollable and unshaded. The right offcanvas shades the center and doesn't permit scrolling. One thing to decide is the best default behavior for this kind of arrangement, choosing from the configuration options shown here: https://getbootstrap.com/docs/5.3/components/offcanvas/. The offcanvas body gets a scrollbar automatically when there's a vertical overflow. In this test, fixed-width was on but the viewport was narrowed.
Using offcanvas asides, the page displays without the side-column content showing and then it has to be clicked into view (unless this can be changed or made a pref), unlike the default in Tiki, so this is one thing to think about when deciding which layout to use, or which options.
Implementation options
Regarding the implementation in Tiki's template files, the example shown in the animated gifs is using the "Basic Bootstrap" templates/layouts/social/layout_view.tpl file with the alternative grid layout lines commented out as there aren't multiple grid layouts since the side columns always are inside offcanvas asides. This would be named something like "Basic Bootstrap - Offcanvas Side Columns" ( templates/layouts/social-offcanvas-side-columns/layout_view.tpl ). Which of the current Tiki layout templates should get alternative versions like this needs to be discussed and decided. There might also be a case to be made for modifying the current layout_view.tpl files by adding switches to turn off the legacy side columns and activate the alternative side-column positions rather than creating new layout_view.tpl files, although it seems like that could get complicated. If the solution is to use switches in the same files rather than selecting a different layout template, the admin option would be a checkbox or selector for "Offcanvas side columns", for example.
By the way, the offcanvas asides can have top margins so they don't cover the top navbar, if that's a better look/functionality. That's how the one on UAB pages is (currently not collapsible except in mobile view).
Container width considerations
If there are no visible side columns and the center column (div.col1) uses the full width of the page except for the side margins outside the container div, then it's important to think about 1) whether to turn off the "fixed width" option and so use the full width of the browser for the main content, or to keep fixed width on and so what pixel width to set for it.
Limited-width text
For text content, good readability guidelines recommend an optimum character count of 50 to 75 characters per line (https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/). If optimal readability is important for the particular website, then either the fixed-width pixel count needs to be set relatively low, or the text lines in pages need to be limited by putting text in columns and/or placing illustrations, etc. next to paragraphs to keep the lines from being too wide, or a CSS rule should be added to impose a limit, like max-width: 75ch. This could be applied via a category if only some of the site's pages need this rule.
Offcanvas side columns on mobile
Offcanvas side columns - mobile
Also, there is more predictability about finding the side columns since their visibility toggle buttons are at the top of the page, whereas with the traditional layout the side column content is somewhere down the screen but exactly where depends on how much main content there is.
2. Flex grid and sticky-top side column content
Flex grid and fixed side column content
The gif doesn't show it but the left column expands from the left page margin in fixed-width view also.
It's based on this demo: https://www.cssscript.com/sidebar-navigation-bootstrap/
This implementation doesn't use offcanvas. Because side-column visibility can already be toggled with Tiki's current layouts, something that is missing for an interesting alternative to what we have now, is to keep the side column content in the viewport when the main column is scrolled, to have the side columns expand from the side margins, and to put the topbar between the side columns instead of above them.
In this implementation, the side columns have a pixel width (should be an admin preference option stated as a CSS variable for easy customization). In a first test, the side column had a position:fixed property but this caused problems with menu dropdowns/flyouts not displaying outside of the side column. So this position property was removed and a div class="sticky-top" was added inside to keep the column contents in view as the center column is scrolled.
Flex grid and sticky-top side column content - desktop
So, this isn't much of a change from our standard layout template except not using the Bootstrap grid column sizes and adding the sticky-top div in the side columns. This kind of layout was requested by Carsten a few years ago (specific px-width side columns and liquid center column) and this looks like a good solution. Also, Carsten's idea was that the side-column widths would be set by the user/admin.
Again, implementation decisions will need to be made: Does each current layout template get a variant that uses a flex grid plus sticky-top side columns layout? Would the variant be created by duplicating and modifying the current files, to produce new options in the layout selector? Or would the new layout option be coded into the current templates and activated as an admin preference option?
3. Other possibilities
- Add new areas to existing side columns: Leave the current side column layouts as they are and implement the ability to add new offcanvas module zones, for example, but maybe this would create too much clutter - one or two offcanvas asides plus one or two side columns in the page plus the main content column.
- Etc.: There are probably other ways to toggle the visibility, position, behavior and so on of the side columns but the above ideas are what first came to mind.
Related ideas to consider:
PluginOffCanvas, etc.
Related to this, seems like a "PluginOffcanvas" and/or "Offcanvas Module" should be possible and pretty easy, for single-page offcanvas elements or assigned per category or whatever. It doesn't seem to matter where the offcanvas element HTML tags and content are, in the page, for the results to display at the page margins. The plugin or module could have parameters matching the options shown on the Bootstrap doc pages (https://getbootstrap.com/docs/5.3/components/offcanvas/). There's an implementation for WordPress described here: https://elementor.com/help/off-canvas-widget/.
{HTML()} <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body">{HTML} {img type="randomGalleryId" randomGalleryId="15" responsive="y" class="mt-5"}{HTML()} A random image from gallery 15 </div> </div> {HTML}
Offcanvas right
).
(This demo shows a couple of things to be careful about: 1) z-indexes - a selection element in the page is higher than the offcanvas but shouldn't be so shows through it, and 2) on some phones at least the offcanvas element is as wide as the viewport so the main content can't be tapped to slide the offcanvas element out of view. The phone can be rotated to landscape orientation to expose the main content but it's probably better to have a close icon in the offcanvas area.)
Other content and uses
Almost all references to offcanvas elements describe them being used for menus and site navigation but it might be interesting to think about what else they could be used for, in a multi-featured platform like Tiki. See also https://getbootstrap.com/docs/5.3/examples/sidebars/
Toggle icons and links
It would be good to think about the icons or links that are used to open the offcanvas content. The hamburger icon is good when the content is a menu but not so appropriate when the content is a module zone, especially one that doesn't contain a menu. The left or right chevrons are good options to indicate the motion or direction, but don't give any clues about content. Buttons with text labels are probably good for specialized content or to be more explicit, like "Show examples" or "Open sidebar". This is a good candidate for new "Tiki icon set" icons, for example with a vertical line on one side representing the page margin, a rectangle extending from it indicating the offcanvas content, and maybe an arrow or chevron indicating the movement.