CSSのみでサイドバーに閉じるボタンを付けたい

###やりたいこと

以下のようなサイトを作っており、各コンテンツをdisplay: fixid;で固定しています。
このサイドバー（メニュー）に閉じるボタンをつけたいのですが、CSSのみで実装は可能でしょうか。
PCのみの対応で、WP管理画面を参考に閉じる開くボタンを設置したいと考えています。

参考にしたいWP管理画面

html
1<header>〜〜〜略〜〜〜</header>
2<nav id="mainNav">
3  <div class="mainNav-Bg"></div><!--/#adminNavBg-->
4  <div class="mainNavBox">
5    <ul class="contents">
6      <li class="item">
7        <input id="acc-subOpen-home" class="acc-subOpen" type="checkbox">
8        <label class="acc-unshown" for="acc-subOpen-home">Home</label>
9        <ul class="subNav">
10          <li><a href="./top.html">トップページ</a></li>
11          <li><a href="#">お知らせ一覧</a></li>
12          <li><a href="#">リリースノート一覧</a></li>
13        </ul>
14      </li>
15    </ul>
16  </div><!--/#mainNavBox-->
17</nav><!--/#mainNav-->
18<main>〜〜〜略〜〜〜</main>
19<footer></footer>

css
1header#adminBar {
2  background-color: #fff;
3  border-bottom: 1px solid #32373c;
4  height: 40px;
5  width: 100%;
6  padding: 0 10px;
7    top: 0;
8    left: 0;
9  position: fixed;
10  z-index: 99;
11  
12}
13〜〜〜略〜〜〜
14#mainNav {
15  margin-top: 40px;
16}
17#mainNav .mainNav-Bg {
18  background-color: #23282d;
19    top: 0;
20    bottom: -120px;
21  position: fixed;
22  width: 200px;
23  z-index: 1;
24}
25#mainNav .mainNavBox {
26  background-color: #23282d;
27  padding-top: 40px;
28  overflow-y: auto;
29    top: 0;
30    bottom: 0;
31    right: 0;
32    left: 0;
33  position: fixed;
34    max-width: 200px;
35  width: 100%;
36  z-index: 2;
37}
38〜〜〜略〜〜〜
39main {
40  height: 100%;
41  margin-left: 200px;
42  padding-top: 40px;
43}