popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI style fixes

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-24 13:53:50 +03:00
parent 822b22b995
commit 84bf0d001e
5 changed files with 63 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/layout.tsx
View File

@ -9,56 +9,63 @@ import Body from 'next/document'
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { set } from "date-fns"
export default function Layout({ children }: { children: ReactNode }) {
const router = useRouter()
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
export default function Layout({ children }) {
const router = useRouter();
// auto resize for tablets: disabled.
// useEffect(() => {
// // Function to check and set the state based on window width
// const handleResize = () => {
// if (window.innerWidth < 768) { // Assuming 768px as the breakpoint for mobile devices
// setIsSidebarOpen(false);
// } else {
// setIsSidebarOpen(true);
// }
// };
// // Set initial state
// handleResize();
// // Add event listener
// window.addEventListener('resize', handleResize);
// // Cleanup
// return () => window.removeEventListener('resize', handleResize);
// }, []);
// Assuming that during SSR, we don't want the sidebar to be open.
const [isSmallScreen, setIsSmallScreen] = useState(true);
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
useEffect(() => {
// This function determines if we're on a small screen
const checkIfSmallScreen = () => window.innerWidth < 768;
// Set the initial screen size and sidebar state
const initialSmallScreenCheck = checkIfSmallScreen();
setIsSmallScreen(initialSmallScreenCheck);
setIsSidebarOpen(!initialSmallScreenCheck);
const handleResize = () => {
const smallScreenCheck = checkIfSmallScreen();
setIsSmallScreen(smallScreenCheck);
// On small screens, we want to ensure the sidebar is not open by default when resizing
if (smallScreenCheck) {
setIsSidebarOpen(false);
}
};
// Add event listener
window.addEventListener('resize', handleResize);
// Cleanup event listener on component unmount
return () => window.removeEventListener('resize', handleResize);
}, []);
// Toggle the sidebar only when the button is clicked
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
// We use `isSmallScreen` to determine the margin-left on small screens
// and use `isSidebarOpen` to determine if we need to push the content on large screens.
const marginLeftClass = isSmallScreen ? 'ml-0' : isSidebarOpen ? 'ml-60' : 'ml-6';
return (
// <div className="h-screen w-screen" >
// <div className="flex flex-col">
// <div className="flex flex-row h-screen">
// <ToastContainer />
// <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
// <main className={`pr-10 transition-all duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
<div className="">
<div className="flex flex-col">
<div className="flex flex-row h-[90vh] w-screen ">
<div className="flex flex-row min-h-screen w-screen">
<ToastContainer position="top-center" style={{ zIndex: 9999 }} />
<Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
<main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
{children}
<main className={`flex-1 transition-all duration-300 ${marginLeftClass}`}>
<div className="p-4 mx-auto pr-8 pl-0">
{children}
</div>
</main>
</div>
{/* <div className="justify-end items-center text-center ">
<Footer />
</div> */}
</div>
</div>
);
}
}