History: Ideas for Sidebars, Asides, and Offcanvas Elements

{HTML()}<style>.mobile-offcanvas-image { max-height: 350px; width: auto; }</style>{HTML}
{DIV(class="lead")}Bootstrap added its offcanvas page element in [https://blog.getbootstrap.com/2021/05/05/bootstrap-5/|version 5.0], 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. {DIV}

!! 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
{DIV(class="float-start py-4 pe-4 text-center mb-3" style="max-width: 400px")}{img src="display3055" alt="desktop offcanvas side columns" title="Desktop offcanvas side columns" class="border border-2 p-1 "}%%% Offcanvas side columns - desktop{DIV}The use case for moving side column content offcanvas is probably to have a visually clean, uncluttered page or site but still have quick access to the Tiki modules that typically are assigned to side columns.  The page shown in the image is the default HomePage when Tiki is installed, with some additions, so is fairly empty and the advantages of offcanvas sidebars aren't as clear as they would be if the page was filled with a lot of content.  In this implementation, the default view is for the side module zones to not display on page load but be clicked into view. This is opposite the traditional Tiki behavior of the side modules displaying until the user toggles them off (which is temporary as they are displaying again when another page is navigated to, or the page is refreshed).

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. 

{DIV(class="alert alert-info mx-auto" style="max-width: 75ch")}{DIV(type="h4" class="alert-heading")}{icon name="text-width"} Limited-width text{DIV}
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. {DIV}

!!! Offcanvas side columns on mobile
{DIV(class="clearfix")}{DIV(class="float-end pb-4 ps-4 text-center" style="max-width: 300px")} {img src="display3056" alt="mobile offcanvas side columns" title="Mobile offcanvas side columns" class="mobile-offcanvas-image border border-2 p-1"}%%%Offcanvas side columns - mobile{DIV} Using offcanvas asides seems like a good idea especially for the mobile view of Tiki sites. The current behavior of side columns in mobile views is to display below the center column, so the user sees them at the bottom of the page after scrolling through the main content. This works fine but the side columns are no longer distinguished as such, and there's a risk of them being seen as just more center column content. While this may not matter in practice, is not an issue at all when the side columns are displayed as offcanvas elements. Then they have their "side column" identity and behavior if even in small screens, as they slide in from the side with a button tap.

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. {DIV}

!!! 2. Flex grid and sticky-top side column content
{DIV(class="float-start py-4 pe-4 text-center mb-3" style="max-width: 400px")} {img src="display3057" alt="Flex grid and fixed side column content" title="Flex grid and fixed side column content" class="border border-2 p-1"}%%%Flex grid and fixed side column content{DIV} Another alternative is to use flexbox for page's middle row, containing the left, center, and right columns, rather than Bootstrap grid classes, so the center column narrows and widens fluidly as the side columns are toggled in and out of view.

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. 

{DIV(class="clearfix")}{DIV(class="float-end pb-4 ps-4 text-center" style="max-width: 400px")} {img src="display3058" alt="Flex grid and sticky-top side column content - desktop" title="Flex grid and sticky-top side column content - desktop" class="mobile-offcanvas-image border border-2 p-1"}%%%Flex grid and sticky-top side column content - desktop{DIV}
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? {DIV}

!!! 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/]. 
{CODE()}
{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}
{CODE} produces (with some content added): %%% %%%
{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"}
'':: A random image from gallery 15::''

^Wasn't sure where to put this background info in the page, so it's here: The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes. In other words, it’s a way to include additional information that is tangentially related to the surrounding content ([https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside]).^
{HTML()}
  </div>
</div>
{HTML}

(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 [https://dev.tiki.org/Proposal%20for%20Tiki%20icon%20font%20set|"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.