Javascript 将动画Jquery侧导航转换为Vanilla JS

我需要帮助将Jquery端导航菜单转换为Vanilla JS。我是JS的初学者，不知道如何实现这一点。还有什么建议可以让汉堡图标在点击时变成X？非常感谢。谢谢你的帮助

/**********************
****航行****
**********************/
#边栏{
背景：#151718；
宽度：12.500em；
身高：100%；
显示：块；
位置：绝对位置；
左：-12.500em；
顶部：0px；
过渡：左0.3s线性；
}
#侧栏可见{
左：0.000em；
}
导航{
文本对齐：居中；
}
保险商实验室{
保证金：0.000em；
填充：0.000em；
}
ulli{
列表样式：无；
}
ullia{
背景：#1c1e1f；
颜色：#ccc；
边框底部：1px实心#111；
显示：块；
宽度：11.250em；
填充：0.625em；
文字装饰：无；
文本转换：大写
}
悬停{
颜色：#4876FF；
}
#边栏btn{
显示：内联块；
垂直对齐：中间对齐；
宽度：1.563em；
高度：1.250em；
光标：指针；
保证金：1.250em；
位置：绝对位置；
顶部：0.000em；
右：-3.750em；
}
#边栏btn跨度{
高度：0.063em；
背景:"282828 ;；
边缘底部：0.313em；
显示：块；
}

响应侧导航
将
$（document.ready（）
替换为
window.onload=function（）{}
.addEventListener（“单击”，function（）{}）
以查看
。单击（function（）{}）
<代码>文档.getElementById（）

用于

jQuery（）

<代码>元素.classList.toggle（）用于

。toggleClass（）

/**********************
****航行****
**********************/
#边栏{
背景：#151718；
宽度：12.500em；
身高：100%；
显示：块；
位置：绝对位置；
左：-12.500em；
顶部：0px；
过渡：左0.3s线性；
}
#侧栏可见{
左：0.000em；
}
导航{
文本对齐：居中；
}
保险商实验室{
保证金：0.000em；
填充：0.000em；
}
ulli{
列表样式：无；
}
ullia{
背景：#1c1e1f；
颜色：#ccc；
边框底部：1px实心#111；
显示：块；
宽度：11.250em；
填充：0.625em；
文字装饰：无；
文本转换：大写
}
悬停{
颜色：#4876FF；
}
#边栏btn{
显示：内联块；
垂直对齐：中间对齐；
宽度：1.563em；
高度：1.250em；
光标：指针；
保证金：1.250em；
位置：绝对位置；
顶部：0.000em；
右：-3.750em；
}
#边栏btn跨度{
高度：0.063em；
背景:"282828 ;；
边缘底部：0.313em；
显示：块；
}

响应侧导航






window.onload=函数（）{
document.getElementById（'sidebar-btn'）
.addEventListener（“单击”，函数（）{
document.getElementById（'sidebar'）
.classList.toggle（'visible'）；
});
};