Navbar with React-bootstrap and NEXTjs 13

next-13-navbar.js

'use client'; // MUST have for 

import Link from 'next/link';
import React, { useState } from 'react';
import { Nav, Navbar} from 'react-bootstrap';

import { AiFillEye } from 'react-icons/ai';
import { BsPlayBtnFill, BsInfoCircleFill } from 'react-icons/bs';
import { IoPeopleCircleOutline } from 'react-icons/io5';
import { LuHelpingHand } from 'react-icons/lu';

export default function NavBar() {
  const [expanded, setExpanded] = useState(false);
  return (
//     USE `collapseOnSelect` attr to close on click for mobild 
    <Navbar collapseOnSelect expand="lg" className='sticky-top navbar bg-dark border-bottom border-body navbar-expand-lg bg-body-tertiary mb-5' data-bs-theme='dark'>
      <Link className='navbar-brand' href='/'>
        <img src='/logo.png' alt='Repped Logo' width='80' className='d-inline-block align-text-top px-3' />
      </Link>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='me-auto'>
    
          // for the `collapseOnSelect` to work, you have to structure your links like the following: (https://github.com/react-bootstrap/react-bootstrap/issues/4131#issuecomment-1477975056)
          <Nav.Link as={Link} className='nav-link' href="/">
            <AiFillEye /> Watch
          </Nav.Link>
          <Nav.Link as={Link} className='nav-link' href='/on-demand'>
            <BsPlayBtnFill /> On Demand
          </Nav.Link>
          <Nav.Link as={Link} className='nav-link' href='/creators'>
            <IoPeopleCircleOutline size={25} /> Repped Creators
          </Nav.Link>
          <Nav.Link as={Link} className='nav-link' href='/about'>
            <BsInfoCircleFill /> About Us
          </Nav.Link>
          <Nav.Link as={Link} className='nav-link' href='/support-us'>
            <LuHelpingHand size={25} /> Support
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}