Skip to content

Commit

Permalink
Merge pull request #164 from suvarnakale/release-1.1.0
Browse files Browse the repository at this point in the history 
Issue #2925 feat : Add header for the workspace  - resolve comments - issue fixes
  • Loading branch information
@itsvick
itsvick authored Jan 7, 2025
2 parents d79b2e2 + e889036 commit 7a7cd71
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 82 deletions.
115 changes: 64 additions & 51 deletions src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,67 +16,75 @@ const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {

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) => (
<Box
style={{
display: "flex",
alignItems: "center",
gap: "15px",
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", alignItems: "flex-start", gap: "15px" }}>
<PersonalVideoIcon sx={{ color: "#FFFFFF" }} />
if (
window.innerWidth < 768 &&
!isToastDismissed &&
!toastShown &&
!toastShown
) {
toast(
(t) => (
<Box
style={{
display: "flex",
alignItems: "center",
gap: "15px",
justifyContent: "space-between",
}}
>
<Box
sx={{
fontSize: "14px",
color: "#F4F4F4",
fontWeight: "500",
}}
sx={{ display: "flex", alignItems: "flex-start", gap: "15px" }}
>
Switch to desktop for a better experience
<PersonalVideoIcon sx={{ color: "#FFFFFF" }} />
<Box
sx={{
fontSize: "14px",
color: "#F4F4F4",
fontWeight: "500",
}}
>
Switch to desktop for a better experience
</Box>
</Box>
<Button
onClick={() => {
toast.dismiss(t.id);
localStorage.setItem("desktopToastDismissed", "true"); // Store dismissal in localStorage
setToastShown(true);
}}
style={{
marginLeft: "10px",
background: "transparent",
border: "none",
color: "#fff",
cursor: "pointer",
}}
>
<CloseIcon />
</Button>
</Box>
<Button
onClick={() => {
toast.dismiss(t.id);
localStorage.setItem("desktopToastDismissed", "true"); // Store dismissal in localStorage
setToastShown(true);
}}
style={{
marginLeft: "10px",
background: "transparent",
border: "none",
color: "#fff",
cursor: "pointer",
}}
>
<CloseIcon />
</Button>
</Box>
), {
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
Expand All @@ -88,15 +96,20 @@ const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
}, [toastShown]);

return (
<Box display="flex" sx={{ overflowX: "hidden !important" }} minHeight="100vh">
<Box
display="flex"
sx={{ overflowX: "hidden !important" }}
minHeight="90vh"
>
<Toaster />
<Box
sx={{
maxHeight: "132vh",
minHeight: "100vh",
"@media (max-width: 900px)": {
position: "absolute",
position: "fixed",
top: "3px",
zIndex: "99999",
},
"@media (min-width: 900px)": {
background: "linear-gradient(to bottom, white, #F8EFDA)",
Expand Down
96 changes: 65 additions & 31 deletions src/components/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,49 @@ import {
import Image from "next/image";
import { useRouter } from "next/router";
import React, { useState } from "react";
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
import logo from "/public/logo.png";
import { Role } from "@/utils/app.constant";
import { getLocalStoredUserRole } from "@/services/LocalStorageService";
const userRole = getLocalStoredUserRole();

let isAdmin: boolean;
if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
isAdmin = localStorage.getItem("adminInfo") ? true : false;
}
// Updated menu items with icons
const menuItems = [
{ text: "Create", key: "create", icon: <AddOutlinedIcon /> },
{ text: "Drafts", key: "draft", icon: <CreateOutlinedIcon /> },
...(userRole !== Role.CCTA
? [{ text: "Submitted for Review", key: "submitted", icon: <PreviewOutlinedIcon /> },
]
? [
{
text: "Submitted for Review",
key: "submitted",
icon: <PreviewOutlinedIcon />,
},
]
: []),
...(userRole === Role.CCTA
? [{ text: "Up for Review", key: "up-review", icon: <PreviewOutlinedIcon /> }]
? [
{
text: "Up for Review",
key: "up-review",
icon: <PreviewOutlinedIcon />,
},
]
: []),
{ text: "My Published Contents", key: "publish", icon: <OutlinedFlagOutlinedIcon /> },
{
text: "My Published Contents",
key: "publish",
icon: <OutlinedFlagOutlinedIcon />,
},
{ text: "All My Contents", key: "allContents", icon: <AppsOutlinedIcon /> },
{ text: "Discover Contents", key: "discover-contents", icon: <ManageSearchIcon /> },

{
text: "Discover Contents",
key: "discover-contents",
icon: <ManageSearchIcon />,
},
];

interface SidebarProps {
Expand All @@ -58,7 +80,7 @@ const Sidebar: React.FC<SidebarProps> = ({ 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
Expand All @@ -69,18 +91,15 @@ const Sidebar: React.FC<SidebarProps> = ({ 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 = (
<Box
Expand All @@ -89,23 +108,24 @@ const Sidebar: React.FC<SidebarProps> = ({ 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",
},
}}
>
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img src={'/logo.png'} alt="logo" height={60} />
<Box
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
<img src={"/logo.png"} alt="logo" height={60} />
</Box>
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
paddingTop={"1rem"}
>

<Box display="flex" alignItems="center">
<ListItemIcon>
<IconButton onClick={goBack}>
Expand Down Expand Up @@ -140,8 +160,8 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
? "var(--mui-palette-primary-main)"
: "transparent",
color: "#000",
fontSize: '16px !important' ,

fontSize: "16px !important",

"&:hover": {
background:
Expand All @@ -160,14 +180,23 @@ const Sidebar: React.FC<SidebarProps> = ({ 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}
</ListItemIcon>
<ListItemText className="menu-list-content" primaryTypographyProps={{ fontSize: '16px', fontFamily:'Poppins', fontWeight: selectedKey === item?.key ? '600' : '500', color:'black' }} primary={item?.text} />
<ListItemText
className="menu-list-content"
primaryTypographyProps={{
fontSize: "16px",
fontFamily: "Poppins",
fontWeight: selectedKey === item?.key ? "600" : "500",
color: "black",
}}
primary={item?.text}
/>
</ListItemButton>
))}
</List>
Expand All @@ -178,8 +207,14 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
<>
{isMobile ? (
<>

<MenuIcon sx={{ margin: 2, cursor: "pointer" }} onClick={toggleDrawer} />
<MenuIcon
sx={{
margin: 2,
cursor: "pointer",
color: isAdmin ? "white" : "black",
}}
onClick={toggleDrawer}
/>

<Drawer
anchor="left"
Expand All @@ -202,7 +237,6 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
display: "flex",
justifyContent: "flex-start",
width: 284,

}}
>
{drawerContent}
Expand All @@ -212,4 +246,4 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
);
};

export default Sidebar;
export default Sidebar;

0 comments on commit 7a7cd71

Please sign in to comment.