Hiding the Course Navigation Menu by Default

[MartieSeaman]

I am looking to build a theme on canvas that hides the course navigation menu by default for anyone not logged in or with certain roles. I'm helping a team to build public courses, and we don't want people having to log in. Ideally we would just be showing the page content and then having the learner navigate linearly. The Course Navigation menu takes up a lot of space that it would be nice if it was just disabled for the specific subaccount, or hidden by default. I know my way around CSS and Javascript well enough to be dangerous, so I'm curious if anyone has built something to do this. (Also, I apologize if this is the wrong place for this). 

[sendres]

Hi @MartieSeaman,

I've had occasion to remove the navigation menus from a course using JavaScript housed in the relevant sub-account. I found there are three tricks to doing so:

1. Only remove the menus for the students; you still want teachers to be able to use the menus when authoring the course.
2. Only remove the menus when you're actually in a course; you want the account navigation menus to remain for administrators.
3. You need to remove the menus on both desktop and mobile web views.

At any rate, I dusted off some old code, rewrote it a bit, and came up with this:

/**
 *  Check the Canvas course navigation menu to see if the last menu item is
 *  'Settings', which indicates the current user is a teacher/author in the
 *  course.  I recall this as being more reliable than using
 *  ENV.current_user_roles, but don't remember why.
 *  @returns {bool} True if the current user is teacher/author; otherwise false.
 */
function CurrentUserIsTeacher() {
    let course_nav_menu_items = document.getElementById("section-tabs");

    if (course_nav_menu_items) {
        return course_nav_menu_items.lastChild.innerText === "Settings";
    } else {
        return false;
    }
}


/**
 *  Remove the Canvas course navigation from desktop and mobile menus.
 */
(function () {
 
    /* Only remove the menu if we're in a course and NOT the teacher!  Canvas
     * will set ENV.course_id whenever we're in a course.  Outside a course,
     * ENV.COURSE_ID will be undefined.
     */
    if (!(ENV.course_id || CurrentUserIsTeacher())) {

        /* Remove the course navigation menu on desktop. */
        let desktop_course_nav = document.getElementById("left-side");
        if (desktop_course_nav) {
            desktop_course_nav.remove();
        }

        /* Fix the spacing for the remaining desktop content. */
        document.getElementById("main").style.marginLeft = "0";

        /* remove the mobile course navigation menu from the DOM */
        let mobile_course_nav = document.getElementById("mobileContextNavContainer");
        if (mobile_course_nav) {
            mobile_course_nav.remove();
        }
    }
})();

I knocked this together and gave it a quick test in just a few minutes before a meeting. I'd recommend testing this carefully in your beta environment before deploying to production. This could probably be improved a bit, and I invite suggestions from others on how to make it cleaner.