From 84bf0d001e98e0c240c6ea5bf2cc9414ba97a5a0 Mon Sep 17 00:00:00 2001 From: Dobromir Popov Date: Wed, 24 Apr 2024 13:53:50 +0300 Subject: [PATCH] UI style fixes --- _doc/ToDo.md | 4 ++ components/layout.tsx | 79 +++++++++++++++------------- components/sidebar.tsx | 2 +- pages/cart/publishers/myschedule.tsx | 16 +++--- styles/styles.css | 7 +++ 5 files changed, 63 insertions(+), 45 deletions(-) diff --git a/_doc/ToDo.md b/_doc/ToDo.md index e49b6d1..1f612c9 100644 --- a/_doc/ToDo.md +++ b/_doc/ToDo.md @@ -216,3 +216,7 @@ fix published schedule to cover end of the week графика - синк - ОК вестителите от Фабио - потребителите с двойни имейли - + + + админс can send *urgent* email to everybody to ask for shift +in schedule admin - if a publisher is always pair & family is not in the shift - add + button to add them diff --git a/components/layout.tsx b/components/layout.tsx index 26d877b..9d9b8b6 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -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 ( - - //
- //
- //
- // - // - //
- -
-
+
-
- {children} +
+
+ {children} +
- {/*
-
-
*/}
); -} +} \ No newline at end of file diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 3f2d4c2..acd412c 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -129,7 +129,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) { className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none" style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰