Advertisement
Guest User

React

a guest
Jul 20th, 2021
42
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import {
  3.   MDBNavbar,
  4.   MDBNavbarNav,
  5.   MDBNavbarItem,
  6.   MDBNavbarLink,
  7.   MDBNavbarToggler,
  8.   MDBContainer,
  9.   MDBIcon,
  10.   MDBBadge } from 'mdb-react-ui-kit';
  11.  
  12. export default function Header(Properties) {
  13.   return (
  14.     <MDBNavbar expand='lg' light bgColor='white'>
  15.       <MDBContainer fluid>
  16.         <MDBNavbarToggler aria-controls='Navbar' aria-expanded='false' aria-label='Toggle navigation'>
  17.           <MDBIcon fas icon='bars' />
  18.         </MDBNavbarToggler>
  19.         <div className='collapse navbar-collapse' id='#Navbar'>
  20.           <MDBNavbarNav right className='mb-2 mb-lg-0'>
  21.             <MDBNavbarItem active>
  22.               <MDBNavbarLink aria-current='page' href='#'>
  23.                 Home
  24.               </MDBNavbarLink>
  25.             </MDBNavbarItem>
  26.             <MDBNavbarItem>
  27.               <MDBNavbarLink href='#'>Features</MDBNavbarLink>
  28.             </MDBNavbarItem>
  29.             <MDBNavbarItem>
  30.               <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
  31.             </MDBNavbarItem>
  32.             <MDBNavbarItem>
  33.               <MDBNavbarLink href='#'>About</MDBNavbarLink>
  34.             </MDBNavbarItem>
  35.           </MDBNavbarNav>
  36.         </div>
  37.  
  38.         {/* Right Align */}
  39.         <div class="d-flex align-items-center">
  40.           <a class="text-reset me-3" href="#">
  41.             <MDBIcon fas icon="shopping-cart" />
  42.           </a>
  43.  
  44.           <a
  45.             class="text-reset me-3 dropdown-toggle hidden-arrow"
  46.             href="#"
  47.             id="navbarDropdownMenuLink"
  48.             role="button"
  49.             data-mdb-toggle="dropdown"
  50.             aria-expanded="false"
  51.           >
  52.             <MDBIcon fas icon="bell" />
  53.             <MDBBadge class="badge rounded-pill badge-notification bg-danger">1</MDBBadge>
  54.           </a>
  55.           <ul
  56.             class="dropdown-menu dropdown-menu-end"
  57.             aria-labelledby="navbarDropdownMenuLink"
  58.           >
  59.             <li>
  60.               <a class="dropdown-item" href="#">Some news</a>
  61.             </li>
  62.             <li>
  63.               <a class="dropdown-item" href="#">Another news</a>
  64.             </li>
  65.             <li>
  66.               <a class="dropdown-item" href="#">Something else here</a>
  67.             </li>
  68.           </ul>
  69.  
  70.           <a
  71.             class="dropdown-toggle d-flex align-items-center hidden-arrow"
  72.             href="#"
  73.             id="navbarDropdownMenuLink"
  74.             role="button"
  75.             data-mdb-toggle="dropdown"
  76.             aria-expanded="false"
  77.           >
  78.             <img
  79.               src="https://mdbootstrap.com/img/new/avatars/2.jpg"
  80.               class="rounded-circle"
  81.               height="25"
  82.               alt=""
  83.               loading="lazy"
  84.             />
  85.           </a>
  86.           <ul
  87.             class="dropdown-menu dropdown-menu-end"
  88.             aria-labelledby="navbarDropdownMenuLink"
  89.           >
  90.             <li>
  91.               <a class="dropdown-item" href="#">My profile</a>
  92.             </li>
  93.             <li>
  94.               <a class="dropdown-item" href="#">Settings</a>
  95.             </li>
  96.             <li>
  97.               <a class="dropdown-item" href="#">Logout</a>
  98.             </li>
  99.           </ul>
  100.         </div>
  101.         {/* Right Align */}
  102.  
  103.       </MDBContainer>
  104.     </MDBNavbar>
  105.   );
  106. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement