Canvas LMS Better Left Menu Plug-in

Plugin for the Canvas LMS theme app that adds several options to improve the left menu.

Features

This plug-in fixes the following issues with the left menu:

• The scrollbar on the menu will adjust it's height to fill the available screen height.
• The tooltips will display on the right hand side so they don't overlap with the other links in the menu.

The following configurable options are available:

• Hide the scrollbar or have it only appear on hover.
• Switch back to the classic menu styles (with current selection background in primary color).
• Use a thinner version of the scrollbar.
• Reset the scrollbar on page scroll or when the menu is expanded.

Installation

Using NPM:

npm install @artevelde-uas/canvas-lms-better-left-menu-plugin

Using Yarn:

yarn add @artevelde-uas/canvas-lms-better-left-menu-plugin

Usage

Just import the plug-in and add it to the Canvas app:

import { run, addPlugin } from '@artevelde-uas/canvas-lms-app';
import betterLeftMenuPlugin from '@artevelde-uas/canvas-lms-better-left-menu-plugin';

addPlugin(betterLeftMenuPlugin, {
    classicStyles: true,
    thinScrollbar: true,
    showScrollbar: 'hover',
    resetOnScroll: true
});

run();

Options

| Name | Type | Default | Description | | :---------------: | :-----------------: | :-----: | :-------------------------------------------------------------------------------------------------------------------------------- | | showScrollbar | {String\|Boolean} | true | Determines whether the scrollbar should be shown or not, or only on hover (possible values: true, 'hover' or false). | | thinScrollbar | {Boolean} | false | Use a thin scrollbar. | | classicStyles | {Boolean} | false | Use the classic menu styles (with current selection background in primary color). | | resetOnScroll | {Boolean} | false | Determines whether the scrollbar should be reset on scroll or when the menu is expanded. |