/* primary declarations */

--primary_border: 1px solid rgba(255,255,255,.07);
--primary_font_color: #eeeeee;
--primary_border_radius: 5px;

/* navbar */

--navbar_background: #161616;

/* off_canvas */

--off_canvas_background: #151515;
--off_canvas_shadow: 0 24px 80px rgba(0,0,0,.55);
--off_canvas_menu_hover: rgba(255,255,255,.045);
--off_canvas_backdrop_background: rgba(0,0,0,.38);

.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
width: 100%;
padding: 1rem;
background: var(--navbar_background);
border-bottom: var(--primary_border);
z-index: 15;
}

.navbar_title {
font-size: 2rem;
}

.toggle_button {
font-size: 2rem;
text-decoration: none;
color: var(--primary_font_color);
}

.off_canvas_menu {
position: fixed;
width: 350px;
height: 100dvh;
max-height: 100dvh;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
border-right: var(--primary_border);
background: var(--off_canvas_background);
box-shadow: var(--off_canvas_shadow);
z-index: 25;
}

.off_canvas_menu.active  {
transform: translateX(0);
}

.off_canvas_menu ul {
display: flex;
flex-direction: column;
}

.off_canvas_menu li {
list-style: none;
border-bottom: var(--primary_border);
}

.off_canvas_menu li:last-child {
border-bottom: none;
}

.off_canvas_menu a {
display: block;
padding: 1rem;
font-size: 1.5rem;
text-decoration: none;
color: #ffffff;
}

.off_canvas_menu a:hover {
background: var(--off_canvas_menu_hover);
transition: background .2s ease, color .2s ease;
}

ul.off_canvas_submenu {
display: none;
}

ul.off_canvas_submenu_active {
display: flex;
}

li.off_canvas_submenu_li {
border: none;
}

a.off_canvas_submenu_link {
color: #a9a9a9;
padding-left: 2.5rem;
}

.off_canvas_backdrop {
position: fixed;
inset: 0;
background: var(--off_canvas_backdrop_background);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
opacity: 0;
visibility: hidden;
transition: .3s ease;
z-index: 10;
}

.off_canvas_backdrop.off_canvas_backdrop_active {
opacity: 1;
visibility: visible;
}

@media only screen and (max-width: 1200px) {

.off_canvas_menu {
top: 0;
left: 0;
width: 100%;
border-right: none;
}

.off_canvas_menu ul {
min-height: 100%;
margin: 0;
padding: 0;
align-items: flex-start;
}

.off_canvas_menu li {
width: 100%;
text-align: left;
}

.off_canvas_menu a {
width: 100%;
}

}

<div class="off_canvas_backdrop"></div>
<nav class="navbar">
<div class="navbar_title">Offcanvas demo</div>
<a href="#" onclick="off_canvas_menu(event)" class="toggle_button">Menu</a>
</nav>
<div class="off_canvas_menu">
<ul>
<li><a href="#" onclick="off_canvas_menu(event)">Close</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li>
<a href="#" onclick="off_canvas_submenu(event)">#Submenu 1</a>
<ul class="off_canvas_submenu">
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">1.1 Submenu element</a></li>
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">1.2 Submenu element</a></li>
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">1.3 Submenu element</a></li>
</ul>
</li>
<li>
<a href="#" onclick="off_canvas_submenu(event)">#Submenu 2</a>
<ul class="off_canvas_submenu">
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">2.1 Submenu element</a></li>
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">2.2 Submenu element</a></li>
<li class="off_canvas_submenu_li"><a class="off_canvas_submenu_link" href="#">2.3 Submenu element</a></li>
</ul>
</li>
</ul>
</div>

<script>
function off_canvas_menu(e) {
e.preventDefault();
const OFF_CANVAS_MENU = document.querySelector(".off_canvas_menu");
const OFF_CANVAS_BACKDROP = document.querySelector(".off_canvas_backdrop");
OFF_CANVAS_MENU.classList.toggle('active');

if (OFF_CANVAS_MENU.classList.contains('active')) {
OFF_CANVAS_BACKDROP.classList.toggle('off_canvas_backdrop_active');
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
OFF_CANVAS_BACKDROP.classList.remove('off_canvas_backdrop_active');
}

if (! OFF_CANVAS_MENU.classList.contains('active')) {

const ALL_SUBMENUS = document.querySelectorAll(".off_canvas_submenu");
ALL_SUBMENUS.forEach(submenu => {
submenu.classList.remove('off_canvas_submenu_active');
});
}
}

function off_canvas_submenu(e) {
e.preventDefault();
const CURRENT_SUBMENU = e.currentTarget.nextElementSibling;

if (CURRENT_SUBMENU && CURRENT_SUBMENU.classList.contains('off_canvas_submenu')) {
CURRENT_SUBMENU.classList.toggle('off_canvas_submenu_active');
}
}
</script>