Found this content helpful? Log in or sign up to leave a like!
Hello,
A recent Canvas update left a lot of institutions without the ability to add additional resources to their Canvas Global Navigation. Previous discussions include:
Custom JavaScript/CSS Changes Adding custom menu items https://community.canvaslms.com/ideas/4034-custom-menu-items-for-new-ui
Source Code: https://github.com/robert-carroll/ccsd-canvas/tree/main/global-nav-custom-tray
This JavaScript will spawn and style (with CSS) DOM elements that mimic the Canvas global navigation tray, with animated easing for opening and closing the tray, and other interactions with the global navigation.
To create a tray that only shows up for certain roles, wrap the tray in an if condition that checks for role.
2 role example
if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0) {
// tray source here
}1 role example
if(ENV.current_user_roles.indexOf('student') >= 0){
$(document).ready(function() {
///* set tray title, icon, links and footer here *///
///* for user role based conditions see README *///
var title = 'Resources',
svg = '/pin-gregor-cresnar.svg',
trayLinks = [
{ href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
{ href: 'http://www.google.com', title: 'Google' },
{ href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional text description' }
],
footer = 'Optional footer text, put whatever you want here, or leave it blank.';
///* options are above for convenience, continue if you like *///
// tray source here
});
}You can also create a tray that will appear for all users, but provide links (or even the tray name, icon, and footer), specific to the user role.
var title = 'Resources',
svg = '/pin-gregor-cresnar.svg',
// default links for all users
trayLinks = [
{ href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
{ href: 'http://www.google.com', title: 'Google' },
{ href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional text description' }
],
footer = 'Default footer for all users';
// these links are appended to the tray by user role
if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0){
trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Teacher Library', desc:'Optional text description' })
trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
footer = 'Teacher/Admin Footer overwrites default';
} else if (ENV.current_user_roles.indexOf('student') >= 0) {
trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Student Library', desc:'Optional text description' })
trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
footer = 'Student Footer overwrites default';
}Pin by Gregor Cresnar from The Noun Project
https://creativecommons.org/licenses/by/3.0/
hi, it looks like a recent code deploy may have changed the spacing above and below the icon. I haven't found where to adjust this is in the custom CSS, can you point me in the right direction, Robert Carroll?
Just slipping it verbatim into our test instance doesn't produce a tray when clicked.
Works now, but we're back to the odd spacing. Is the JS picking up the 26px from your svg file? I'm back to not being able to edit the attribute and preserving the icon...
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
