{"version":3,"sources":["links.js","context.js","Navbar.js","Sidebar.js","Modal.js","App.js","index.js"],"names":["links","id","url","text","socialLinks","icon","className","SocialBar","map","el","href","alt","AppContext","React","createContext","AppProvider","children","useState","isSidebarOpen","setIsSidebarOpen","isModalOpen","setIsModalOpen","Provider","value","openSidebar","closeSidebar","openModal","closeModal","useGlobalContext","useContext","Navbar","onClick","link","Wrapper","styled","aside","Sidebar","Modal","App","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.9f255171.chunk.js","sourcesContent":["import React from \"react\";\r\nimport { FaTwitter, FaFacebook, FaLinkedinIn } from \"react-icons/fa\";\r\n\r\nconst links = [\r\n  {\r\n    id: 1,\r\n    url: \"/\",\r\n    text: \"home\",\r\n  },\r\n  {\r\n    id: 2,\r\n    url: \"/about\",\r\n    text: \"chi siamo\",\r\n  },\r\n  {\r\n    id: 3,\r\n    url: \"/progetti\",\r\n    text: \"progetti\",\r\n  },\r\n  {\r\n    id: 4,\r\n    url: \"/contatti\",\r\n    text: \"contattaci\",\r\n  },\r\n];\r\n\r\nconst socialLinks = [\r\n  {\r\n    id: 1,\r\n    url: \"https://twitter.com\",\r\n    icon: <FaTwitter className=\"icon\" />,\r\n  },\r\n  {\r\n    id: 2,\r\n    url: \"https://facebook.com\",\r\n    icon: <FaFacebook className=\"icon\" />,\r\n  },\r\n  {\r\n    id: 3,\r\n    url: \"https://linkedin.com\",\r\n    icon: <FaLinkedinIn className=\"icon\" />,\r\n  },\r\n];\r\n\r\nconst SocialBar = () => {\r\n  return (\r\n    <ul className=\"social\">\r\n      {socialLinks.map((el) => {\r\n        const { id, url, icon } = el;\r\n        return (\r\n          <li key={id}>\r\n            <a href={url} alt=\"social\">\r\n              {icon}\r\n            </a>\r\n          </li>\r\n        );\r\n      })}\r\n    </ul>\r\n  );\r\n};\r\n\r\nexport { links, SocialBar };\r\n","import React, { useContext, useState } from \"react\";\r\n\r\nconst AppContext = React.createContext();\r\n\r\nconst AppProvider = ({ children }) => {\r\n  const [isSidebarOpen, setIsSidebarOpen] = useState(false);\r\n  const [isModalOpen, setIsModalOpen] = useState(false);\r\n\r\n  const openSidebar = () => setIsSidebarOpen(true);\r\n\r\n  const closeSidebar = () => setIsSidebarOpen(false);\r\n\r\n  const openModal = () => setIsModalOpen(true);\r\n\r\n  const closeModal = () => setIsModalOpen(false);\r\n  return (\r\n    <AppContext.Provider\r\n      value={{\r\n        isSidebarOpen,\r\n        openSidebar,\r\n        closeSidebar,\r\n        isModalOpen,\r\n        openModal,\r\n        closeModal,\r\n      }}\r\n    >\r\n      {children}\r\n    </AppContext.Provider>\r\n  );\r\n};\r\n\r\nconst useGlobalContext = () => {\r\n  return useContext(AppContext);\r\n};\r\n\r\nexport { AppProvider, useGlobalContext };\r\n","import React from \"react\";\r\nimport { FaBars } from \"react-icons/fa\";\r\nimport { links, SocialBar } from \"./links\";\r\nimport { useGlobalContext } from \"./context\";\r\n\r\nconst Navbar = () => {\r\n  const { openSidebar } = useGlobalContext();\r\n\r\n  return (\r\n    <nav className=\"nav\">\r\n      <header className=\"nav-header\">\r\n        <div className=\"nav-brand\">\r\n          <h4>Navbar</h4>\r\n        </div>\r\n        <button className=\"btn nav-toggler\" onClick={openSidebar}>\r\n          <FaBars className=\"nav-icon\" />\r\n        </button>\r\n      </header>\r\n      <div className=\"links-container\">\r\n        <ul className=\"nav-links\">\r\n          {links.map((link) => {\r\n            return (\r\n              <li key={link.id}>\r\n                <a href={link.url}>{link.text}</a>\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n      </div>\r\n      <div className=\"social-links\">\r\n        <SocialBar />\r\n      </div>\r\n    </nav>\r\n  );\r\n};\r\n\r\nexport default Navbar;\r\n","import React from \"react\";\r\nimport { AiFillCloseCircle } from \"react-icons/ai\";\r\nimport styled from \"styled-components\";\r\nimport { links, SocialBar } from \"./links\";\r\nimport { useGlobalContext } from \"./context\";\r\nconst Sidebar = () => {\r\n  const { isSidebarOpen, closeSidebar } = useGlobalContext();\r\n  return (\r\n    <Wrapper className={`${isSidebarOpen ? \"show-sidebar\" : \"\"}`}>\r\n      <div className=\"sidebar-content\">\r\n        <header>\r\n          <div className=\"nav-brand\">\r\n            <h4>SideBar</h4>\r\n          </div>\r\n          <button className=\"btn btn-delete\" onClick={closeSidebar}>\r\n            <AiFillCloseCircle className=\"nav-icon\" />\r\n          </button>\r\n        </header>\r\n        <ul className=\"sidebar-links\">\r\n          {links.map((link) => {\r\n            return (\r\n              <li key={link.id} className=\"link\">\r\n                <a href={link.url}>{link.text}</a>\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n        <footer>\r\n          <SocialBar />\r\n        </footer>\r\n      </div>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nconst Wrapper = styled.aside`\r\n  width: 100%;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  bottom: 0;\r\n  background-color: white;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  transition: var(--transition);\r\n  transform: translateX(-100%);\r\n  z-index: 2;\r\n  .sidebar-content {\r\n    width: 90%;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    gap: 2rem;\r\n    place-items: center;\r\n    header {\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n    .sidebar-links {\r\n      margin-left: 0;\r\n      place-items: center;\r\n      display: grid;\r\n      gap: 2rem;\r\n      font-variant: small-caps;\r\n      .link {\r\n        padding: 0.2rem 0.725rem;\r\n        border-radius: var(--btn-radius);\r\n        transition: var(--transition);\r\n        &:hover {\r\n          background-color: var(--bg-blue);\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport default Sidebar;\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { AiFillCloseCircle } from \"react-icons/ai\";\r\nimport { useGlobalContext } from \"./context\";\r\nconst Modal = () => {\r\n  const { isModalOpen, closeModal } = useGlobalContext();\r\n  return (\r\n    <Wrapper className={`${isModalOpen ? \"show-modal-overlay\" : \"\"}`}>\r\n      <section className={`${isModalOpen ? \"show-modal modal\" : \"modal\"}`}>\r\n        <div className=\"modal-content\">\r\n          <h5>Contenuto del modal</h5>\r\n        </div>\r\n        <button className=\"btn btn-delete btn-modal\" onClick={closeModal}>\r\n          <AiFillCloseCircle className=\"nav-icon\" />\r\n        </button>\r\n      </section>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nconst Wrapper = styled.aside`\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  bottom: 0;\r\n  right: 0;\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: var(--transition);\r\n\r\n  .modal {\r\n    position: relative;\r\n    top: 30%;\r\n    left: 50%;\r\n    transform: translate(-50%, -130%);\r\n    height: 150px;\r\n    width: 250px;\r\n    background-color: white;\r\n    border-radius: var(--radius);\r\n    display: grid;\r\n    place-items: center;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: var(--transition);\r\n    .btn-modal {\r\n      position: absolute;\r\n      padding: 0.1rem;\r\n      top: 1%;\r\n      right: 1%;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default Modal;\r\n","import Navbar from \"./Navbar\";\r\nimport Sidebar from \"./Sidebar\";\r\nimport Modal from \"./Modal\";\r\nimport { useGlobalContext } from \"./context\";\r\n\r\nfunction App() {\r\n  const { isModalOpen, openModal } = useGlobalContext();\r\n\r\n  return (\r\n    <>\r\n      <Navbar />\r\n      <Sidebar />\r\n      <Modal />\r\n      {!isModalOpen && (\r\n        <main className=\"modal-controller\">\r\n          <button className=\"btn btn-selector\" onClick={openModal}>\r\n            Apri Modal\r\n          </button>\r\n        </main>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nexport default App;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\nimport App from \"./App\";\r\nimport { AppProvider } from \"./context\";\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <AppProvider>\r\n      <App />\r\n    </AppProvider>\r\n  </React.StrictMode>,\r\n  document.getElementById(\"root\")\r\n);\r\n"],"sourceRoot":""}