refactor: 💡 add basic exmaple

Author: samAbeywickrama

examples/cra/src/App.js

@@ -1,9 +1,10 @@
 import React from "react";
 import ThreePanels from "./ThreePanels/index.js";
-
+import Basic from "./Basic";
 function App() {
   return (
     <div>
+      <Basic />
       <ThreePanels />
     </div>
   );

examples/cra/src/Basic/Basic.css

@@ -0,0 +1,23 @@
+.wrapper {
+  width: 400px;
+  background: #fff;
+  padding: 20px;
+}
+.menu-item {
+  margin-bottom: 20px;
+}
+.dropdown {
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+.dropdown-item {
+  padding: 10px;
+  margin-top: 20px;
+  background: #e2e2e2;
+}
+.logo {
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e2e2e2;
+  width: 200px;
+}

examples/cra/src/Basic/index.js

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import ReactOffcanvasComponent from "react-offcanvas-component";
+import "./Basic.css";
+import { FaTimes } from "react-icons/fa";
+
+const { Menu, DropdownMenu, CloseButton } = ReactOffcanvasComponent;
+
+const MenuItem = Menu.Item;
+
+function Basic() {
+  const [visibility, setVisibility] = useState(false);
+
+  const handleClick = () => {
+    setVisibility(visibility => !visibility);
+  };
+
+  const openAnimation = {
+    x: 0,
+    transition: {
+      duration: 200
+    }
+  };
+
+  return (
+    <div>
+      <button className="button" onClick={handleClick}>
+        {!visibility ? "Basic" : "Close basic"}
+      </button>
+      <ReactOffcanvasComponent
+        className="wrapper"
+        open={visibility}
+        openAnimation={openAnimation}
+      >
+        <CloseButton onClick={handleClick} style={{ right: 10 }}>
+          <FaTimes />
+        </CloseButton>
+        <div className="logo">ROC</div>
+        <Menu>
+          <MenuItem className="menu-item">Home</MenuItem>
+          <MenuItem className="menu-item">Another Menu Item</MenuItem>
+          <MenuItem hasDropdown name="dropdown-b" className="dropdown">
+            Dropdown
+            <DropdownMenu>
+              <MenuItem className="dropdown-item">Abc</MenuItem>
+              <MenuItem className="dropdown-item">Abc</MenuItem>
+              <MenuItem className="dropdown-item">Abc</MenuItem>
+            </DropdownMenu>
+          </MenuItem>
+          <MenuItem className="menu-item">Is n't it awesome</MenuItem>
+        </Menu>
+      </ReactOffcanvasComponent>
+    </div>
+  );
+}
+
+export default Basic;