'How to implement offcanvas on selected breakpoint on react router dom?

I did the navbar offcanvas across all breakpoints using the attribute expand={false} like the image below. enter image description here

However i want the navbar items to be like the normal navigation on (min-width: 992px) OR expand="lg" like the image below. Im using reactrouter v6 and react-bootstrap. enter image description here

Below is my code and also here is the working sandbox code https://codesandbox.io/.

import React, { useState } from "react";
import { Container, Navbar, Nav, Offcanvas } from "react-bootstrap";
import { NavLink, Outlet } from "react-router-dom";

const NavbarContent = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <>
      <Navbar
        expanded={isOpen}
        expand={false}
        bg="light"
        fixed="top"
        className="bg-white text-the-primary bg-gradient shadow py-3"
      >
        <Container>
          <Navbar.Brand href="/">
            <span className="d-block fs-1">Offcanvas</span>{" "}
          </Navbar.Brand>
          <Navbar.Toggle
            aria-controls="offcanvasNavbar"
            onClick={() => setOpen(isOpen ? false : "expanded")}
          />
          <Navbar.Offcanvas
            id="offcanvasNavbar"
            aria-labelledby="offcanvasNavbarLabel"
            placement="end"
          >
            <Offcanvas.Header
              closeButton
              className="justify-content-end"
              onClick={() => setOpen(false)}
            ></Offcanvas.Header>
            <Offcanvas.Body>
              <Nav className="justify-content-end flex-grow-1 pe-0">
                <NavLink to="/" onClick={() => setOpen(false)}>
                  Home
                </NavLink>
                <NavLink to="/About" onClick={() => setOpen(false)}>
                  About
                </NavLink>
              </Nav>
            </Offcanvas.Body>
          </Navbar.Offcanvas>
        </Container>
      </Navbar>
      <Outlet />
    </>
  );
};

export default NavbarContent;

I'm not sure if I missed something on useState and expand attribute of the navbar.

reactjsreact-bootstrapnode.jsexpresssocketssocket.ionuxt.js


Solution 1:[1]

Set the expand break point to large using the command

<Navbar
  expanded={isOpen}
  expand='lg'
  ...
/>

Works for me

Solution 2:[2]

In your server code, you're adding your 'send-message' event listener to the io object, which is your main socket.io Server instance. However, event listeners should be added to the socket object you get from the connection event. Something like:

// A new connection comes in
io.on('connection', (socket: Socket) => {
  // Now we listen for the event that comes from this particular socket
  socket.on('send-message', (message: any) => {
    // You also use the Socket instance to send events back to clients, not to the `io` Server.
    socket.emit('send', "message!");
  });
});

The Socket instance docs have more info on what you can do with these sockets.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roman Mahotskyi
Solution 2 woubuc

Related Questions