Fugly but functional hamburger menu

3 files changed, 63 insertions, 0 deletions

diff --git a/src/Geshem.css b/src/Geshem.css
index 2e0f58e..e14e971 100644
--- a/src/Geshem.css
+++ b/src/Geshem.css
@@ -6,6 +6,44 @@
   font-family: monospace;
 }
 
+#menu {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  height: 4em;
+  width: 4em;
+  line-height: 4em;
+  text-align: center;
+  background-color: rgba(20, 30, 10, 0.8);
+}
+
+#bars {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+}
+
+.bar {
+  height: 0.2em;
+  width: 80%;
+  background-color: lightgray;
+}
+
+#about {
+  position: fixed;
+  left: 20px;
+  width: 80vw;
+  height: 80vh;
+  background-color: rgba(200, 200, 200, 0.8);
+  direction: rtl;
+}
+
+#menu:hover {
+  background-color: rgba(0, 120, 0, 1);
+}
+
 #date {
   font-size: 1.4em;
 }
diff --git a/src/Geshem.tsx b/src/Geshem.tsx
index 6e88f19..3bd99ad 100644
--- a/src/Geshem.tsx
+++ b/src/Geshem.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Map } from "./Map";
 import { Slider } from "./Slider";
 import { DateTime } from "./Datetime";
+import { Menu } from "./Menu";
 
 import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config";
 
@@ -73,6 +74,7 @@ export function Geshem({ date }: GeshemProps) {
   return (
     <>
       <Map images={images} slider={slider} />
+      <Menu />
       <DateTime images={images} slider={slider} />
       <Slider slider={slider} playback={playback} setSlider={setSlider} />
     </>
diff --git a/src/Menu.tsx b/src/Menu.tsx
new file mode 100644
index 0000000..a242a5d
--- /dev/null
+++ b/src/Menu.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+interface MenuProps {
+  // open: boolean,
+}
+
+export function Menu({ }: MenuProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div id="menu" onClick={() => { setOpen(!open) }}>
+      <div id="bars">
+        <div className="bar"></div>
+        <div className="bar"></div>
+        <div className="bar"></div>
+      </div>
+      {open ? <div id="about">
+        <p>זה הטקסט אודות האתר.</p>
+        <p>את כל הקוד אפשר למצוא ב<a href="">גיטהאב</a>.</p>
+      </div> : null}
+    </div>
+  );
+}