9- Customising and Creating our First Component Navbar

 What kind of navbar do we want?

 We want a navbar that can perform following operations:

--> Two options Home and About.

--> TextBox as title to the left of home option.

--> Change appearance of navbar and webpage by clicking on checkbox.

--> The appearance must be dark to light or vice-versa via checkbox.

Creating our first component Navbar

These are the following steps we will perform to create our Navbar

1-  First we will create a folder name components in our src folder of project

and add Navbar.js and Alert.js file in components folder.

Image 1 - Appearance and packaging of components

2-  In Navbar.js  , Copy paste navbar code inside return from bootstrap website 

Note: Write rfc in Navbar.js and the snippet extension will help with the required jsx format 

 Make changes according to jsx format in Navbar.js 

-->  class   written as   className

-->  for   written as   htmlFor

-->  tabindex   written as   tabIndex.

 Also add a checkbox in navbar that changes our appearance from dark to light or vice versa. 

 and add props you want to manage or change according to functional working of website like:

title : 

Name of app (to left of home option)

about :  

About option in navbar (to right of home option)

mode :  

background color and text of navbar

mode1 :  

Text color of checkbox

togglemode : 

 onClick function that checks the situation when someone clicks the mouse and functions accordingly                  

 Note: Remember mode and mode1 should have different contrast for a better view 

src --> components  -->  Navbar.js

import React from 'react';

export default function Navbar(props) {

  return (

      <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>

  <div className="container-fluid">

   

    <a className="navbar-brand"to="/"> {props.title} </a>

   

    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span className="navbar-toggler-icon"></span>

    </button>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">

      <ul className="navbar-nav me-auto mb-2 mb-lg-0">

        <li className="nav-item">

         

          <a className="nav-link " aria-current="page" to="/">Home</a>

        </li>

        <li className="nav-item">

         

          <a className="nav-link" to="/about"> {props.about} </a>

 </li>

       

   

      </ul>

      <div className="form-check form-switch">

  <input className="form-check-input"onClick={props.ToggleMode} type="checkbox"role="switch" id="flexSwitchCheckDefault"/>

  <label className={`form-check-label text-${props.mode1} htmlFor="flexSwitchCheckDefault"`}>Enable Dark Mode</label>

</div>

   

    </div>

  </div>

</nav>

    )

}

In Alert.js in your component folder add some props alerts when different modes are enabled

src --> components  -->  Alert.js

import React from 'react';

export default function Alert(props) {

  return (

   

 props.alert &&    <div class="alert alert-success alert-dismissible fade show" role="alert">

  <strong>{props.alert.type}</strong> {props.alert.msg}

</div>

   

  )

}

3-   Go to app.js and apply useState hook and javascript to manage state variables.

State variables :

 When someone clicks on checkbox to change appearance(Dark to light/Light to dark) then these value changes

--> Mode (background colour and text of navbar) changes

--> Mode1 (text colour of checkbox) changes 

--> background color of entire page( document.body.style.backgroundColor)

--> An alert is generated for a certain interval (setAlert)

src --> App.js

import React, { useState } from 'react'

import './App.css';

import Navbar from './components/Navbar';

import Alert from './components/Alert';

function App() {

  //Using useState to set initial values of alert

  const [alert, setAlert] = useState(null);

  const showAlert = (message, type) => {

    setAlert(

      {

        msg: message,

        type: type

      }

    )

    setTimeout(() => {

      setAlert(null);

    }, 1500);

  }

 // Using useState to set initial values of mode and mode1

const [Mode, setMode] = useState('light');

  const [Mode1, setMode1] = useState('dark');

//When checkbox is clicked toggleMode() starts working and state variables change

const toggleMode = () => {

    if (Mode === 'dark') {

      setMode("light");

      setMode1("dark");

      document.body.style.backgroundColor = 'white';

      showAlert('Light Mode is Enabled', 'Success:')

    }

    else {

      setMode("dark");

      setMode1("light")

      document.body.style.backgroundColor = 'indigo';

      showAlert('Dark Mode is Enabled', 'Success:')

    }

  }

 

//Then, Inside return of App.js set the values of props

 

return (

    <>  

     <Navbar title="TextBox" about="About" mode={Mode} mode1={Mode1} ToggleMode={toggleMode} />

   

    <Alert alert={alert} />

    </>

);

}

export default App;

Final Result :

Image 2 -  Navbar with Alert when  Light mode Enabled

Image 3 -  Navbar with Alert when  Dark mode Enabled