Merge pull request #27 from NitBravoA92/header

Header

src/assets/styles/Header.css

@@ -0,0 +1,48 @@
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: #fff;
+  padding: 0.5rem 1rem 0.7rem;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.06) 0 2px 4px -1px;
+}
+
+.navbar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.logo-image {
+  width: 100%;
+  max-width: 45px;
+}
+
+.app-name {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #e59011;
+}
+
+.nav-item a {
+  color: #20cfe6;
+  background-color: transparent;
+}
+
+.nav-item a.active,
+.nav-item a:hover {
+  color: #fff;
+  color: #007bff;
+  text-decoration: underline;
+}

src/assets/styles/index.css

@@ -0,0 +1,35 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+body {
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+}

src/components/AppLogo.jsx

@@ -0,0 +1,10 @@
+import logo from '../assets/images/logo.png';
+
+const AppLogo = () => (
+  <a href="/" className="logo">
+    <img src={logo} alt="Space Travelers&apos; Hub" className="logo-image" />
+    <span className="app-name">Space Travelers&apos; Hub</span>
+  </a>
+);
+
+export default AppLogo;

src/components/Header.jsx

@@ -0,0 +1,15 @@
+import AppLogo from './AppLogo';
+import '../assets/styles/Header.css';
+
+const Header = () => (
+  <header>
+    <div className="container">
+      <nav className="navbar">
+        <AppLogo />
+        <ul id="navigation" />
+      </nav>
+    </div>
+  </header>
+);
+
+export default Header;

src/components/MenuLink.jsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+const MenuLink = ({ url, pageName }) => {
+  const navLinkStatus = ({ isActive, isPending }) => {
+    if (isActive) return 'active';
+    if (isPending) return 'pending';
+    return null;
+  };
+
+  return (
+    <li className="nav-item">
+      <NavLink
+        to={url}
+        className={navLinkStatus}
+      >
+        {pageName}
+      </NavLink>
+    </li>
+  );
+};
+
+MenuLink.propTypes = {
+  pageName: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+export default MenuLink;