Expected behavior When the screen shrinks to a smaller size, or on mobile the navbar turns into a sidebar with a bars button to toggle, per the example.

Actual behavior Navbar disappears when the screen is small.

Resources (screenshots, code snippets etc.)

import React, { useState, useEffect } from 'react';

import 'mdb-react-ui-kit/dist/css/mdb.min.css';

Import { MDBBtn, 
MDBContainer,
MDBNavbar,
MDBNavbarBrand,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBCollapse, } from 'mdb-react-ui-kit';
    import Link from 'next/link';
    import logo from '../assets/logos/logo.svg'
    import logoAlternate from '../assets/logos/logo-alternate.svg'
    import { useRouter } from 'next/router'
    //import { Navbar, Button, Form, FormControl, Nav, NavDropdown, Container, Offcanvas, Accordion } from 'react-bootstrap'

import MediaQuery from 'react-responsive'

const NavBar = () => {
const [mounted, setMounted] = useState(false)
const [isOpen, setIsOpen] = useState(false);
const [scrollTop, setScrollTop] = useState(0)
const [scrolling, setScrolling] = useState(true);
const router = useRouter()
const headerAlternatePages = [
    "/",
    "/admin",
]

useEffect(() => {
    setMounted(true)
    const onScroll = e => {
        setScrollTop(e.target.documentElement.scrollTop);
        setScrolling(e.target.documentElement.scrollTop > scrollTop);
    };
    window.addEventListener("scroll", onScroll);

    return () => window.removeEventListener("scroll", onScroll);
}, [scrolling])


const [showNav, setShowNav] = useState(false);

return (
    <>
        {mounted &&
            <>
                <MediaQuery minWidth={1024}>
                    <MDBNavbar 
                        fixed="top"
                        bgColor={scrollTop == 0 && headerAlternatePages.includes(router.asPath) ? "transparent" : "light"}
                        expand="sm"
                    >
                        <MDBContainer fluid>
                            <MDBNavbarLink passHref href="/">
                                <MDBNavbarBrand className="me-5" >
                                    <img width="108px" src={scrollTop == 0 && headerAlternatePages.includes(router.asPath) ? logoAlternate.src : logo.src} alt="" />
                                </MDBNavbarBrand>
                            </MDBNavbarLink>
                            <MDBNavbarToggler
                                data-mdb-target='#navbarSupportedContent'
                                aria-controls='navbar'
                                data-mdb-toggle="collapse"
                                aria-expanded='false'
                                aria-label='Toggle navigation'
                                onClick={() => setShowNav(!showNav)}
                                >
                                <MDBIcon icon='bars' fas />
                                </MDBNavbarToggler>

                                <MDBCollapse navbar show={showNav} id='navbarSupportedContent'>
                                <MDBNavbarNav right className='ms-auto mb-2 mb-lg-0'>
                                    <MDBNavbarItem>
                                    <MDBNavbarLink active aria-current='page' href='/mypaths'>
                                        My Path
                                    </MDBNavbarLink>
                                    </MDBNavbarItem>
                                    <MDBNavbarItem>
                                    <MDBDropdown>
                                        <MDBDropdownToggle tag='a' className='nav-link'>
                                        Browse Opportunities
                                        </MDBDropdownToggle>
                                        <MDBDropdownMenu>
                                        <MDBDropdownItem link>Find My Path</MDBDropdownItem>
                                        <MDBDropdownItem link>Browse Open Positions</MDBDropdownItem>
                                        </MDBDropdownMenu>
                                    </MDBDropdown>
                                    </MDBNavbarItem>
                                    <MDBNavbarItem>
                                    <MDBDropdown>
                                        <MDBDropdownToggle tag='a' className='nav-link'>
                                        Training
                                        </MDBDropdownToggle>
                                        <MDBDropdownMenu>
                                        <MDBDropdownItem link>Career Path Training</MDBDropdownItem>
                                        <MDBDropdownItem link>Asbury Learning Portal</MDBDropdownItem>
                                        <MDBDropdownItem link>Leaderboard</MDBDropdownItem>
                                        </MDBDropdownMenu>
                                    </MDBDropdown>
                                    </MDBNavbarItem>
                                    <MDBNavbarItem>
                                    <MDBDropdown>
                                        <MDBDropdownToggle tag='a' className='nav-link'>
                                        My Team
                                        </MDBDropdownToggle>
                                        <MDBDropdownMenu>
                                        <MDBDropdownItem link>View My Team</MDBDropdownItem>
                                        <MDBDropdownItem link>My Team's Paths</MDBDropdownItem>
                                        </MDBDropdownMenu>
                                    </MDBDropdown>
                                    </MDBNavbarItem>

                                </MDBNavbarNav>

                                <form className='d-flex input-group w-auto'>
                                    <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
                                    <MDBBtn color='primary'>Search</MDBBtn>
                                </form>
                                </MDBCollapse>
                            </MDBContainer>
                            </MDBNavbar>
                </MediaQuery>
            </>
        }
    </>
);

}

export default NavBar;