Custom Menu Items for New UI

[kenneth_larsen]

  This idea has been developed and deployed to Canvas

  Idea open for vote Wed. January 6, 2016 - Wed. April 6, 2016  Learn more about voting...

I have had discussions with a number of institutions looking for a way to add custom items to the left hand navigation in the new UI.

Adding custom menu items

Additional Navigation Menu Item

Re: Has anyone been working on scripts for the new Beta UI? 

Like these schools, we have some items we have customized for our faculty and students that we would like to bring over to the new UI.

I have created some JavaScript code to add an individual item, but it would be great if there was a way to add an item that had a slide out list like the other navigation items in Canvas

The icing on the cake would also be the ability for the navigation to be targeted to a user's roles (additional resources for teachers verses resources for students) and if there was a way to choose an icon.

I understand that there is limited space in the left navigation for smaller screen sizes, but this would be a wonderful addition to the existing customization options in the new UI.

  Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2016-08-27)

[JACOBSEN_C]

The latest production release seems to have stopped custom navigation options from working.  What in the js needs to be edited to get them to display again,Kenneth Larsen ?

[syeo]

Hi Clint:

Same here.  Refer to screenshot.  I wonder if Kenneth or any JS experts can provide us some inputs.

Thank you so much!

Sincerely,
Sue

[tylerweldon]

Same here - trying to find a solution - I almost feel like my JavaScript is not firing. 

[MZelmanowicz]

My school is also experiencing the same issue. Has anybody found a solution yet?  Thanks 

[kenneth_larsen]

Sorry everyone. I am out of the office on spring break with my family so I didn't see this until just now. We don't actually use this at our institution since the change that allowed customizing the Help Menu as part of default Canvas. I will take a look and see if I can figure anything out.

[tylerweldon]

Thanks  @kenneth_larsen ‌ , but please don't take time away from your family! I have been looking deeper and our code is appending our HTML to a class ".ReactTrayPortal div" and I cannot find that in the code anywhere. When I changed the code to append directly to the parent div "#customTrayOverlay" the items will show up but they are not formatted correctly. I have included my code below. 

$('body').append('<div id="customTrayOverlay" style="width:' + $('#menu').width() + 'px;height: ' + $('#menu').height() + 'px;position: absolute;left: 0;top: 87px;z-index: 999;display:none;"></div>');

$('#global_nav_resources_link').click(function () {

//console.log(trayHtml);

$('.ReactTrayPortal div').addClass('ReactTray__Overlay ReactTray__Overlay--after-open');

$('.ReactTrayPortal div').css({
'position' : 'fixed',
'top' : '0px',
'left': '0px',
'right' : '0px',
'bottom': '0px'
});

//What I changed the code to to see if it was working. This will display the UL but its not styled correctly. 
$('#customTrayOverlay').append(trayHtml);

$('#menu, .menu-item.ic-app-header__menu-list-item a').addClass('ui-state-disabled').attr('disabled', 'disabled');

$('#customTrayOverlay').show();

$('#custom_nav').css('background-color', '#fff');

});
});

[kenneth_larsen]

 @tylerweldon , take a look at the default Canvas slide outs. I was trying to figure out what is going on and it looks like Canvas has changed the actual structure and classes of those slide out panels. If you can mirror those classes, that might fix the styling issue.

I am also going to give  @tfullwood ‌ a shout out to see if he is available to take a look as he is the genius that was able to get this feature working in the first place.

I have exhausted my time for this morning and don't want to hold up my family. I will try and keep track of the progress and jump back in if I get a chance.

Good luck!

[tylerweldon]

Thanks  @kenneth_larsen ‌ that's what I was thinking as well. I was looking at their slide out structure last night and noticed it looked different.  Thanks for the help and I'll keep searching and post what I find. Go have fun with your family!! 

[syeo]

Kenneth, take care and have a good rest.

Tyler, I am pasting the CSS coding below:

-----------------------------------------------
/* Resources tray */
#menu .icon-folder {     
   position: relative;     
   left: -4px;
}  

#menu .icon-folder[class*=icon-]:before,
#menu .icon-folder[class^=icon-]:before {     
font-size: 25px;
}

 body.primary-nav-expanded .menu-item__text {

    word-break: normal;
    word-wrap: normal;
}

/*Set Hover Colors on Resource Link*/
a#global_nav_resources_link:hover {
    color: white;
}
/*Set Active Colors on Resource Link Icon*/
#custom_nav.ic-app-header__menu-list-item--active i {
    color: #861F41 !important;
}

/* Canvas ePorfolio */
.ic-sidebar-logo__image {
     max-width: inherit;
     max-height: inherit;
}

/* Hide user institution-baed email*/
i.icon-star.standalone-icon {
    display:none;
}

[ronmarx]

To the extent I can offer some insight to this problem that hasn't been suggested already.

If this is the same problem we're having, then it might be related a new feature in the gradebook. The folks responsible at Instructure-Canvas are currently working on it. (We're not able to get to our Resources folder in the global menu either.) We diagnosed this as far as a Javascript breakage too.