diff options
Diffstat (limited to 'examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx')
| -rw-r--r-- | examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx | 31 |
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> + </> + ); +} |
