Offcanvas Menu for Cassiopeia

offcanvas-metismenu.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
		<span class="icon-menu" aria-hidden="true"></span>
	</button>
	<div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
		<div class="offcanvas-header">
			<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<?php require __DIR__ . '/dropdown-metismenu.php'; ?>
		</div>
	</div>
</nav>

offcanvas.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
		<span class="icon-menu" aria-hidden="true"></span>
	</button>
	<div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
		<div class="offcanvas-header">
			<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
		</div>
		<div class="offcanvas-body">
			<?php require 'modules/mod_menu/tmpl/default.php'; ?>
		</div>
	</div>
</nav>

user.css

.offcanvas.show {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
  .offcanvas-start {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    width: 100%;
    margin-top: 1rem;
  }
  .offcanvas .metismenu.mod-menu .mm-collapse {
    background-color: transparent;
  }
  .offcanvas .metismenu.mod-menu .metismenu-item > a {
    color: #fff;
  }
}
.offcanvas-header > *:only-child {
  margin-left: auto;
}

Thank you for the code. It is very useful. Is there a way to insert my site's logo at the center top of your offcanvas menu and to wrap the wording of the sub-menu items that are currently flowing out offscreen on the right side of the container:

I do not want to make my offcanvas menu wider than the 66% screen width that it currently is.

Please check the last version of the offcanvas: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4?permalink_comment_id=4529752#gistcomment-4529752

Check line-break or other possibilities in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/line-break

Thank you for your off canvas menu code (using offcanvas.php) it works great! On the full screen I use this CSS to add an underline to active menu Item (/* Underline active Menu Item */ .container-header .mod-list li.active > a { text-decoration: underline #7ed956 3px; }
But I am unable to get it to work on the off canvas menu?
Any suggestions are appreciated. Thanks.

@JoomlaRookie you should check with the browser inspector (F12) the specificity of your css definition, probably it is something else overwriting it.

After using FireFox web development tools I could find no errors in my CSS that would cause the underline to active menu item not to appear on mobile devices.
Full Screen image:

Firefox Responsive Design Image:

And screenshot of menu on iPhone 12 iso 17.4:

No text decoration on iPhone. Any suggestions are appreciated. Thanks.

I was able to create a way of highlighting the active menu item by adding this to user.css:
@media (max-width: 991.98px){li.nav-item.current.active {color:#7ed956;} }
This allows offcanvas menu to change active link to different color and does not interfere with menu display on larger displays greater than 991.98px.

I would love to have the option to use the offcanvas on all viewports.
I tried to achieve this by removing the navbar-expand-lg class but it's not working as it should