Adding menu with close options.

js-src/components/page.tsx

@@ -199,11 +199,15 @@ export default function Page() {
                     }}><img src="/img/home.png" alt="Go to menu. (House icon)"/></a>
                 </div>
             </div>
-            <div style={{display: (hiddenMenu ? 'none': '')}} className="overlay-menu">
+            <div style={{display: (hiddenMenu ? 'none': '')}} className="overlay-menu-div">
-                <ul>
+                <div className="overlay-menu-div-header">
-                    <li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
+                    <a onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)} href="#"><img src="/img/close.png" alt="Close button, a common 'x'"/></a>
-                    <li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
+                </div>
-                </ul>
+                <div className="overlay-menu">
+                    <ul>
+                        <li><a href="#" onClick={(e: React.MouseEvent<HTMLElement>) => setHiddenMenu(true)}>Exit</a></li>
+                    </ul>
+                </div>
             </div>
             <div style={{display: 'none'}} className="menu-select-files">
                 <CenterElement>

public/css/styles.css

@@ -47,11 +47,8 @@ form label, form input {
     cursor: pointer;
 }
 
-.overlay-menu {
+.overlay-menu-div {
-    background: #343434;
+    background: #0E0E10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     font-size: 30px;
     position: fixed;
     width: 100%;
@@ -64,16 +61,45 @@ form label, form input {
     cursor: pointer;
 }
 
-.overlay-menu li {
+.overlay-menu-div-header a {
+    margin-right: 3%;
+    margin-top: 1.5vh;
+    font-size: 10px;
+    width: 23px;
+    height: 23px;
+}
+
+.overlay-menu-div-header a img {
+    width: 90%;
+    height: 90%;
+}
+
+.overlay-menu-div-header {
+    display: flex;
+    background: #343434;
+    height: 5%;
+    display: flex;
+    justify-content: end;
+    align-items: start;
+}
+.overlay-menu {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    width: 100%;
+    height: 90%;
+}
+
+.overlay-menu-div li {
     list-style: none;
 }
 
-.overlay-menu a {
+.overlay-menu-div a {
     color: white;
     text-decoration: none;
 }
 
-.overlay-menu li a:hover,.overlay-menu li a:focus {
+.overlay-menu-div li a:hover,.overlay-menu li a:focus {
     color: grey;
 }