feat: add navbar react workshop (#626)

freeCodeCamp · Oct 2, 2024 · 7877719 · 7877719
1 parent d1f1949
commit 7877719
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 3 deletions.
diff --git a/frontend-cert/react-projects/Navbar/index.html b/frontend-cert/react-projects/Navbar/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable navbar component</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      function Navbar() {
+        return (
+          <nav className="navbar">
+            <ul>
+              <li className="nav-item">
+                <a href="#">Dashboard</a>
+              </li>
+              <li className="nav-item">
+                <a href="#">Widgets</a>
+              </li>
+              <li className="nav-item">
+                <a href="#" aria-haspopup="true">
+                  Apps
+                </a>
+                <ul className="sub-menu" aria-label="submenu">
+                  <li>
+                    <a href="#">Calendar</a>
+                  </li>
+                  <li>
+                    <a href="#">Chat</a>
+                  </li>
+                  <li>
+                    <a href="#">Email</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </nav>
+        );
+      }
+
+      const container = document.getElementById("root");
+      const root = ReactDOM.createRoot(container);
+      root.render(<Navbar />);
+    </script>
+  </body>
+</html>
diff --git a/frontend-cert/react-projects/Navbar/styles.css b/frontend-cert/react-projects/Navbar/styles.css
@@ -0,0 +1,73 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --white: #fff;
+  --light-grey: #e1e0e0;
+  --dark-purple: #7c0e7c;
+  --black: #000;
+}
+
+body {
+  background-color: var(--light-grey);
+}
+
+.navbar {
+  background-color: var(--white);
+}
+
+.navbar ul {
+  display: flex;
+  justify-content: space-around;
+}
+
+.navbar ul li {
+  list-style: none;
+  border-radius: 4px;
+}
+
+.navbar ul li a {
+  text-decoration: none;
+  color: var(--black);
+  padding: 10px;
+  display: inline-block;
+  width: 100%;
+}
+
+.navbar ul .nav-item a:hover {
+  background-color: var(--dark-purple);
+  color: var(--white);
+}
+
+.navbar ul .nav-item .sub-menu {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  right: 5%;
+  transition: opacity 0.5s ease;
+  display: block;
+  background-color: var(--white);
+}
+
+@media (min-width: 768px) {
+  .navbar ul .nav-item .sub-menu {
+    right: 15%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .navbar ul .nav-item .sub-menu {
+    right: 13%;
+  }
+}
+
+.navbar ul .nav-item:hover .sub-menu,
+.navbar ul .nav-item:focus-within .sub-menu {
+  visibility: visible;
+  opacity: 1;
+}
diff --git a/frontend-cert/react-projects/test.md b/frontend-cert/react-projects/test.md