feat: Create hamburger menu icon

johnedvard · Aug 26, 2022 · 09fa801 · 09fa801
1 parent e817169
commit 09fa801
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/src/index.html b/src/index.html
@@ -7,9 +7,16 @@
     <script type="module" src="index.js"></script>
   </head>
   <body>
-    <button id="loginout">
-      Loading.... <img src="assets/img/skull.png" />
-    </button>
-    <canvas width="800px" height="800px"></canvas>
+    <div id="container">
+      <canvas width="800px" height="800px"> </canvas>
+      <div id="menu">
+        <div id="hamburger">––</div>
+      </div>
+      <button id="loginout">
+        Loading.... <img src="assets/img/skull.png" />
+      </button>
+    </div>
+
+    <div></div>
   </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -3,12 +3,20 @@
   --bgc2: #555568;
   --fgc: #a0a08b;
   --fgc2: #e9efec;
+  --acc: #e20fa0;
 }
 body {
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
+}
+#container {
+  position: relative;
+}
+
+body,
+#container {
   display: flex;
   flex-flow: column;
   justify-content: center;
@@ -18,3 +26,34 @@ body {
 canvas {
   background-color: var(--bgc);
 }
+
+#menu {
+  color: var(--fgc2);
+  position: absolute;
+  font-size: x-large;
+  font-weight: bolder;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row-reverse;
+  align-content: center;
+  align-items: center;
+  padding: 5px 10px;
+}
+
+#hamburger {
+  height: 9px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 0.3;
+  cursor: pointer;
+}
+#hamburger:hover {
+  color: var(--acc);
+}
+#hamburger,
+#hamburger::after,
+#hamburger::before {
+  content: '––';
+}