adjust navbar toggle behavior

for some reason after adding the custom ToggleIcon component to the Navbar,
the screen size that the navbar collapses at changed. It used to collapse
at <992px, but changed to <1232px. changing the `expand` prop to `md`
collapses the navbar at <1008px, which is closer to the original behavior.

ref: https://react-bootstrap.github.io/docs/components/navbar#responsive-behaviors

Author: alishaevn

src/compounds/Header/Header.jsx

@@ -8,7 +8,7 @@ const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
 
   return (
-    <Navbar bg='primary' expand='lg'>
+    <Navbar bg='primary' expand='md'>
       <Container>
         <Navbar.Brand className='w-50'>
           <Logo src={src} alt={alt} height={45} />
@@ -20,6 +20,8 @@ const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
           <Nav className='ms-auto'>
             {navLinks.map((nav) => (
               <Nav.Link
+              // ref https://github.com/twbs/bootstrap/blob/v5.2.3/scss/helpers/_colored-links.scss
+              // for how this className works
                 className={`link-${linkColor}`}
                 href={nav.path}
                 key={`${nav.label}-nav-link`}