在我们的设计里，边栏上面还有个关闭按钮 ..

回到 index.html .. 在这个边栏容器的里面，添加一个 div .. 上面加上一个 close-icon 类 .. 它里面可以放一个小图标 ..

i.material-icons

要使用的图标是 close ..

回到边栏的样式 .. .close-icon .. 高度可以让它跟导航栏一样 .. height 属性设置的就是元素的高度 .. 值可以是 50px ..

再给它添加点内边距 .. 用的是 padding .. 值是 8px ..

再用一个 cursor .. 设置一下鼠标指针 .. 设置成 pointer ..

再让它里面的元素垂直居中 .. display: flex ... 再把 align-items .. 设置成 center ..

然后我们需要给这个关闭元素添加点功能，让它可以关掉边栏 ..

打开页面使用的 main.js .. 找到 .ui.sidebar 以后.. 再用一下 sidebar 方法 .. 让 ui.sidebar 下面的 .close-icon 也可以控制这个边栏 ..

.sidebar('attach events', '.ui.sidebar .close-icon')

再回到 index.html .... 去掉在边栏元素上添加的这个 visible 类 ..

点一下菜单图标，会显示边栏 ...

点一下边栏上的关闭图标，可以关掉边栏 ..

在显示边栏的时候，页面会变暗，我们可以配置一下边栏组件，去掉这个效果 ..

再用一个 sidebar .. 这里我们要做的是 setting ，设置 ... 设置的是 dimPage ，让页面变暗 .. 把它的值设置成 false .. 意思就是关掉 dimPage 这种效果 ..

.sidebar('setting', 'dimPage', false)

现在边栏在显示的时候，页面就不会变暗了 ..

边栏上的这个菜单结构，跟导航栏上的菜单是一样的 .. 我们可以用一行 JavaScript 克隆一份在导航栏上的菜单，然后把它追加到边栏上 ..

先去掉在边栏上添加的这个菜单的代码 ..

回到页面用的脚本 .. 先找到 .ui.navbar 下面的 .menu .. 用一下 jQuery 的 clone 方法，就是复制一份找到的这个菜单 .. 再用一下 appendTo 这个方法 .. 把复制的菜单放到 .ui.sidebar 里面 ..

再到浏览器上试一下 ..

打开边栏 ... 上面仍然会显示一个菜单 .. 这个菜单内容是我们用 JavaScript，从导航栏那里复制过来的 ..