-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHeader.js
More file actions
32 lines (29 loc) · 1.18 KB
/
Header.js
File metadata and controls
32 lines (29 loc) · 1.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-scroll';
import logo from '../assets/images/logo.png'; // Ensure you have a logo image in the specified path
import { Navbar, Nav } from 'react-bootstrap';
const Logo = styled.img`
width: 50px; // Adjust the size as needed
height: 50px;
margin-right: 10px;
`;
const Header = () => (
<Navbar bg="dark" variant="dark" expand="lg" fixed="top">
<Navbar.Brand href="#">
<Logo src={logo} alt="App Logo" />
Brilliant Interiors
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link as={Link} to="home" smooth={true} duration={500}>Home</Nav.Link>
<Nav.Link as={Link} to="products" smooth={true} duration={500}>Products</Nav.Link>
<Nav.Link as={Link} to="about" smooth={true} duration={500}>About</Nav.Link>
<Nav.Link as={Link} to="services" smooth={true} duration={500}>Services</Nav.Link>
<Nav.Link as={Link} to="contact" smooth={true} duration={500}>Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
export default Header;