├── README.md ├── src ├── App.css ├── components │ ├── pages │ │ ├── Home.jsx │ │ ├── About.jsx │ │ ├── Contact.jsx │ │ ├── index.jsx │ │ └── Services.jsx │ ├── Navbar.jsx │ └── Navbar.css ├── index.css ├── main.jsx └── App.jsx ├── vite.config.js ├── index.html └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # react-navbar -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | background-color: #fefefe; 3 | height: 100vh; 4 | width: 100%; 5 | } -------------------------------------------------------------------------------- /src/components/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Home = () => { 4 | return

Home

; 5 | }; 6 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } -------------------------------------------------------------------------------- /src/components/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const About = () => { 4 | return

About

; 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Contact = () => { 4 | return

Contact

; 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/pages/index.jsx: -------------------------------------------------------------------------------- 1 | export * from "./About"; 2 | export * from "./Contact"; 3 | export * from "./Home"; 4 | export * from "./Services"; 5 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter } from "react-router-dom"; 2 | import React from "react"; 3 | import ReactDOM from "react-dom/client"; 4 | import App from "./App.jsx"; 5 | import "./index.css"; 6 | 7 | ReactDOM.createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from "react-router-dom"; 2 | import "./App.css"; 3 | import { Navbar } from "./components/Navbar"; 4 | import { About, Contact, Home, Services } from "./components/pages"; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 | 11 | } /> 12 | } /> 13 | } /> 14 | } /> 15 | 16 |
17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-navbar", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.13.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.37", 19 | "@types/react-dom": "^18.0.11", 20 | "@vitejs/plugin-react": "^4.0.0", 21 | "eslint": "^8.38.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.3.4", 25 | "vite": "^4.3.9" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import "./Navbar.css"; 4 | import { Link, NavLink } from "react-router-dom"; 5 | 6 | export const Navbar = () => { 7 | const [menuOpen, setMenuOpen] = useState(false); 8 | 9 | return ( 10 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/Navbar.css: -------------------------------------------------------------------------------- 1 | .active{ 2 | background-color: #1d4ed8; 3 | } 4 | 5 | nav { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | background-color: #0f172a; 10 | color: white; 11 | position: sticky; 12 | top: 0; 13 | } 14 | 15 | nav .title { 16 | font-size: 1.5rem; 17 | margin: 1rem; 18 | font-weight: bold; 19 | text-decoration: none; 20 | color: white; 21 | } 22 | 23 | nav ul { 24 | display: flex; 25 | } 26 | 27 | nav ul li { 28 | list-style: none; 29 | } 30 | 31 | nav ul li a { 32 | display: block; 33 | text-decoration: none; 34 | color: white; 35 | padding: 0.5rem; 36 | margin: 0 0.5rem; 37 | border-radius: 0.5rem; 38 | } 39 | 40 | nav ul li a:not(.active):hover { 41 | background-color:#172554 ; 42 | } 43 | 44 | nav .menu { 45 | display: none; 46 | position: absolute; 47 | top: 0.75rem; 48 | right: 0.5rem; 49 | flex-direction: column; 50 | justify-content: space-between; 51 | width: 2.25rem; 52 | height: 2rem; 53 | } 54 | 55 | nav .menu span { 56 | height: 0.4rem; 57 | width: 100%; 58 | background-color: #fff; 59 | border-radius: 0.2rem; 60 | } 61 | 62 | 63 | @media (max-width: 480px) { 64 | nav .menu { 65 | display: flex; 66 | } 67 | 68 | nav { 69 | flex-direction: column; 70 | align-items: flex-start; 71 | } 72 | 73 | nav ul { 74 | display: none; 75 | flex-direction: column; 76 | width: 100%; 77 | margin-bottom: 0.25rem; 78 | } 79 | 80 | nav ul.open { 81 | display: flex; 82 | } 83 | 84 | nav ul li { 85 | width: 100%; 86 | text-align: center; 87 | } 88 | 89 | nav ul li a { 90 | margin: 0.2rem 0.5rem; 91 | } 92 | } -------------------------------------------------------------------------------- /src/components/pages/Services.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const Services = () => { 4 | return ( 5 | <> 6 |

Services

7 |
8 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem sunt 9 | itaque, perferendis necessitatibus corrupti ea magni voluptatibus est 10 | ipsa. Nulla praesentium dolore eos alias incidunt, odio et eaque, sunt 11 | vitae corporis animi, itaque architecto. Sunt minima nostrum fugiat 12 | quibusdam voluptate dolore illo cupiditate quam odio sequi. Consequatur 13 | tempora ullam, ipsam molestias dolor dolores tempore. Molestias, error 14 | porro tenetur delectus numquam animi aut quod consequuntur? Dolor sequi 15 | quisquam ex, eaque explicabo, labore maxime veniam voluptas enim 16 | recusandae architecto est voluptates optio libero officiis consectetur 17 | possimus voluptate ipsam alias velit veritatis reprehenderit 18 | repudiandae. Ullam praesentium inventore minima eius dolorem omnis fugit 19 | facilis. 20 |
21 |
22 |
23 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus 24 | libero laboriosam quia totam, ducimus dolorum velit voluptates ipsam ad 25 | labore repellendus! Reprehenderit corporis labore totam est quas natus 26 | non quis? Atque porro obcaecati error hic perspiciatis itaque 27 | reprehenderit ut aperiam, ipsa, repellendus voluptatum, architecto sint 28 | delectus. Dolorem, officia nostrum? Quae similique eveniet, animi 29 | laborum impedit commodi, deleniti cum adipisci atque quidem culpa 30 | incidunt placeat id rem dolorum sit eligendi sapiente ea sed, voluptate 31 | voluptates minima pariatur ipsam delectus. Inventore deserunt 32 | exercitationem repudiandae ducimus nihil, assumenda vel ex optio aut 33 | voluptates nostrum dolor beatae in voluptatem. Adipisci excepturi 34 | nesciunt ab soluta. 35 |
36 |
37 |
38 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a, 39 | expedita quaerat, facere iste earum deserunt numquam dignissimos 40 | obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus 41 | facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui 42 | alias. Ut inventore commodi quae ea excepturi, soluta distinctio 43 | laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat 44 | consequatur assumenda, unde atque nemo modi perferendis? Saepe 45 | molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas 46 | qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque 47 | culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a, 48 | quod blanditiis dolores odit aliquid quis distinctio. 49 |
50 |
51 |
52 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a, 53 | expedita quaerat, facere iste earum deserunt numquam dignissimos 54 | obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus 55 | facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui 56 | alias. Ut inventore commodi quae ea excepturi, soluta distinctio 57 | laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat 58 | consequatur assumenda, unde atque nemo modi perferendis? Saepe 59 | molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas 60 | qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque 61 | culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a, 62 | quod blanditiis dolores odit aliquid quis distinctio. 63 |
64 |
65 |
66 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a, 67 | expedita quaerat, facere iste earum deserunt numquam dignissimos 68 | obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus 69 | facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui 70 | alias. Ut inventore commodi quae ea excepturi, soluta distinctio 71 | laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat 72 | consequatur assumenda, unde atque nemo modi perferendis? Saepe 73 | molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas 74 | qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque 75 | culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a, 76 | quod blanditiis dolores odit aliquid quis distinctio. 77 |
78 |
79 |
80 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a, 81 | expedita quaerat, facere iste earum deserunt numquam dignissimos 82 | obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus 83 | facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui 84 | alias. Ut inventore commodi quae ea excepturi, soluta distinctio 85 | laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat 86 | consequatur assumenda, unde atque nemo modi perferendis? Saepe 87 | molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas 88 | qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque 89 | culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a, 90 | quod blanditiis dolores odit aliquid quis distinctio. 91 |
92 |
93 |
94 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea aut a, 95 | expedita quaerat, facere iste earum deserunt numquam dignissimos 96 | obcaecati voluptatem repellendus nemo eveniet corporis esse voluptatibus 97 | facilis laboriosam natus quam sapiente ipsum ipsa, repudiandae qui 98 | alias. Ut inventore commodi quae ea excepturi, soluta distinctio 99 | laboriosam cum voluptatem consectetur cupiditate neque eius esse placeat 100 | consequatur assumenda, unde atque nemo modi perferendis? Saepe 101 | molestiae, earum at dicta sit iusto dignissimos vero voluptate voluptas 102 | qui ullam molestias omnis cupiditate dolores sunt incidunt ab nisi eaque 103 | culpa dolorum? Provident eos doloribus soluta maxime obcaecati quam, a, 104 | quod blanditiis dolores odit aliquid quis distinctio. 105 |
106 | 107 | ); 108 | }; 109 | --------------------------------------------------------------------------------