Html 在浏览手机版的网站时，我如何隐藏侧边栏？

我有一个侧边栏，在桌面浏览器上浏览时可以很好地工作，但在移动版的网站上却不能很好地工作。我正试图找出如何让它隐藏起来（可能有一个汉堡包图标或其他东西），并在点击时在手机屏幕上弹出

我可以使用CSS中的媒体查询来实现这种行为吗？对不起，我对这个很陌生

这是一个密码笔：

。侧栏{
背景:#f5；
右边框样式：实心；
右边框宽度：1px；
右边框颜色：gainsboro；
}
.btn组垂直{
边界半径：0px；
}
.侧边栏组{
溢出：隐藏；
/*禁用水平滚动*/
填充顶部：15px；
垫底：15px；
显示器：flex；
证明内容：中心；
}
.侧栏组按钮{
背景色：#F5；
颜色：黑色；
}
.侧边栏a组{
颜色：黑色；
文字装饰：无；
}
.侧栏组按钮：悬停，
a:悬停{
颜色：白色；
文字装饰：无；
背景颜色：灰色；
;
}
.徽章{
颜色：黑色；
}
/*精炼*/
#筛选结果{
位置：固定；
宽度：192px；
背景色：白色；
}
.侧边栏列表{
溢出：滚动；
/*禁用水平滚动*/
填充顶部：15px；
垫底：15px；
边框顶部样式：实心；
边框顶部宽度：1px；
}
.列出选项{
颜色：灰色；
}
.列表选项：悬停{
光标：指针；
颜色：黑色
}
/*个人用户的列表*/
.用户列表{
游标：默认值；
列表样式类型：无；
边缘顶部：8px；
左边距：5px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.userlist:悬停{
颜色：灰色；
光标：指针；
}

交易
朋友
新名单
搜索区