Make sidebar toggleable on mobile

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
-*.json
 skouter
 *.sw[poqa]
 .env

assets/image/icon/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
+</svg>

assets/image/icon/justify-left.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-justify-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

assets/image/icon/x.svg

@@ -0,0 +1,3 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+</svg>

assets/main.css

@@ -6,6 +6,7 @@
 	--text-lighter: #28323B;
 	--text-lightest: #A1A7AD;
 	--outline: #DFE3E8;
+	--brand: #0f6b4b;
 }
 
 body {
@@ -219,13 +220,25 @@ section.radios h3 {
 
 svg.close {
 	position: absolute;
-	right: 5px;
-	top: 0px;
+	right: 10px;
+	top: 10px;
 	height: 50px;
 	width: 50px;
+	color: var(--text);
 }
 
 div.close-button {
 	width: 50px;
 	height: 50px;
 }
+
+div.sidebar-toggle {
+	width: 50px;
+}
+
+div.sidebar-toggle svg {
+	width: 100%;
+	height: 60px;
+	color: var(--text);
+	cursor: pointer;
+}

components/sidebar.vue

@@ -1,11 +1,24 @@
 <template>
-<menu v-if="!mobile" class="sidebar">
 
-<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x close"
+<div v-if="mobile && !toggled" class="sidebar-toggle">
+<svg @click="() => toggled = !toggled"
+width="1em" height="60" viewBox="0 0 16 16" class="bi bi-justify-left"
 fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
-fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0
-0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0
-0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/> </svg>
+fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
+1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0
+0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0
+0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/> </svg>
+</div>
+
+<menu v-if="!mobile || toggled" class="sidebar">
+
+<svg v-if="mobile" @click="() => toggled = !toggled"
+width="1em" height="60" viewBox="0 0 16 16" class="bi bi-justify-left close"
+fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path
+fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
+1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0
+0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0
+0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/> </svg>
 
 <img
 src="/assets/image/mintberry.jpg">
@@ -72,13 +85,12 @@ stroke-linecap="square" stroke-linejoin="round"/> </svg>
 </a>
 
 <a href="#sign-out" :class="active == 5 ? 'active' : ''">
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16">
-  <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
-  <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16"> <path d="M3
+2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1
+13h8V2H4v13z"/> <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> </svg>
 <span>Sign out</span>
 </a>
-<span>{{mobile}}</span>
 
 </menu>
 </template>
@@ -97,7 +109,7 @@ export default {
 	props: ['role', 'active'],
 	data() {
 		return {
-			mobile: null
+			mobile: false, toggled: false
 		}
 	},
 	created() {

package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+	  "watch": "webpack --mode development --watch"
+  },
+  "dependencies": {
+    "vue": "^3.2.41"
+  },
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "vue-loader": "^17.0.1",
+    "vue-template-compiler": "^2.7.13",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  }
+}