const HeaderWrapper = styled.div` background-color: #001529; color: #fff; padding: 16px; @media (max-width: 768px) { padding: 8px; } `; const Logo = styled.div` font-size: 24px; font-weight: bold; @media (max-width: 768px) { font-size: 20px; } `; const Nav = styled.div` display: flex; align-items: center; @media (max-width: 768px) { flex-direction: column; margin-top: 8px; } `; const NavItem = styled.div` margin-left: 16px; cursor: pointer; @media (max-width: 768px) { margin: 8px 0; } `; const Header = () => { return ( <HeaderWrapper> <Logo>My App</Logo> <Nav> <NavItem>Home</NavItem> <NavItem>About</NavItem> <NavItem>Contact</NavItem> </Nav> </HeaderWrapper> ); }; return <Header />;