We Keep Coding

How to add circular profile picture to react bootstrap nav bar

I'm trying to add a circular profile picture to my react-bootstrap nav bar.
Similar to this:
But I'm not sure where to add the div for the circular image.
Here is my navbar code:
import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';
const NavBar = (props) => {
const user = 'Petrina.C'
return (
<>
<Navbar expand="lg">
<Container style={{maxWidth:'100%'}}>
<Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto" id="navLinks">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/voters">Voters</Nav.Link>
<NavDropdown title={`${user}`} id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
{props.children}
</>
);
}
export default NavBar;
Any help is appreciated!

You can put image and use class rounded-circle to make it like this:
<img src="..." class="rounded-circle" alt="...">

There are several properties available in React-Bootstrap docs.
You can simply pass the props as true if you want a property to be applied.
Example:
import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>
Or you can always use the CSS properties
import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />

Cannot get navbar to function on collapse using react-bootstrap

I'm using react-bootstrap to create a responsive navbar and for some reason it will not work. I've tried using react-router-dom to handle page change and creating a function withing the navbar to handle page change to see if that was the issue. The hamburger icon is not even rendering just a gray blank square.
This is my current code
And here is what it renders
What else can I try?
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'
import '../css/Navbar.css'
export default function NavbarRender({ currentPage, handlePageChange }){
return(
<Navbar collapseOnSelect expand='sm' id='total-nav'>
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#about" onClick={() => handlePageChange('About')}
className={currentPage === 'About' ? 'nav-link active' : 'nav-link'} id="navbar">
About
</Nav.Link>
<Nav.Link href="#portfolio" onClick={() => handlePageChange('Portfolio')}
className={currentPage === 'Portfolio' ? 'nav-link active' : 'nav-link'} id="navbar">
Portfolio
</Nav.Link>
<Nav.Link href="#resume" onClick={() => handlePageChange('Resume')}
className={currentPage === 'Resume' ? 'nav-link active' : 'nav-link'} id="navbar">
Resume
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

I have that problem when forget to import react-boostrap CSS
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

MUI Drawer opening but not closing in React web app

I have a Navbar component in my React app which shows a Sidebar component when screen is small. I used Material UI for the Drawer for displaying the sidebar.
My issue is, on clicking the hamburger icon, drawer opens fine. But it doesn't close when clicking the links or even outside the Sidebar.
How to solve this? What am I doing wrong? Here is my code.
Navbar.js
import React, { useContext, useEffect, useState } from "react";
import "./navbar.css";
import Sidebar from "./Sidebar";
import { NavLink } from "react-router-dom";
import { Drawer } from "#mui/material";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
const Navbar = () => {
const [drwOpen, setDrwOpen] = useState(false);
const handleOpen = () => {
setDrwOpen(true);
};
const handleClose = () => {
setDrwOpen(false);
};
return (
<header>
<nav>
<div className="left">
<div className="hamburger" onClick={handleOpen}>
<IconButton>
<MenuIcon style={{ color: "#fff" }} fontSize="large" />
</IconButton>
<Drawer open={drwOpen} onClose={handleClose}>
<Sidebar logClose={handleClose}/>
</Drawer>
</div>
<NavLink to="/">
<img
className="navlogo"
src={process.env.PUBLIC_URL + "/math.png"}
alt="logo"
/>
</NavLink>
</div>
</nav>
</div>
</header>
);
};
export default Navbar;
Sidebar.js
import React from "react";
import { NavLink } from "react-router-dom";
import { useContext, useState } from "react";
import ChevronRightIcon from "#mui/icons-material/ChevronRight";
import "./sidebar.css";
const Sidebar = ({logClose}) => {
return (
<>
<div className="sidebar">
<p>random text</p>
<div className="menu" onClick={()=>logClose()}>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis" >
<p>ABC</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis">
<pXYZ</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
<NavLink to="/" style={{ textDecoration: "none" }} className="lis">
<p>123</p>
<ChevronRightIcon style={{ fill: "#949494" }}/>
</NavLink>
</div>
</div>
</>
);
};
export default Sidebar;

The onClick event in <div className="hamburger"> is probably interfering with the open state of your drawer.
Since the drawer is a child of that div, every click on the drawer will propagate and call the onClick event of its parent element as well.
Try putting <Drawer> outside of <div className="hamburger">
Or use event.stopPropagation() in an onClick in the drawer component to stop that behaviour like so:
<Drawer onClick={(event) => {event.stopPropagation()}}>
Hope this could help!

When I add <Link></Link> component Layout's SelectedKeys is not working

Here is my *Navbar
import React, { useState } from "react";
import { Layout, Menu } from "antd";
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from "#ant-design/icons";
import { Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const Navbar = (props) => {
const [collapsed, setCllapsed] = useState(false);
const toggle = () => {
setCllapsed(!collapsed);
};
return (
<div>
<Layout id="components-layout-demo-custom-trigger">
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/">
Dashboard
</Link>
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/groups">
Groups
</Link>
</Menu.Item>
<Menu.Item key="3" icon={<VideoCameraOutlined />}>
<Link style={{ textDecoration: "none" }} to="/tutors">
Tutors
</Link>
</Menu.Item>
<Menu.Item key="4" icon={<UserOutlined />}>
<Link style={{ textDecoration: "none" }} to="/students">
Students
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
onClick: toggle,
}
)}
</Header>
<Content
className="site-layout-background"
style={{
margin: "24px 16px",
padding: 24,
minHeight: 280,
}}
>
{props.children}
</Content>
</Layout>
</Layout>
</div>
);
};
export default Navbar;
In this example I was using <Menu.Item></Menu.Item> component from antd . But it stopped working when clicked once. It changed onclick function. After adding from react-router-dom, I am having trouble with SelectedKeys of Antdesign's Layout. Before Link component of react-router-dom selectedKeys was working when you click one time, but after adding Link component, SelectedKeys is working when double clicked. How can I solve it? I need this should work once. Anyone can help me?

React-bootstrap Navbar with router dom Navlinks

I'm trying to use reactstrap navbar from there
https://react-bootstrap.github.io/components/navbar/
with router v4.
Here is my code:
import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import './customnavbar.css'
class CustomNavbar extends Component {
render() {
return (
<Navbar style={{backgroundColor : '#1e272e'}} expand="lg">
<Navbar.Brand style={{color : 'white' }} href="/">Vincent Sérièges</Navbar.Brand>
<Navbar.Toggle style={{backgroundColor : 'white' }} aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" style={{ width:'100%', textAlign:'center', justifyContent : 'flex-end'}}>
<NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px' }} to="/">Home</NavLink>
<NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px' }} to="/portfolio">Portfolio</NavLink>
<NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px' }} to="/about">About</NavLink>
<NavLink style={{color : 'white', paddingRight:'25px', paddingLeft:'25px' }} to="/contact">Contact</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default CustomNavbar;
You can see the result on this link :
http://vincentserieges.com/
When you click on the menu items the routing works perfectly, but when you refresh the page
The requested URL /portfolio was not found on this server.
Can anyone guide me in this trouble ?
PS: The routing works perfectly on the webpack-dev-server