aboutsummaryrefslogtreecommitdiffstats
path: root/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx')
-rw-r--r--examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx31
1 files changed, 31 insertions, 0 deletions
diff --git a/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx b/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
new file mode 100644
index 0000000..1939134
--- /dev/null
+++ b/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import "./ExampleSidebar.scss";
+
+export default function Sidebar({ children }: { children: React.ReactNode }) {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+ <div id="mySidebar" className={`sidebar ${open ? "open" : ""}`}>
+ <button className="closebtn" onClick={() => setOpen(false)}>
+ x
+ </button>
+ <div className="sidebar-links">
+ <button>Empty Home</button>
+ <button>Empty About</button>
+ </div>
+ </div>
+ <div className={`${open ? "sidebar-open" : ""}`}>
+ <button
+ className="openbtn"
+ onClick={() => {
+ setOpen(!open);
+ }}
+ >
+ Open Sidebar
+ </button>
+ {children}
+ </div>
+ </>
+ );
+}