{"id":26218092,"url":"https://github.com/arnobt78/sidebar--react-fundamental-project-12","last_synced_at":"2025-03-12T13:15:29.548Z","repository":{"id":276602918,"uuid":"929752893","full_name":"arnobt78/Sidebar--React-Fundamental-Project-12","owner":"arnobt78","description":"This project is a simple React application that demonstrates the use of global context to manage the state of a sidebar and a modal. The application includes three main components: Home, Modal, and Sidebar.","archived":false,"fork":false,"pushed_at":"2025-02-09T10:16:25.000Z","size":71,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T11:23:03.535Z","etag":null,"topics":["global-context","html-css-javascript","modal","netlify-deployment","react","react-component","react-fundamentals","reactjs","sidebar","sidebar-menu"],"latest_commit_sha":null,"homepage":"https://sidebar-arnob.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-09T10:11:30.000Z","updated_at":"2025-02-09T10:48:52.000Z","dependencies_parsed_at":"2025-02-10T05:45:08.296Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Sidebar--React-Fundamental-Project-12","commit_stats":null,"previous_names":["arnobt78/sidebar--react-fundamental-project-12"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSidebar--React-Fundamental-Project-12","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSidebar--React-Fundamental-Project-12/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSidebar--React-Fundamental-Project-12/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSidebar--React-Fundamental-Project-12/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Sidebar--React-Fundamental-Project-12/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243222183,"owners_count":20256229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["global-context","html-css-javascript","modal","netlify-deployment","react","react-component","react-fundamentals","reactjs","sidebar","sidebar-menu"],"created_at":"2025-03-12T13:15:28.775Z","updated_at":"2025-03-12T13:15:29.537Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cimg width=\"941\" alt=\"Screenshot 2025-02-09 at 16 10 43\" src=\"https://github.com/user-attachments/assets/85af76e7-b3b1-44ee-9b2f-9a4252d2d010\" /\u003e\n\n## Sidebar - React Fundamental Project 12\n\nThis project is a simple React application that demonstrates the use of global context to manage the state of a sidebar and a modal. The application includes three main components: Home, Modal, and Sidebar.\n\n**Online Live:** https://sidebar-arnob.netlify.app/\n\n## Running the Project\n\nTo run the project, use the following commands:\n\n```sh\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n\n# Build the project for production\nnpm run build\n\n# Preview the production build\nnpm run preview\n```\n\n## Project Details and Steps\n\n### Explore Data\n\nNavigate to data.jsx and explore arrays\n\n### Create Components\n\nCreate three components: Home, Modal, and Sidebar. Render them in App.jsx.\n\n### Global Context\n\nSetup global context and don't forget to implement a custom hook.\n\n### Global State Values\n\nSetup two state values, both booleans, isSidebarOpen and isModalOpen. Also, set up four functions to open and close the modal and sidebar. Make all of these values available in the application.\n\n### Home Component\n\nIn Home, set up two buttons and get two functions from global context, openSidebar and openModal. Once the user clicks the button, invoke one of the functions. Set up CSS for the buttons.\n\n### Modal and Sidebar Component\n\nCreate a Modal component and add modal CSS. Repeat the same steps with the Sidebar component.\n\nThe flow of the application should look something like this:\n\n- Setup global context and implement a custom hook.\n\n- Setup two state values, both booleans, isSidebarOpen and isModalOpen. Also, set up four functions to open and close the modal and sidebar. Make all of these values available in the application.\n\n- Create three components: Home, Modal, and Sidebar. Render them in App.jsx.\n\n- In Home, set up two buttons and get two functions from global context, openSidebar and openModal. Once the user clicks the button, invoke one of the functions. Set up CSS for the buttons.\n\n- Create a Modal component and add modal CSS. Repeat the same steps with the Sidebar component.\n\n```css\nmain {\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--grey-100);\n}\n.sidebar-toggle {\n  position: fixed;\n  top: 2rem;\n  left: 3rem;\n  font-size: 2rem;\n  background: transparent;\n  border-color: transparent;\n  color: var(--primary-500);\n  transition: var(--transition);\n  cursor: pointer;\n  animation: bounce 2s ease-in-out infinite;\n}\n\n@keyframes bounce {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/*\n=============== \nModal\n===============\n*/\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.5);\n  display: grid;\n  place-items: center;\n  z-index: -1;\n  visibility: hidden;\n  opacity: 0;\n}\n/* OPEN/CLOSE MODAL */\n.show-modal {\n  opacity: 1;\n  transition-property: opacity;\n  transition-duration: 2s;\n  visibility: visible;\n  z-index: 10;\n}\n.modal-container {\n  background: var(--white);\n  border-radius: var(--borderRadius);\n  width: 90vw;\n  height: 30vh;\n  max-width: var(--fixed-width);\n  text-align: center;\n  display: grid;\n  place-items: center;\n  position: relative;\n}\n.close-modal-btn {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  font-size: 2rem;\n  background: transparent;\n  border-color: transparent;\n  color: var(--red-dark);\n  cursor: pointer;\n}\n\n/*\n=============== \nSidebar\n===============\n*/\n.sidebar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--white);\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  row-gap: 1rem;\n  box-shadow: var(---red-dark);\n  transition: var(--transition);\n  transform: translate(-100%);\n}\n.show-sidebar {\n  transform: translate(0);\n}\n@media screen and (min-width: 676px) {\n  .sidebar {\n    width: 400px;\n  }\n}\n\n.sidebar-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 1.5rem;\n}\n.close-btn {\n  font-size: 1.75rem;\n  background: transparent;\n  border-color: transparent;\n  color: var(--primary-500);\n  cursor: pointer;\n  color: var(--red-dark);\n}\n\n.logo {\n  height: 40px;\n}\n\n.links a {\n  display: flex;\n  align-items: center;\n  font-size: 1.25rem;\n  text-transform: capitalize;\n  padding: 1rem 1.5rem;\n  color: var(--grey-700);\n  transition: var(--transition);\n  letter-spacing: var(--letterSpacing);\n}\n\n.links a:hover {\n  background: var(--grey-100);\n  color: var(--grey-800);\n}\n.links a svg {\n  font-size: 1.5rem;\n  color: var(--grey-500);\n  margin-right: 1rem;\n  transition: var(--transition);\n}\n.links a:hover svg {\n  color: var(--grey-600);\n}\n.social-links {\n  justify-self: center;\n  display: flex;\n  padding-bottom: 2rem;\n}\n.social-links a {\n  font-size: 1.5rem;\n  margin: 0 0.5rem;\n  color: var(--primary-500);\n  transition: var(--transition);\n}\n.social-links a:hover {\n  color: var(--primary-800);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fsidebar--react-fundamental-project-12","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fsidebar--react-fundamental-project-12","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fsidebar--react-fundamental-project-12/lists"}