{"version":3,"sources":["images/illustration-devices.svg","components/Content/Content.js","images/logo.svg","images/icon-hamburger.svg","images/icon-close.svg","components/Header/Header.js","components/Footer/Footer.js","App.js","index.js"],"names":["Content","className","href","src","illustration","alt","Header","menuState","menuToggled","toggleNav","target","logo","onClick","closeIcon","hamburgerIcon","Footer","rel","App","useState","setMenuState","setMenuToggled","event","stopPropagation","prevValue","classList","startsWith","contains","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"4UAAe,G,KAAA,IAA0B,kD,OCmC1BA,EA/BC,WACd,OACE,uBAAMC,UAAU,OAAhB,UACE,0BAASA,UAAU,UAAnB,UACE,qBAAIA,UAAU,wBAAd,UACE,sBAAMA,UAAU,yDAAhB,iBADF,yBAMA,oBAAIA,UAAU,uBAAd,8CAGA,mBAAGA,UAAU,qBAAb,gEAGA,oBAAGA,UAAU,yBAAb,UAEE,mBAAGC,KAAK,IAAID,UAAU,eAAtB,6BAFF,yBAQF,qBAAKA,UAAU,eAAf,SACE,qBAAKA,UAAU,oBAAoBE,IAAKC,EAAcC,IAAI,WC7BnD,G,MAAA,IAA0B,kCCA1B,MAA0B,2CCA1B,MAA0B,uCCiE1BC,EA3DA,SAAC,GAA2C,IAAzCC,EAAwC,EAAxCA,UAAWC,EAA6B,EAA7BA,YAAaC,EAAgB,EAAhBA,UACxC,OACE,yBAAQR,UAAU,qEAAlB,UAEE,oBAAGC,KAAK,IAAID,UAAU,mBAAmBS,OAAO,QAAhD,UACE,qBAAKP,IAAKQ,EAAMN,IAAI,GAAGJ,UAAU,iBACjC,sBAAMA,UAAU,UAAhB,sCAEF,wBACEW,QAASH,EACTR,UAAU,eACV,gBAAeM,EAHjB,SAKE,qBACEN,UAAU,oBACVE,IAAKI,EAAYM,EAAYC,EAC7BT,IAAKE,EAAY,kBAAoB,0BAGzC,qBACEN,UAAS,wBAAmBM,EAAY,sBAAwB,GAAvD,aACNA,GAAaC,EAAc,uBAAyB,IAFzD,SAKE,qBAAIP,UAAU,mBAAd,UACE,oBAAIA,UAAU,mBAAd,SAEE,mBAAGC,KAAK,IAAIQ,OAAO,QAAQT,UAAU,mBAArC,uBAIF,oBAAIA,UAAU,mBAAd,SAEE,mBAAGC,KAAK,IAAIQ,OAAO,QAAQT,UAAU,mBAArC,wBAIF,oBAAIA,UAAU,mBAAd,SAEE,mBAAGC,KAAK,IAAIQ,OAAO,QAAQT,UAAU,mBAArC,uBAIF,oBAAIA,UAAU,+CAAd,SAEE,mBACEC,KAAK,IACLQ,OAAO,QACPT,UAAU,+CAHZ,8BCjBGc,G,MA/BA,WACb,OACE,yBAAQd,UAAU,SAAlB,UACE,oBAAGA,UAAU,kBAAb,yBAEE,mBACEA,UAAU,eACVC,KAAK,qGACLc,IAAI,sBACJN,OAAO,SAJT,6BAFF,OAYA,oBAAGT,UAAU,kBAAb,qBAEE,mBACEA,UAAU,eACVC,KAAK,8BACLc,IAAI,sBACJN,OAAO,SAJT,gCAFF,Y,YC0BSO,MArCf,WACE,MAAkCC,oBAAS,GAA3C,mBAAOX,EAAP,KAAkBY,EAAlB,KACA,EAAsCD,oBAAS,GAA/C,mBAAOV,EAAP,KAAoBY,EAApB,KAEMX,EAAY,SAACY,GACjBA,EAAMC,kBACFf,GACFa,GAAe,SAACG,GAAD,OAAgBA,KAEjCJ,GAAa,SAACI,GAAD,OAAgBA,MACxBhB,GAAaC,GAChBY,GAAe,SAACG,GAAD,OAAgBA,MAanC,OACE,sBAAKtB,UAAU,iCAAiCW,QAVzB,SAACS,IAErBd,IAAcc,EAAMX,OAAOc,UAAU,GAAGC,WAAW,gBACnDlB,GAAac,EAAMX,OAAOc,UAAUE,SAAS,sBAE9CjB,EAAUY,IAKZ,UACE,cAAC,EAAD,CACEd,UAAWA,EACXC,YAAaA,EACbC,UAAWA,IAEb,cAAC,EAAD,IACA,cAAC,EAAD,QCnCNkB,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,W","file":"static/js/main.f893e097.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/illustration-devices.30f97032.svg\";","import React from \"react\";\nimport \"./content.scss\";\nimport illustration from \"../../images/illustration-devices.svg\";\n\nconst Content = () => {\n  return (\n    <main className=\"main\">\n      <section className=\"section\">\n        <h1 className=\"section__main-heading\">\n          <span className=\"badge rounded-pill bg-dark section__main-heading--pill\">\n            new\n          </span>\n          monograph dashboard\n        </h1>\n        <h2 className=\"section__sub-heading\">\n          powerful insights into your team\n        </h2>\n        <p className=\"lead section__lead\">\n          Project planning and time tracking for agile teams\n        </p>\n        <p className=\"section__cta-container\">\n          {/* eslint-disable-next-line */}\n          <a href=\"#\" className=\"section__cta\">\n            schedule a demo\n          </a>\n          to see a preview\n        </p>\n      </section>\n      <div className=\"illustration\">\n        <img className=\"illustration__img\" src={illustration} alt=\"\" />\n      </div>\n    </main>\n  );\n};\n\nexport default Content;\n","export default __webpack_public_path__ + \"static/media/logo.52a9134a.svg\";","export default __webpack_public_path__ + \"static/media/icon-hamburger.d2a3eed8.svg\";","export default __webpack_public_path__ + \"static/media/icon-close.c77a2797.svg\";","import React from \"react\";\nimport \"./header.scss\";\nimport logo from \"../../images/logo.svg\";\nimport hamburgerIcon from \"../../images/icon-hamburger.svg\";\nimport closeIcon from \"../../images/icon-close.svg\";\n\nconst Header = ({ menuState, menuToggled, toggleNav }) => {\n  return (\n    <header className=\"header w-100 p-4 d-flex align-items-center justify-content-between\">\n      {/* eslint-disable-next-line */}\n      <a href=\"#\" className=\"header__branding\" target=\"_self\">\n        <img src={logo} alt=\"\" className=\"header__logo\" />\n        <span className=\"sr-only\">Project Tracking Logo</span>\n      </a>\n      <button\n        onClick={toggleNav}\n        className=\"header__menu\"\n        aria-expanded={menuState}\n      >\n        <img\n          className=\"header__menu-icon\"\n          src={menuState ? closeIcon : hamburgerIcon}\n          alt={menuState ? \"Menu Close Icon\" : \"Menu Hamburger Icon\"}\n        />\n      </button>\n      <nav\n        className={`header__popup ${menuState ? \"header__popup--open\" : \"\"} ${\n          !menuState && menuToggled ? \"header__popup--close\" : \"\"\n        }`}\n      >\n        <ul className=\"header__nav-list\">\n          <li className=\"header__nav-item\">\n            {/* eslint-disable-next-line */}\n            <a href=\"#\" target=\"_self\" className=\"header__nav-link\">\n              product\n            </a>\n          </li>\n          <li className=\"header__nav-item\">\n            {/* eslint-disable-next-line */}\n            <a href=\"#\" target=\"_self\" className=\"header__nav-link\">\n              features\n            </a>\n          </li>\n          <li className=\"header__nav-item\">\n            {/* eslint-disable-next-line */}\n            <a href=\"#\" target=\"_self\" className=\"header__nav-link\">\n              pricing\n            </a>\n          </li>\n          <li className=\"header__nav-item header__nav-item--highlight\">\n            {/* eslint-disable-next-line */}\n            <a\n              href=\"#\"\n              target=\"_self\"\n              className=\"header__nav-link header__nav-link--highlight\"\n            >\n              login\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n  );\n};\n\nexport default Header;\n","import React from \"react\";\nimport \"./footer.scss\";\n\nconst Footer = () => {\n  return (\n    <footer className=\"footer\">\n      <p className=\"footer__section\">\n        Challenge by\n        <a\n          className=\"footer__link\"\n          href=\"https://www.frontendmentor.io/challenges/project-tracking-intro-component-5d289097500fcb331a67d80e\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          Frontend Mentor\n        </a>\n        .\n      </p>\n      <p className=\"footer__section\">\n        Coded by\n        <a\n          className=\"footer__link\"\n          href=\"https://twitter.com/santu69\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          Shiva Santosh Jana\n        </a>\n        .\n      </p>\n    </footer>\n  );\n};\n\nexport default Footer;\n","import Content from \"./components/Content/Content\";\nimport Header from \"./components/Header/Header\";\nimport Footer from \"./components/Footer/Footer\";\nimport \"./app.scss\";\nimport \"./common.scss\";\nimport { useState } from \"react\";\n\nfunction App() {\n  const [menuState, setMenuState] = useState(false);\n  const [menuToggled, setMenuToggled] = useState(false);\n\n  const toggleNav = (event) => {\n    event.stopPropagation();\n    if (menuState) {\n      setMenuToggled((prevValue) => !prevValue);\n    }\n    setMenuState((prevValue) => !prevValue);\n    if (!menuState && menuToggled) {\n      setMenuToggled((prevValue) => !prevValue);\n    }\n  };\n\n  const checkToToggleNav = (event) => {\n    if (\n      (menuState && !event.target.classList[0].startsWith(\"header__nav\")) ||\n      (menuState && event.target.classList.contains(\"header__nav-link\"))\n    ) {\n      toggleNav(event);\n    }\n  };\n\n  return (\n    <div className=\"container-fluid app__container\" onClick={checkToToggleNav}>\n      <Header\n        menuState={menuState}\n        menuToggled={menuToggled}\n        toggleNav={toggleNav}\n      />\n      <Content />\n      <Footer />\n    </div>\n  );\n}\n\nexport default App;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n"],"sourceRoot":""}