<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Megamenu</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- <link
rel="stylesheet"
href="https://broward.org/Style Library/V7/WebParts/_react/megamenu/style.css"
/> -->
<!-- be sure to replace "development" with "production" in the path (or vice versa) depending on what is needed -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="container" class="px-0"></div>
<script type="text/babel">
const { useState } = React;
function MenuButton(props) {
return (
<a
id="navbarMenu"
role="button"
type="button"
data-bs-auto-close="false"
data-bs-toggle="dropdown"
data-bs-target="#megaDropdown"
aria-controls="#megaDropdown"
aria-expanded={props.aria}
className={props.search ? "menu-button hidden" : "menu-button"}
style={{ width: "48px" }}
tabIndex="0"
onClick={props.onClick}
>
<i
className={props.text}
style={{ color: "#4f4f4f", padding: "4px 16px" }}
></i>
</a>
);
}
function Logo(props) {
return (
<img
src="https://assets.codepen.io/216313/bc-logo.png"
alt=""
className={props.search ? "header-logo hidden" : "header-logo"}
/>
);
}
function SearchButton(props) {
return (
<a
className="search-button"
id="navbarSearch"
role="button"
type="button"
aria-label="search"
aria-expanded={props.aria}
style={{ width: "48px" }}
tabIndex="0"
onClick={props.onClick}
>
<i
className={props.icon}
style={{ color: "#4f4f4f", padding: "4px 16px" }}
></i>
</a>
);
}
function SearchBar(props) {
console.log(props);
return (
<input
type="search"
placeholder="Search"
aria-label="Search"
className={props.closed ? "open" : "closed"}
// className="form-control"
// id="datatable-search-input"
/>
);
}
function MegamenuDropdown(props) {
console.log(props);
return (
<div
id="megaDropdown"
className={
props.expanded
? "dropdown-menu w-100 mt-0 show"
: "dropdown-menu w-100 mt-0"
}
aria-labelledby="navbarDropdown"
>
<div className="container px-0">
<CategoryMenu
category={props.category}
navigation={props.navigation}
subcategory={props.subcategory}
onLinkClick={props.onLinkClick}
onResetStateClick={props.onResetStateClick}
onSubsiteBackClick={props.onSubsiteBackClick}
/>
</div>
</div>
);
}
function CategoryMenu(props) {
console.log(props, ABOUT[0].link);
return (
<div className="d-flex row mx-0 my-4 w-100">
{props.subcategory === "" &&
ABOUT[0].link === "/" &&
props.category ? (
<TopLevelMenu onLinkClick={props.onLinkClick} />
) : props.subcategory === "" &&
ABOUT[0].link !== "/" &&
props.category ? (
<TopLevelMenu onLinkClick={props.onLinkClick} />
) : props.subcategory !== "" &&
ABOUT[0].link !== "/" &&
!props.category ? (
<SubcategoryMenu
onLinkClick={props.onLinkClick}
onResetStateClick={props.onResetStateClick}
subcategory={props.subcategory}
/>
) : props.subcategory === "" &&
ABOUT[0].link !== "/" &&
!props.category ? (
<SubsiteMenu
navigation={props.navigation}
subcategory={props.subcategory}
onSubsiteBackClick={props.onSubsiteBackClick}
/>
) : (
false
// TODO: add another option for link not '/' but all other conditions okay to go to top level
)}
</div>
);
}
function TopLevelMenu(props) {
// console.log(props)
// get subcat to map into links
return (
<div className="accordion accordion-flush px-0" id="accordionFlush">
<div className="accordion-item">
<h2 id="flush-headingOne" className="mt-0">
<span
className="accordion-button font-weight-bold px-3 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Services
</span>
</h2>
<div
id="flush-collapseOne"
className="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlush"
>
<div className="accordion-body px-0">
{CATEGORIES.map(
({ category, id, icon, tlc }, i, { length }) =>
tlc === "services" ? (
<a
className="accordionLink px-3 mx-0"
onClick={props.onLinkClick}
>
<i className={icon + " categoryIcon"}></i> {category}
</a>
) : (
false
)
)}
</div>
</div>
</div>
<div className="accordion-item">
<h2 id="flush-headingTwo" className="mt-0">
<span
className="accordion-button font-weight-bold px-3 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Government
</span>
</h2>
<div
id="flush-collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlush"
>
<div className="accordion-body px-0">
{CATEGORIES.map(
({ category, id, icon, tlc }, i, { length }) =>
tlc === "government" ? (
<a
className="accordionLink px-3 mx-0"
onClick={props.onLinkClick}
>
<i className={icon + " categoryIcon"}></i> {category}
</a>
) : (
false
)
)}
</div>
</div>
</div>
<a className="menuLink font-weight-bold px-3 my-2">Newsroom</a>
<a className="menuLink font-weight-bold px-3 my-2">
Make a Payment
</a>
<a className="menuLink px-3">Public Records Request</a>
<a className="menuLink px-3">Contact Us</a>
<a className="menuLink px-3">Report a Complaint</a>
<a className="menuLink px-3">Terms of Use</a>
<a className="menuLink px-3">Accessibility Statement</a>
</div>
);
}
function SubcategoryMenu(props) {
console.log(CATEGORIES, props);
// let categoryTitle = ABOUT[0].category;
// let backLink =
// categoryTitle[0].toUpperCase() + categoryTitle.substring(1);
return (
<div className="px-0">
<a className="px-3 mb-4" onClick={props.onResetStateClick}>
<i className="fa-solid fa-angle-left"></i> All Categories
</a>
<h2
className="accordion-header font-weight-bold mx-3 my-3"
id="flush-headingOne"
>
{props.subcategory}
</h2>
{CATEGORIES.map(
({ category, id, icon, tlc, subcategories }, i, { length }) =>
category === props.subcategory ? (
<div className="accordionLinks">
{subcategories.map(({ name, link }, i, { length }) => (
<a className="accordionLink px-3 mx-0" href={link}>
{name}
</a>
))}
</div>
) : (
false
)
)}
</div>
);
}
function SubsiteMenu(props) {
console.log(props, ABOUT, props.navigation.Nodes != undefined);
return (
<div className="px-0">
<a className="px-3 mb-4" onClick={props.onSubsiteBackClick}>
<i className="fa-solid fa-angle-left"></i> {ABOUT[0].subcategory}
</a>
<h2
className="accordion-header font-weight-bold mx-3 my-3"
id="flush-headingOne"
>
{ABOUT[0].title}
</h2>
{ABOUT.map(
(
{
link,
title,
about,
address,
telephone,
email,
facebook,
twitter,
youtube,
instagram,
subcategory,
category,
},
i,
{ length }
) => (
// category === props.subcategory ? (
<div className="accordionLinks mx-3 my-3">
<div
className="about pt-3"
style={{ borderBottom: "1px solid #eaeaea" }}
>
<div className="mb-4 pb-3">
<a
className="about-email-button font-weight-bold"
href={"mailto:" + email}
>
Email
</a>
<a
className="about-call-button font-weight-bold"
href={"tel:+1" + telephone}
>
Call
</a>
</div>
<div
className="mt-4 pt-4"
style={{ borderTop: "1px solid #eaeaea" }}
>
{about}
</div>
<div className="about-block">
<span className="font-weight-bold">Address: </span>
{address}
</div>
<div className="about-block">
<span className="font-weight-bold">Email: </span>
<a href="">{email}</a>
</div>
<div className="about-block">
<span className="font-weight-bold">Phone: </span>
<a href="">{telephone}</a>
</div>
<ul className="about-socialLinks">
<li className="about-social">
<a href={facebook}>
<i className="fa-brands fa-facebook"></i>
</a>
</li>
<li className="about-social">
<a href={twitter}>
<i className="fa-brands fa-twitter"></i>
</a>
</li>
<li className="about-social">
<a href={youtube}>
<i className="fa-brands fa-youtube"></i>
</a>
</li>
<li className="about-social">
<a href={instagram}>
<i className="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</div>
<div className="mt-4 pt-1 subsiteNavTitle">
site navigation
</div>
<div className="accordionLinks mt-3">
{props.navigation.Nodes != undefined
? props.navigation.Nodes.map(
({ Title, SimpleUrl, Nodes }, i, { length }) =>
Nodes.length < 1 ? (
<a
className="accordionLink px-0 mx-0"
href={SimpleUrl}
>
{Title}
</a>
) : (
<div
id={"flush-collapse" + key}
className="accordion-collapse collapse"
aria-labelledby={"flush-heading" + key}
data-bs-parent="#accordionFlush"
>
<div className="accordion-body px-0">
{Nodes.map(
({ Title, SimpleUrl }, i, { length }) => (
<a
className="accordionLink px-3 mx-0"
href={SimpleUrl}
>
{Title}
</a>
)
)}
</div>
</div>
)
)
: false}
</div>
</div>
)
)}
</div>
);
}
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "fa fa-bars",
expanded: false,
icon: "fa fa-search",
search: false,
category: false,
subcategory: "",
subsite: false,
navigation: [],
};
this.setState = this.setState.bind(this);
this.handleMenuClick = this.handleMenuClick.bind(this);
this.handleSearchClick = this.handleSearchClick.bind(this);
this.handleLinkClick = this.handleLinkClick.bind(this);
this.handleResetStateClick = this.handleResetStateClick.bind(this);
this.handleSubsiteBackClick = this.handleSubsiteBackClick.bind(this);
}
componentDidMount() {
axios
.get(
`/techproto/v6/MattDEV/2022/_api/navigation/menustate?mapprovidername='GlobalNavigationSwitchableProvider'`
)
.then((res) => {
const navigation = res.data;
this.setState({ navigation });
console.log(navigation);
});
}
handleMenuClick(e) {
this.setState({
text:
e.target.className === "fa fa-bars"
? "fa fa-times"
: "fa fa-bars",
expanded: e.target.className === "fa fa-bars" ? true : false,
});
}
handleSearchClick(e) {
this.setState({
icon:
e.target.className === "fa fa-times"
? "fa fa-search"
: "fa fa-times",
search: e.target.className === "fa fa-search" ? true : false,
});
}
handleLinkClick(e) {
this.setState({
category: false,
subcategory: e.target.innerText.trim(),
subsite: false,
});
// console.log(this.state.subcategory);
}
handleResetStateClick(e) {
console.log(e.target);
this.setState({
category: true,
subcategory: "",
subsite: false,
});
}
handleSubsiteBackClick(e) {
console.log(e.target);
this.setState({
category: false,
subcategory: e.target.innerText.trim(),
subsite: true,
});
// console.log(this.state.subcategory);
}
render() {
// axios
// .get(
// "/techproto/v6/MattDEV/2022/_api/navigation/menustate?mapprovidername='GlobalNavigationSwitchableProvider'"
// )
// .then((response) => {
// console.log(response.data);
// });
return (
<div className="w-100">
<nav className="navbar navbar-expand navbar-light shadow-0 px-0">
<div className="container-fluid">
<div
className="collapse navbar-collapse d-flex justify-content-between"
id="navbarExample1"
>
<MenuButton
onClick={this.handleMenuClick}
text={this.state.text}
expanded={this.state.expanded}
search={this.state.search}
/>
<Logo search={this.state.search} />
<SearchButton
onClick={this.handleSearchClick}
icon={this.state.icon}
/>
<SearchBar closed={this.state.search} />
<MegamenuDropdown
expanded={this.state.expanded}
category={this.state.category}
navigation={this.state.navigation}
subcategory={this.state.subcategory}
onLinkClick={this.handleLinkClick}
onResetStateClick={this.handleResetStateClick}
onSubsiteBackClick={this.handleSubsiteBackClick}
/>
</div>
</div>
</nav>
</div>
);
}
}
const ABOUT = [
{
link: "/airport",
title: "Airport",
about:
"Broward County's Fort Lauderdale-Hollywood International Airport (FLL) and North Perry Airport (HWO), a general aviation airport, form a diverse and dynamic airport system. This airport system serves the needs of 35.9 million passengers and the general aviation community throughout South Florida.",
address: "100 Terminal Drive Fort Lauderdale, FL 33315",
// hours: [
// {
// monday: "",
// tuesday: "",
// wednesday: "",
// thursday: "",
// friday: "",
// saturday: "",
// sunday: "",
// },
// ],
telephone: "866-435-9355",
email: "[email protected]",
facebook:
"https://www.facebook.com/FortLauderdaleHollywoodInternationalAirport",
twitter: "https://twitter.com/FLLFlyer",
youtube: "#",
instagram: "#",
subcategory: "Transportation",
category: "services",
},
];
const CATEGORIES = [
{
tlc: "services",
category: "Business & Consumers",
icon: "fa-solid fa-handshake",
id: 1,
subcategories: [
{ name: "BizBeyond", link: "/bizbeyond" },
{ name: "Business", link: "/business" },
{
name: "Economic & Small Business Development",
link: "/econdev",
},
{ name: "Consumer Protection Division", link: "/consumer" },
],
},
{
tlc: "government",
category: "Courts & Law",
icon: "fa-solid fa-gavel",
id: 2,
subcategories: [
{ name: "Broward County Charter", link: "/charter" },
{ name: "Code Appeals", link: "/codeappeals" },
{ name: "County Attorney", link: "/legal" },
{ name: "Courts", link: "/courts" },
{ name: "Forensic Science Center", link: "/forensicsciencecenter" },
{ name: "Inspector General", link: "/inspectorgeneral" },
{ name: "Justice Services", link: "/justiceservices" },
{ name: "Legislative Delegation", link: "/legislative" },
],
},
{
tlc: "services",
category: "Culture & Recreation",
icon: "fa-solid fa-map",
id: 3,
subcategories: [
{ name: "Arena", link: "/arena" },
{ name: "Black History", link: "/blackhistory" },
{ name: "Counties Matter", link: "/countiesmatter" },
{ name: "Cultural Division", link: "/arts" },
{ name: "Diversity", link: "/diversity" },
{ name: "Heroes", link: "/heroes" },
{ name: "Historic Preservation Board", link: "/history" },
{ name: "Library", link: "/library" },
{ name: "Parks", link: "/parks" },
],
},
{
tlc: "government",
category: "Employment & Benefits",
icon: "fa-solid fa-briefcase",
id: 4,
subcategories: [
{ name: "Benefits", link: "/benefits" },
{ name: "Careers", link: "/careers" },
{ name: "Human Resources", link: "/humanresources" },
{ name: "New Hires", link: "/newhires" },
{ name: "Open Enrollment", link: "/openenrollment" },
{
name: "Professional Standards/Human Rights Section",
link: "/professionalstandards",
},
{ name: "Retirement/COBRA", link: "/retirees" },
{ name: "WellBeing", link: "/wellbeing" },
],
},
{
tlc: "services",
category: "Environment",
icon: "fa-solid fa-tree",
id: 5,
subcategories: [
{ name: "Air Quality", link: "/air" },
{ name: "Beaches", link: "/beaches" },
{
name: "Climate & Energy",
link: "/climate",
},
{
name: "Environmental Lab",
link: "/environmentallab",
},
{
name: "Environmental Permitting Division",
link: "/environment",
},
{ name: "ePermits", link: "/ePermits" },
{ name: "Go Green", link: "/gogreen" },
{ name: "Greenways", link: "/Greenways" },
{ name: "Natural Resources", link: "/NaturalResources" },
{ name: "NatureScape", link: "/NatureScape" },
{
name: "Resilience",
link: "/resilience",
},
{
name: "Resilient Environment Department",
link: "/EnvironmentandGrowth",
},
],
},
{
tlc: "services",
category: "Garbage & Recycling",
icon: "fa-solid fa-recycle",
id: 6,
subcategories: [
{ name: "Flag Disposal", link: "/FlagDisposal" },
{
name: "Solid Waste Notifications",
link: "/SolidWasteNotifications",
},
{
name: "Solid Waste & Recycling Services",
link: "/WasteAndRecycling",
},
],
},
{
tlc: "government",
category: "Government & Elections",
icon: "fa-solid fa-flag",
id: 7,
subcategories: [
{ name: "Accounting", link: "/accounting" },
{ name: "Agencies & Services", link: "/AgenciesAndServices" },
{ name: "Awards", link: "/awards" },
{ name: "Call Center", link: "/CallCenter" },
{
name: "Commission on the Status of Women",
link: "/StatusofWomen",
},
{ name: "County Administration", link: "/Administrator" },
{ name: "County Commission", link: "/commission" },
{ name: "Finance", link: "/finance" },
{
name: "Intergovernmental Affairs/Boards Section",
link: "/Intergovernmental",
},
{ name: "Office of Management & Budget", link: "/budget" },
{ name: "Open Government", link: "/OpenGovernment" },
{ name: "Planning Council", link: "/PlanningCouncil" },
{ name: "Purchasing", link: "/purchasing" },
{ name: "Redistricting", link: "/Redistricting" },
{ name: "Risk Management", link: "/RiskManagement" },
{ name: "Value Adjustment Board", link: "/vab" },
{ name: "Volunteer", link: "/Volunteer" },
{ name: "Voter Resources", link: "/VoterResources" },
],
},
{
tlc: "services",
category: "Health",
icon: "fa-solid fa-heart",
id: 8,
subcategories: [
{ name: "Broward Addiction Recovery", link: "/AddictionRecovery" },
{
name: "Broward Regional Emergency Medical Services Council",
link: "/browardems",
},
{ name: "Coronavirus (COVID-19)", link: "/coronavirus" },
{ name: "Health Care Services", link: "/healthcare" },
{
name: "Health Facilities Authority",
link: "/HealthFacilitiesAuthority",
},
{ name: "Medical Examiner", link: "/MedicalExaminer" },
{
name: "Nancy J. Cotterman Center",
link: "/NancyJCottermanCenter",
},
{ name: "Ryan White Program", link: "/RyanWhite" },
{ name: "Vulnerable Population Registry", link: "/Registry" },
],
},
{
tlc: "services",
category: "Housing & Buildings",
icon: "fa-solid fa-building",
id: 9,
subcategories: [
{ name: "Broward Housing Council", link: "/BrowardHousingCouncil" },
{
name: "Broward Municipal Services District",
link: "/MunicipalServicesDistrict",
},
{ name: "Broward Next", link: "/BrowardNext" },
{ name: "Building Code Services", link: "/Building" },
{ name: "CARES", link: "/cares" },
{
name: "Central County Community Redevelopment Agency",
link: "/CentralCRA",
},
{ name: "Construction Management", link: "/construction" },
{
name: "Convention Center Expansion & Headquarters Hotel Project",
link: "/CCExpansion",
},
{ name: "Facilities Management", link: "/Facilities" },
{
name: "Housing Finance & Community Redevelopment",
link: "/Housing",
},
{ name: "Housing Finance Authority", link: "/HFA" },
{ name: "Land of Opportunity", link: "/BBTRedevelopment" },
{
name: "Urban Planning Division",
link: "/Planning",
},
{ name: "Real Property", link: "/RealProperty" },
{ name: "Rent Assistance", link: "/RentAssistance" },
],
},
// {
// category: "News & Media",
// icon: "fa-handshake",
// id: 10,
// subcategories: [
// {
// name: "Broward Now",
// link: "//broward.granicus.com/ViewPublisher.php?view_id=11",
// },
// { name: "eNews", link: "/ENews" },
// { name: "Media Room", link: "/MediaRoom" },
// { name: "News", link: "/News" },
// { name: "Print Shop", link: "/PrintShop" },
// { name: "Public Communications", link: "/PublicInfo" },
// { name: "Stay Connected!", link: "/StayConnected" },
// ],
// },
{
tlc: "services",
category: "Pets, Pests & Wildlife",
icon: "fa-solid fa-paw",
id: 11,
subcategories: [
{ name: "Animal Care", link: "/animal" },
{ name: "Manatees", link: "/manatees" },
{ name: "Mosquito Control", link: "/Mosquito" },
{ name: "Zap Zika", link: "/ZapZika" },
],
},
{
tlc: "services",
category: "Public Safety",
icon: "fa-solid fa-exclamation",
id: 12,
subcategories: [
{ name: "Broward EMD", link: "/BrowardEMD" },
{
name: "Crisis Intervention & Support Division",
link: "/CrisisIntervention",
},
{ name: "Emergency", link: "/Emergency" },
{
name: "Emergency Preparedness for Residents at Risk",
link: "/AtRisk",
},
{ name: "Hurricane", link: "/Hurricane" },
{
name: "Office of Regional Communications and Technology",
link: "/911",
},
],
},
{
tlc: "services",
category: "Records",
icon: "fa-solid fa-archive",
id: 13,
subcategories: [
{ name: "Auditor", link: "/auditor" },
{ name: "County Annual Reports", link: "/countyAnnualReport" },
{
name: "Records, Taxes & Treasury Division",
link: "/RecordsTaxesTreasury",
},
],
},
{
tlc: "services",
category: "Streets & Highways",
icon: "fa-solid fa-road",
id: 14,
subcategories: [
{ name: "Highway & Bridge Maintenance Division", link: "/Streets" },
{
name: "Highway Construction & Engineering",
link: "/BCEngineering",
},
{
name: "Mobility Advancement Program",
link: "/PennyForTransportation",
},
{ name: "Public Works", link: "/Publicworks" },
{ name: "Traffic Engineering Division", link: "/Traffic" },
],
},
{
tlc: "services",
category: "Support",
icon: "fa-solid fa-hands",
id: 15,
subcategories: [
{ name: "Christmas in July", link: "/ChristmasInJuly" },
{ name: "Children’s Services Administration", link: "/Children" },
{ name: "Elderly Services", link: "/ElderlyAndVeterans" },
{ name: "Family Success", link: "/consumer" },
{ name: "Food Drive", link: "/bbbc" },
{ name: "Homeless Initiative Partnership", link: "/Homeless" },
{ name: "Human Services", link: "/HumanServices" },
{ name: "Kids", link: "/Kids" },
{ name: "Residents", link: "/Residents" },
{ name: "Together 4 Broward", link: "/together4broward" },
{ name: "Veterans Services", link: "/veterans" },
],
},
// {
// category: "Taxes & Bills",
// icon: "fa-handshake",
// id: 16,
// subcategories: [
// { name: "Irrigation Rebate", link: "/IrrigationRebate" },
// {
// name: "Records, Taxes & Treasury Division",
// link: "/RecordsTaxesTreasury",
// },
// ],
// },
{
tlc: "services",
category: "Transportation",
icon: "fa-solid fa-bus",
id: 17,
subcategories: [
{ name: "Broward County Transit", link: "/bct" },
{ name: "FLL Airport", link: "/Airport" },
{ name: "North Perry Airport", link: "/NorthPerryAirport" },
{ name: "Fleet Services", link: "/FleetServices" },
{ name: "Parking", link: "/parking" },
],
},
{
tlc: "services",
category: "Water",
icon: "fa-solid fa-tint",
id: 18,
subcategories: [
{ name: "Water & Wastewater Services", link: "/WaterServices" },
{ name: "Water Resources", link: "/waterresources" },
],
},
];
// ReactDOM.render(<Header />, document.querySelector("nav"));
ReactDOM.render(<Header />, document.getElementById("container"));
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
<script>
// get rid of padding on header <nav>
// window.addEventListener("load", (event) => {
// let nav = document.querySelector("nav");
// nav.style.padding = "0";
// nav.style.backgroundColor = "#fff";
// nav.style.position = "initial"
// });
</script>
</body>
</html>
!
