I am using react-pro-sidebar and it works fine on PC but on mobile devices t here is a empty space under the side bar and when i expand the side bar it increases the empty space under the side bar. Please help me to resolve this issue.
Following is my code for side bar and my app.js
sidebar code
import { useState } from "react";
import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar";
import { Box, Typography, useTheme } from "@mui/material";
import { Link } from "react-router-dom";
import "react-pro-sidebar/dist/css/styles.css";
import { tokens } from "../theme";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined";
import ReceiptOutlinedIcon from "@mui/icons-material/ReceiptOutlined";
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
import BarChartOutlinedIcon from "@mui/icons-material/BarChartOutlined";
import PieChartOutlineOutlinedIcon from "@mui/icons-material/PieChartOutlineOutlined";
import TimelineOutlinedIcon from "@mui/icons-material/TimelineOutlined";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import MapOutlinedIcon from "@mui/icons-material/MapOutlined";
const Item = ({ title, to, icon, selected, setSelected }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
return (
<MenuItem
active={selected === title}
style={{
color: colors.grey[100],
}}
onClick={() => setSelected(title)}
icon={icon}
>
<Typography>{title}</Typography>
<Link to={to} />
</MenuItem>
);
};
const Sidebar = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [isCollapsed, setIsCollapsed] = useState(false);
const [selected, setSelected] = useState("Dashboard");
return (
<Box
sx={{
"& .pro-sidebar-inner": {
background: `${colors.primary[400]} !important`,
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.2)',
scrollbarWidth: "thin"
},
"& .pro-icon-wrapper": {
backgroundColor: "transparent !important",
},
"& .pro-inner-item": {
padding: "5px 35px 5px 20px !important",
},
"& .pro-inner-item:hover": {
color: "#868dfb !important",
},
"& .pro-menu-item.active": {
color: "#6870fa !important",
},
/* Scrollbar Styles */
"&::-webkit-scrollbar": {
width: "8px", /* Thin scrollbar */
},
"&::-webkit-scrollbar-track": {
background: "#f1f1f1", /* Track background */
borderRadius: "10px", /* Rounded track corners */
},
"&::-webkit-scrollbar-thumb": {
background: "#888", /* Scrollbar thumb color */
borderRadius: "10px", /* Rounded scrollbar thumb */
},
"&::-webkit-scrollbar-thumb:hover": {
background: "#555", /* Darker color on hover */
},
"&::-webkit-scrollbar-button": {
display: 'none !important' , /* Hides the up/down buttons */
},
"& .pro-sidebar-layout": {
overflowY: "scroll", /* Enables vertical scrollbar */
scrollbarWidth: "thin", /* Makes the scrollbar thin in Firefox */
},
}}
>
<ProSidebar collapsed={isCollapsed}>
<Menu iconShape="square">
{/* LOGO AND MENU ICON */}
<MenuItem
onClick={() => setIsCollapsed(!isCollapsed)}
icon={<MenuOutlinedIcon />}
style={{
margin: "0px 0 0px 0",
color: colors.grey[100],
}}
>
</MenuItem>
<Box>
<Item
title="Dashboard"
to="/"
icon={<HomeOutlinedIcon />}
selected={selected}
setSelected={setSelected}
sx={{ borderColor: "red", borderBottom: "solid 1px #444" }}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Data
</Typography>
<Item
title="Manage Team"
to="/team"
icon={<PeopleOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Contacts Information"
to="/contacts"
icon={<ContactsOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Invoices Balances"
to="/invoices"
icon={<ReceiptOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Pages
</Typography>
<Item
title="Profile Form"
to="/form"
icon={<PersonOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Calendar"
to="/calendar"
icon={<CalendarTodayOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="FAQ Page"
to="/faq"
icon={<HelpOutlineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Charts
</Typography>
<Item
title="Bar Chart"
to="/bar"
icon={<BarChartOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Pie Chart"
to="/pie"
icon={<PieChartOutlineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Line Chart"
to="/line"
icon={<TimelineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Geography Chart"
to="/geography"
icon={<MapOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
</Box>
</Menu>
</ProSidebar>
</Box>
);
};
export default Sidebar;
and this is code for App.js
import { CssBaseline, ThemeProvider } from "@mui/material";
import React, { useState, useEffect } from 'react';
import { ColorModeContext, useMode } from "./theme";
import { Routes, Route } from "react-router-dom";
import { SnackbarProvider } from './Components/SnackbarContext';
import Topbar from "./Global/Topbar";
import Sidebar from "./Global/Sidebar";
import Dashboard from "./Apps/Dashboard";
import User from "./Apps/User";
import Login from "./Login";
function App() {
const [theme, colorMode] = useMode();
const [ShowLogin, setShowLogin] = useState(false);
const handleLogout = () => {
setShowLogin(true);
localStorage.clear();
};
const handleLoginSuccess = () => {
setShowLogin(false);
};
//const setCookie = (name, value, days = 365 * 20) => {
// const expires = new Date(Date.now() + days * 864e5).toUTCString();
// document.cookie = `${name}=${value}; expires=${expires}; path=/`;
//};
//const getCookie = (name) => {
// const nameEQ = `${name}=`;
// const cookies = document.cookie.split("; ");
// for (let cookie of cookies) {
// if (cookie.startsWith(nameEQ)) {
// return cookie.substring(nameEQ.length);
// }
// }
// return null;
//};
useEffect(() => {
//alert(getCookie("Theme"));
//if (getCookie("Theme") == null) {
// setCookie("Theme", theme.palette.mode);
//}
//else {
// theme.palette.mode = getCookie("Theme");
//}
const userJSONstring = localStorage.getItem('OwnerInfo'); // Check if OwnerInfo exists in localStorage
if (userJSONstring !== undefined && userJSONstring !== null) {
const userJSONobject = JSON.parse(userJSONstring);
if (userJSONobject.username !== undefined && userJSONobject.username !== "") {
// Add your logic here if the username is present and not empty
console.log("User logged in:", userJSONobject.username);
}
else
{
setShowLogin(true);
}
}
else
{
setShowLogin(true);
}
return () => {
// Cleanup code if necessary
};
}, [theme.palette.mode]);
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<SnackbarProvider>
<CssBaseline />
<div className="app no-selection">
{ShowLogin ? (
<>
<main className="content">
<Topbar ShowOnlyLogout={ShowLogin}/>
<Login handleLoginSuccess={handleLoginSuccess}/>
</main>
</>
) : (
<>
<Sidebar />
<main className="content">
<Topbar ShowOnlyTheme={ShowLogin} handleLogout={handleLogout}/>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/User" element={<User />} />
</Routes>
</main>
</>
)}
</div>
</SnackbarProvider>
</ThemeProvider>
</ColorModeContext.Provider>
);
}
export default App;