From 3a736f868395c75c3b331b8d32b402596a4c90a9 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Fri, 3 Jan 2025 16:17:30 +0530 Subject: [PATCH 1/3] Issue #2925 feat : Add header for the workspace - resolve comments - issue fixes --- src/components/Layout.tsx | 118 +++++++++++++++++++++---------------- src/components/SideBar.tsx | 96 ++++++++++++++++++++---------- 2 files changed, 133 insertions(+), 81 deletions(-) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index afb5fea..bc4bdf2 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -4,6 +4,7 @@ import Sidebar from "./SideBar"; import { Toaster, toast } from "react-hot-toast"; import CloseIcon from "@mui/icons-material/Close"; import PersonalVideoIcon from "@mui/icons-material/PersonalVideo"; +import { useRouter } from "next/router"; interface LayoutProps { children: React.ReactNode; @@ -13,70 +14,80 @@ interface LayoutProps { const Layout: React.FC = ({ children, selectedKey, onSelect }) => { const [toastShown, setToastShown] = useState(false); + const router = useRouter(); + const isCreatePath = router.pathname === "/content/create"; useEffect(() => { // Check localStorage to see if the toast has been dismissed - const isToastDismissed = localStorage.getItem("desktopToastDismissed") === "true"; - - - + const isToastDismissed = + localStorage.getItem("desktopToastDismissed") === "true"; const handleResize = () => { - if (window.innerWidth < 768 && !isToastDismissed && !toastShown && !toastShown ) { - toast((t) => ( - - - + if ( + window.innerWidth < 768 && + !isToastDismissed && + !toastShown && + !toastShown + ) { + toast( + (t) => ( + - Switch to desktop for a better experience + + + Switch to desktop for a better experience + + - - - ), { - position: "top-center", - duration: Infinity, - style: { - background: "green", - color: "#fff", - }, - }); + ), + { + position: "top-center", + duration: Infinity, + style: { + background: "green", + color: "#fff", + }, + } + ); setToastShown(true); // Mark toast as shown } }; // Check on initial load - if (!localStorage.getItem('isToastCalled')){ + if (!localStorage.getItem("isToastCalled")) { handleResize(); - localStorage.setItem('isToastCalled',"true") + localStorage.setItem("isToastCalled", "true"); } // Attach event listener for window resize @@ -88,15 +99,20 @@ const Layout: React.FC = ({ children, selectedKey, onSelect }) => { }, [toastShown]); return ( - + }, { text: "Drafts", key: "draft", icon: }, ...(userRole !== Role.CCTA - ? [{ text: "Submitted for Review", key: "submitted", icon: }, - ] + ? [ + { + text: "Submitted for Review", + key: "submitted", + icon: , + }, + ] : []), ...(userRole === Role.CCTA - ? [{ text: "Up for Review", key: "up-review", icon: }] + ? [ + { + text: "Up for Review", + key: "up-review", + icon: , + }, + ] : []), - { text: "My Published Contents", key: "publish", icon: }, + { + text: "My Published Contents", + key: "publish", + icon: , + }, { text: "All My Contents", key: "allContents", icon: }, - { text: "Discover Contents", key: "discover-contents", icon: }, - + { + text: "Discover Contents", + key: "discover-contents", + icon: , + }, ]; interface SidebarProps { @@ -68,18 +90,15 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { setDrawerOpen(!drawerOpen); }; - const goBack = () => { if (typeof window !== "undefined" && window.localStorage) { const userInfo = JSON.parse(localStorage.getItem("adminInfo") || "{}"); console.log("userInfo", userInfo); if (userInfo?.role === Role.SCTA || userInfo?.role === Role.CCTA) { router.push("/course-planner"); - - } - else - router.push("/"); - }}; + } else router.push("/"); + } + }; const drawerContent = ( = ({ selectedKey, onSelect }) => { width="284px !important" height="100%" sx={{ - fontSize: '16px', - '@media (max-width: 900px)': { - background: 'linear-gradient(to bottom, white, #F8EFDA)', - fontSize: '12px', + fontSize: "16px", + "@media (max-width: 900px)": { + background: "linear-gradient(to bottom, white, #F8EFDA)", + fontSize: "12px", }, }} > - - logo + + logo = ({ selectedKey, onSelect }) => { justifyContent="space-between" paddingTop={"1rem"} > - @@ -139,8 +159,8 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { ? "var(--mui-palette-primary-main)" : "transparent", color: "#000", - - fontSize: '16px !important' , + + fontSize: "16px !important", "&:hover": { background: @@ -159,14 +179,23 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { selectedKey === item?.key ? "#2E1500" : theme.palette.warning.A200, - minWidth: '40px', - fontWeight: selectedKey === item?.key ? '500' : '500', - fontSize: '16px !important' + minWidth: "40px", + fontWeight: selectedKey === item?.key ? "500" : "500", + fontSize: "16px !important", }} > {item?.icon} - + ))} @@ -177,8 +206,16 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { <> {isMobile ? ( <> - - + = ({ selectedKey, onSelect }) => { display: "flex", justifyContent: "flex-start", width: 284, - }} > {drawerContent} @@ -211,4 +247,4 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { ); }; -export default Sidebar; \ No newline at end of file +export default Sidebar; From ef9ed27990129cf6b5df0b956b78abc5dc70d513 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Fri, 3 Jan 2025 16:19:32 +0530 Subject: [PATCH 2/3] Issue #2925 chore : remove extra css --- src/components/SideBar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index fe20ea3..02e6d3b 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -210,8 +210,6 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { sx={{ margin: 2, cursor: "pointer", - position: "relative", - zIndex: 99999, color: isAdmin ? "white" : "black", }} onClick={toggleDrawer} From e889036b36569f819c348ced1ca91020f5a93b47 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Tue, 7 Jan 2025 15:31:34 +0530 Subject: [PATCH 3/3] Issue #2925 feat : Add header for the workspace - resolve comments - issue fixes --- src/components/Layout.tsx | 3 --- src/components/SideBar.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index bc4bdf2..32d4adb 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -4,7 +4,6 @@ import Sidebar from "./SideBar"; import { Toaster, toast } from "react-hot-toast"; import CloseIcon from "@mui/icons-material/Close"; import PersonalVideoIcon from "@mui/icons-material/PersonalVideo"; -import { useRouter } from "next/router"; interface LayoutProps { children: React.ReactNode; @@ -14,8 +13,6 @@ interface LayoutProps { const Layout: React.FC = ({ children, selectedKey, onSelect }) => { const [toastShown, setToastShown] = useState(false); - const router = useRouter(); - const isCreatePath = router.pathname === "/content/create"; useEffect(() => { // Check localStorage to see if the toast has been dismissed diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index fef22a0..d50989e 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -80,7 +80,7 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { const handleNavigation = (key: string) => { console.log(key); router.push(`/workspace/content/${key}`); - localStorage.setItem("selectedFilters", JSON.stringify([])) + localStorage.setItem("selectedFilters", JSON.stringify([])); onSelect(key); if (isMobile) { setDrawerOpen(false); // Close drawer after selecting in mobile view