feature: responsive designer (#435)

* feat(index): add viewport meta tag * feat:(header): add header responsiveness * feat: create burger icon * feat: create burger menu in menubar * feat: add new color * feat: add burger menu styles * refactor: isolate the Menu component * refactor: MenuDropDown component usage
globocom · Oct 30, 2023 · 978b153 · 978b153
1 parent 22e39d9
commit 978b153
Show file tree

Hide file tree

Showing 5 changed files with 317 additions and 106 deletions.
diff --git a/website/components/icons/burger.js b/website/components/icons/burger.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2016, Globo.com (https://github.com/globocom)
+ *
+ * License: MIT
+ */
+
+import React from "react";
+
+export function Burger() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 8H28M4 16H28M4 24H28"
+        stroke="currentColor"
+        stroke-width="3.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/website/components/menubar.js b/website/components/menubar.js
@@ -10,6 +10,9 @@ import Divider from "@material-ui/core/Divider";
 import Menu from "@material-ui/core/Menu";
 import Toolbar from "@material-ui/core/Toolbar";
 import Button from "@material-ui/core/Button";
+import { useCallback } from "react";
+
+import { Burger } from "./icons/burger";
 
 const Element = Scroll.Element;
 const scroller = Scroll.scroller;
@@ -18,6 +21,7 @@ const MenuBar = props => {
   const { background = common.white, showLeft, children } = props;
   const [showMenuDropdown, setShowMenuDropdown] = useState(false);
   const documentationMenu = useRef(null);
+  const [closeMenu, setCloseMenu] = useState(true);
 
   const handleTouchTap = event => {
     // This prevents ghost click.
@@ -27,10 +31,23 @@ const MenuBar = props => {
     setTimeout(() => setShowMenuDropdown(true), 300);
   };
 
-  const handleRequestClose = () => setShowMenuDropdown(false);
+  const handleChangeOpenMenu = useCallback(() => {
+    setCloseMenu(prev => !prev);
+  }, []);
+
+  const handleRequestClose = () => {
+    setShowMenuDropdown(false);
+    !closeMenu && handleChangeOpenMenu();
+  };
+
+  const dropDownData = {
+    documentationMenu,
+    handleRequestClose,
+    showMenuDropdown
+  };
 
   return (
-    <Element name="appbar">
+    <Element name="appbar" className="appBar">
       <Sticky>
         {({ style }) => (
           <Toolbar
@@ -41,7 +58,7 @@ const MenuBar = props => {
               border: "1px solid rgba(0, 0, 0, 0.1)"
             }}
           >
-            <Grid container>
+            <Grid container className="linear-menu">
               {showLeft ? (
                 <Grid item xs={6}>
                   <Grid container direction="row" justify="space-evenly">
@@ -55,65 +72,7 @@ const MenuBar = props => {
                     >
                       Documentation
                     </Button>
-                    <Menu
-                      id="simple-menu"
-                      anchorEl={documentationMenu.current}
-                      open={Boolean(showMenuDropdown)}
-                      onClose={handleRequestClose}
-                    >
-                      <MenuItem
-                        onClick={handleRequestClose}
-                        component={Link}
-                        to="/docs/overview"
-                      >
-                        Overview & Usage
-                      </MenuItem>
-                      <MenuItem
-                        component={Link}
-                        onClick={handleRequestClose}
-                        to="/docs/customization"
-                      >
-                        Customization
-                      </MenuItem>
-                      <MenuItem
-                        component={Link}
-                        onClick={handleRequestClose}
-                        to="/docs/plugins"
-                      >
-                        Plugins
-                      </MenuItem>
-                      <MenuItem
-                        component={Link}
-                        onClick={handleRequestClose}
-                        to="/docs/custom-entities"
-                      >
-                        Custom Entities
-                      </MenuItem>
-                      <MenuItem
-                        component={Link}
-                        onClick={handleRequestClose}
-                        to="/docs/saving-loading"
-                      >
-                        Saving & Loading
-                      </MenuItem>
-                      <Divider />
-                      <MenuItem
-                        component={"a"}
-                        onClick={handleRequestClose}
-                        href="http://draftjs.org"
-                        target="_blank"
-                      >
-                        Draft.js
-                      </MenuItem>
-                      <MenuItem
-                        component={"a"}
-                        onClick={handleRequestClose}
-                        href="https://facebook.github.io/react/"
-                        target="_blank"
-                      >
-                        React
-                      </MenuItem>
-                    </Menu>
+                    <MenuDropDown {...dropDownData} />
                     <Button
                       href="https://draftjs.slack.com/messages/megadraft/"
                       target="_blank"
@@ -136,11 +95,120 @@ const MenuBar = props => {
                 {children}
               </Grid>
             </Grid>
+            <div
+              className={`dropdown-menu ${closeMenu &&
+                "dropdown-menu__hidden"}`}
+            >
+              <div
+                className={`dropdown-menu__header ${!showLeft &&
+                  "dropdown-menu__header__dark"} `}
+              >
+                Menu{" "}
+                <button onClick={handleChangeOpenMenu}>
+                  <Burger />
+                </button>
+              </div>
+              {showLeft && (
+                <div className="dropdown-menu__list">
+                  <Button component={Link} to="/">
+                    Home
+                  </Button>
+                  <Button
+                    ref={documentationMenu}
+                    onClick={handleTouchTap}
+                    style={{ boxShadow: common.white }}
+                  >
+                    Documentation
+                  </Button>
+                  <MenuDropDown {...dropDownData} />
+                  <Button
+                    href="https://draftjs.slack.com/messages/megadraft/"
+                    target="_blank"
+                    onClick={handleRequestClose}
+                  >
+                    Slack channel
+                  </Button>
+                  <Button
+                    href="https://github.com/globocom/megadraft"
+                    target="_blank"
+                    onClick={handleRequestClose}
+                  >
+                    Repository
+                  </Button>
+                </div>
+              )}
+              <div className="dropdown-menu__list">{children}</div>
+            </div>
           </Toolbar>
         )}
       </Sticky>
     </Element>
   );
 };
 
+const MenuDropDown = props => {
+  const { documentationMenu, handleRequestClose, showMenuDropdown } = props;
+  return (
+    <Menu
+      id="simple-menu"
+      anchorEl={documentationMenu.current}
+      open={Boolean(showMenuDropdown)}
+      onClose={handleRequestClose}
+    >
+      <MenuItem
+        onClick={handleRequestClose}
+        component={Link}
+        to="/docs/overview"
+      >
+        Overview & Usage
+      </MenuItem>
+      <MenuItem
+        component={Link}
+        onClick={handleRequestClose}
+        to="/docs/customization"
+      >
+        Customization
+      </MenuItem>
+      <MenuItem
+        component={Link}
+        onClick={handleRequestClose}
+        to="/docs/plugins"
+      >
+        Plugins
+      </MenuItem>
+      <MenuItem
+        component={Link}
+        onClick={handleRequestClose}
+        to="/docs/custom-entities"
+      >
+        Custom Entities
+      </MenuItem>
+      <MenuItem
+        component={Link}
+        onClick={handleRequestClose}
+        to="/docs/saving-loading"
+      >
+        Saving & Loading
+      </MenuItem>
+      <Divider />
+      <MenuItem
+        component={"a"}
+        onClick={handleRequestClose}
+        href="http://draftjs.org"
+        target="_blank"
+      >
+        Draft.js
+      </MenuItem>
+      <MenuItem
+        component={"a"}
+        onClick={handleRequestClose}
+        href="https://facebook.github.io/react/"
+        target="_blank"
+      >
+        React
+      </MenuItem>
+    </Menu>
+  );
+};
+
 export default MenuBar;
diff --git a/website/index_tpl.html b/website/index_tpl.html
@@ -4,25 +4,42 @@
     <meta charset="utf-8" />
     <title>Megadraft - Draft.JS Rich Text Editor</title>
 
-    <meta name="author" content="Globo.com">
-    <meta name="description" content="Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility" />
-    <meta name="keywords" content="editor, rich text, JavaScript, react, draft.js" />
+    <meta name="author" content="Globo.com" />
+    <meta
+      name="description"
+      content="Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility"
+    />
+    <meta
+      name="keywords"
+      content="editor, rich text, JavaScript, react, draft.js"
+    />
     <meta name="robots" content="all" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta property="og:url" content="https://globocom.github.io/megadraft" />
     <meta property="og:title" content="Megadraft - Draft.JS Rich Text Editor" />
-    <meta property="og:description" content="Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility" />
-    <meta property="og:image" content="https://globocom.github.io/megadraft/images/megadraft_logo_black_version_300x300.png" />
+    <meta
+      property="og:description"
+      content="Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility"
+    />
+    <meta
+      property="og:image"
+      content="https://globocom.github.io/megadraft/images/megadraft_logo_black_version_300x300.png"
+    />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="pt_BR" />
-    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
 
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:400,300,600"
       rel="stylesheet"
-      type="text/css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github.min.css">
-    <link href="styles/app.css" rel="stylesheet">
+      type="text/css"
+    />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github.min.css"
+    />
+    <link href="styles/app.css" rel="stylesheet" />
   </head>
   <body>
     <div id="container"></div>

diff --git a/website/styles/_colors.scss b/website/styles/_colors.scss
@@ -1,5 +1,10 @@
 $black: #000;
+$black-20: #00000033;
+$black-50: #00000080;
+
 $white: #fff;
+$white-80: #ffffffcc;
+
 $red: red;
 $hit-color: #ffcf00;
 $code-color: #d14;
@@ -8,4 +13,4 @@ $light-yellow: #ebdbb2;
 $gray-050: #fafafa;
 $gray-100: #ccc;
 $gray-300: #333;
-$gray-400: #282828;
+$gray-400: #282828;