Aditya
1480 lines
47 KiB
React
1480 lines
47 KiB
React
import React, { useState, useEffect } from "react";
|
|
import { toast } from "react-toastify";
|
|
import theme from "../theme.jsx";
|
|
import { BrowserView, MobileView } from "react-device-detect";
|
|
|
|
import { useNavigate, Link } from "react-router-dom";
|
|
import ReactGA from "react-ga4";
|
|
import LicencePopup from "../components/LicencePopup.jsx";
|
|
import SearchField from "../components/Searchfield.jsx";
|
|
import {
|
|
Paper,
|
|
Typography,
|
|
Badge,
|
|
Tooltip,
|
|
List,
|
|
ListItem,
|
|
Avatar,
|
|
Menu,
|
|
MenuItem,
|
|
Select,
|
|
Button,
|
|
ButtonGroup,
|
|
Grid,
|
|
IconButton,
|
|
Divider,
|
|
LinearProgress,
|
|
AppBar,
|
|
Dialog,
|
|
DialogTitle,
|
|
} from "@mui/material";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
import {
|
|
Close as CloseIcon,
|
|
MeetingRoom as MeetingRoomIcon,
|
|
HelpOutline as HelpOutlineIcon,
|
|
Settings as SettingsIcon,
|
|
Notifications as NotificationsIcon,
|
|
Home as HomeIcon,
|
|
Apps as AppsIcon,
|
|
Description as DescriptionIcon,
|
|
EmojiObjects as EmojiObjectsIcon,
|
|
Business as BusinessIcon,
|
|
Polyline as PolylineIcon,
|
|
Add as AddIcon,
|
|
Analytics as AnalyticsIcon,
|
|
Lightbulb as LightbulbIcon,
|
|
ExpandMore as ExpandMoreIcon,
|
|
KeyboardArrowDown as KeyboardArrowDownIcon
|
|
} from "@mui/icons-material";
|
|
import zIndex from "@mui/material/styles/zIndex.js";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
menuButton: {
|
|
textTransform: "none !important",
|
|
fontStyle: "normal",
|
|
color: "#333",
|
|
textAlign: "center",
|
|
fontSize: "16px !important",
|
|
fontWeight: "500 !important",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
'&:hover': {
|
|
backgroundColor: "transparent",
|
|
},
|
|
},
|
|
dropdownMenu: {
|
|
borderRadius: "12px !important",
|
|
zIndex: 10,
|
|
"& .MuiPaper-root": {
|
|
border: "1px solid #f85a3e",
|
|
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
|
borderRadius: "12px !important",
|
|
top: -10,
|
|
overflow: "visible",
|
|
background: "#1A1A1A",
|
|
"&::before": {
|
|
content: '""',
|
|
display: "block",
|
|
position: "absolute",
|
|
top: -10,
|
|
left: "82%",
|
|
borderLeft: "10px solid transparent",
|
|
borderRight: "10px solid transparent",
|
|
borderBottom: "10px solid #f85a3e",
|
|
},
|
|
},
|
|
},
|
|
dropdownMenuItem: {
|
|
fontSize: "16px",
|
|
fontWeight: 400,
|
|
color: "#fff",
|
|
background: "#1A1A1A",
|
|
borderRadius: 16, // Ensure the border radius matches the container
|
|
transition: "background-color 0.3s, color 0.3s",
|
|
'&:hover': {
|
|
color: "#1A73E8",
|
|
background: "#3c3c3c",
|
|
},
|
|
},
|
|
menuList: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 0,
|
|
margin: 0,
|
|
listStyle: "none",
|
|
textTransform: "none",
|
|
},
|
|
cssStcg3yMenuList: {
|
|
borderRadius: "12px !important",
|
|
},
|
|
divider: {
|
|
width: "80%",
|
|
border: "0.5px solid #494949",
|
|
backgroundColor: "#fff",
|
|
alignItems: "center",
|
|
marginLeft: 17
|
|
},
|
|
}));
|
|
|
|
const Header = (props) => {
|
|
const {
|
|
globalUrl,
|
|
isLoaded,
|
|
isLoggedIn,
|
|
removeCookie,
|
|
homePage,
|
|
userdata,
|
|
isMobile,
|
|
serverside,
|
|
billingInfo,
|
|
|
|
notifications,
|
|
} = props;
|
|
const [isHeader, setIsHeader] = React.useState(false);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [tooltipOpen, setTooltipOpen] = useState(false);
|
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
|
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
|
|
const [subAnchorEl, setSubAnchorEl] = React.useState(null);
|
|
const [upgradeHovered, setUpgradeHovered] = React.useState(false);
|
|
const [showTopbar, setShowTopbar] = useState(false) // Set to true to show top bar
|
|
const [selectedOrganization, setSelectedOrganization] = useState({});
|
|
const stripeKey = typeof window === 'undefined' || window.location === undefined ? "" : window.location.origin === "https://shuffler.io" ? "pk_live_51PXYYMEJjT17t98N20qEqItyt1fLQjrnn41lPeG2PjnSlZHTDNKHuisAbW00s4KAn86nGuqB9uSVU4ds8MutbnMU00DPXpZ8ZD" : "pk_test_51PXYYMEJjT17t98NbDkojZ3DRvsFUQBs35LGMx3i436BXwEBVFKB9nCvHt0Q3M4MG3dz4mHheuWvfoYvpaL3GmsG00k1Rb2ksO"
|
|
let navigate = useNavigate();
|
|
const classes = useStyles();
|
|
|
|
const handleClick = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleMenuOpen = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleMenuItemClick = (path) => {
|
|
navigate(path);
|
|
handleMenuClose();
|
|
};
|
|
|
|
const handleTooltipClose = () => {
|
|
setTooltipOpen(false);
|
|
};
|
|
|
|
const handleTooltipOpen = () => {
|
|
setTooltipOpen(true);
|
|
};
|
|
|
|
const topbar_var = "topbar_closed5"
|
|
useEffect(() => {
|
|
// Manually setShowTopbar(true) to show topbar by default
|
|
const topbar = localStorage.getItem(topbar_var)
|
|
if (topbar === "true") {
|
|
setShowTopbar(false)
|
|
}
|
|
}, [])
|
|
|
|
const hoverColor = "#f85a3e";
|
|
const hoverOutColor = "#e8eaf6";
|
|
|
|
const handleHover = (event) => {
|
|
event.target.style.color = hoverColor;
|
|
};
|
|
|
|
const handleHoverOut = (event) => {
|
|
event.target.style.color = hoverOutColor;
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
setAnchorElAvatar(null);
|
|
};
|
|
// Should be based on some path
|
|
const logoCheck = !homePage ? null : null
|
|
|
|
const hrefStyle = {
|
|
color: hoverOutColor,
|
|
textDecoration: "none",
|
|
textTransform: "none",
|
|
fontStyle: "normal",
|
|
width: "100%",
|
|
fontSize: "16px",
|
|
};
|
|
|
|
const menuText = {
|
|
textTransform: "none",
|
|
color: "#FFF",
|
|
textAlign: "center",
|
|
fontSize: 16,
|
|
fontStyle: "normal",
|
|
fontWeight: 400,
|
|
lineHeight: "normal",
|
|
}
|
|
|
|
const isCloud =
|
|
serverside === true || typeof window === "undefined"
|
|
? true
|
|
: window.location.host === "localhost:3002" ||
|
|
window.location.host === "shuffler.io" ||
|
|
window.location.host === "localhost:5002";
|
|
|
|
|
|
const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
|
|
? window.location.pathname
|
|
: "";
|
|
|
|
|
|
const handleGetOrg = (orgId) => {
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.status === 401) {
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
console.log("Error getting org: ", responseJson);
|
|
} else {
|
|
setSelectedOrganization(responseJson);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error getting org: ", error);
|
|
});
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (isLoggedIn && userdata?.active_org?.id?.length > 0) {
|
|
handleGetOrg(userdata.active_org.id);
|
|
}
|
|
}, [isLoggedIn]);
|
|
|
|
// DEBUG HERE
|
|
const handleClickLogout = () => {
|
|
console.log("SHOULD LOG OUT");
|
|
|
|
// Don't really care about the logout
|
|
fetch(globalUrl + "/api/v1/logout", {
|
|
credentials: "include",
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then(() => {
|
|
// Log out anyway
|
|
removeCookie("session_token", { path: "/" });
|
|
removeCookie("session_token", { path: "/" });
|
|
removeCookie("session_token", { path: "/" });
|
|
removeCookie("session_token", { path: "/" });
|
|
|
|
removeCookie("__session", { path: "/" });
|
|
removeCookie("__session", { path: "/" });
|
|
removeCookie("__session", { path: "/" });
|
|
|
|
removeCookie("__session", { path: "/" });
|
|
window.location.pathname = "/";
|
|
|
|
localStorage.setItem("globalUrl", "")
|
|
|
|
// Delete userinfo from localstorage
|
|
localStorage.removeItem("apps")
|
|
localStorage.removeItem("workflows")
|
|
localStorage.removeItem("userinfo")
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
const notificationWidth = 335
|
|
const imagesize = 22;
|
|
const boxColor = "#86c142";
|
|
|
|
const handleClickChangeOrg = (orgId) => {
|
|
// Don't really care about the logout
|
|
//name: org.name,
|
|
//orgId = "asd"
|
|
const data = {
|
|
org_id: orgId,
|
|
};
|
|
|
|
localStorage.setItem("globalUrl", "");
|
|
localStorage.setItem("getting_started_sidebar", "open");
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
|
|
mode: "cors",
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then(function (response) {
|
|
if (response.status !== 200) {
|
|
console.log("Error in response");
|
|
} else {
|
|
localStorage.removeItem("apps");
|
|
localStorage.removeItem("workflows");
|
|
localStorage.removeItem("userinfo");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then(function (responseJson) {
|
|
console.log("In here?");
|
|
if (responseJson.success === true) {
|
|
if (
|
|
responseJson.region_url !== undefined &&
|
|
responseJson.region_url !== null &&
|
|
responseJson.region_url.length > 0
|
|
) {
|
|
console.log("Region Change: ", responseJson.region_url);
|
|
localStorage.setItem("globalUrl", responseJson.region_url);
|
|
//globalUrl = responseJson.region_url
|
|
}
|
|
|
|
if (responseJson["reason"] === "SSO_REDIRECT") {
|
|
toast.info("Redirecting to SSO login page as SSO is required for this organization.")
|
|
setTimeout(() => {
|
|
toast.info(
|
|
"Redirecting to SSO login page as SSO is required for this organization."
|
|
);
|
|
window.location.href = responseJson["url"];
|
|
return;
|
|
}, 2000);
|
|
} else {
|
|
toast("Successfully changed active organization - refreshing!");
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 2000);
|
|
}
|
|
} else {
|
|
if (
|
|
responseJson.reason !== undefined &&
|
|
responseJson.reason !== null &&
|
|
responseJson.reason.length > 0
|
|
) {
|
|
toast(responseJson.reason);
|
|
} else {
|
|
toast(
|
|
"Failed changing org. Try again or contact support@shuffler.io if this persists."
|
|
);
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("error changing: ", error);
|
|
//removeCookie("session_token", {path: "/"})
|
|
});
|
|
};
|
|
|
|
const supportMenu = (
|
|
<span style={{ marginTop: 0 }}>
|
|
<a
|
|
href="https://discord.gg/B2CBzUm"
|
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<Tooltip color="primary" title={"Shuffle is Open Source, and has a thriving Discord Automation Community"} placement="left">
|
|
<IconButton
|
|
color="primary"
|
|
style={{}}
|
|
aria-controls="simple-menu"
|
|
aria-haspopup="true"
|
|
onClick={(event) => { }}
|
|
>
|
|
<svg viewBox="0 0 256 199" width="256" height="199" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" style={{ height: 30, width: 30, }}><path d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z" fill="#dadae1" /></svg>
|
|
{/*#f865f2*/}
|
|
</IconButton>
|
|
</Tooltip>
|
|
</a>
|
|
</span>
|
|
);
|
|
|
|
// Should be based on some path
|
|
const parsedAvatar =
|
|
userdata.avatar !== undefined &&
|
|
userdata.avatar !== null &&
|
|
userdata.avatar.length > 0
|
|
? userdata.avatar
|
|
: ""
|
|
|
|
const avatarMenu = (
|
|
<span>
|
|
<IconButton
|
|
color="primary"
|
|
style={{ marginRight: 5 }}
|
|
aria-controls="simple-menu"
|
|
aria-haspopup="true"
|
|
onClick={(event) => {
|
|
setAnchorElAvatar(event.currentTarget);
|
|
}}
|
|
>
|
|
<Avatar
|
|
style={{ height: 30, width: 30 }}
|
|
alt="Your username here"
|
|
src={parsedAvatar}
|
|
/>
|
|
<ExpandMoreIcon style={{ color: "rgba(255,255,255,0.4)", }} />
|
|
</IconButton>
|
|
<Menu
|
|
id="simple-menu"
|
|
anchorEl={anchorElAvatar}
|
|
keepMounted
|
|
open={Boolean(anchorElAvatar)}
|
|
style={{ zIndex: 10012 }}
|
|
onClose={() => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<Link to="/admin" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<BusinessIcon style={{ marginRight: 5 }} /> Organization
|
|
</MenuItem>
|
|
</Link>
|
|
<Link to="/settings" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<SettingsIcon style={{ marginRight: 5 }} /> Account
|
|
</MenuItem>
|
|
</Link>
|
|
|
|
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
|
|
<Link to="/admin?admin_tab=notifications" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<NotificationsIcon style={{ marginRight: 5 }} /> Notifications ({
|
|
notifications === undefined || notifications === null ? 0 :
|
|
notifications?.filter((notification) => notification.read === false).length
|
|
})
|
|
</MenuItem>
|
|
</Link>
|
|
<Link to="/usecases" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<LightbulbIcon style={{ marginRight: 5 }} /> Use Cases
|
|
</MenuItem>
|
|
</Link>
|
|
|
|
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
|
|
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<MenuItem
|
|
onClick={(event) => {
|
|
handleClose();
|
|
}}
|
|
>
|
|
<HelpOutlineIcon style={{ marginRight: 5 }} /> About
|
|
</MenuItem>
|
|
</Link>
|
|
<MenuItem
|
|
style={{ color: "white" }}
|
|
onClick={(event) => {
|
|
handleClickLogout();
|
|
event.preventDefault();
|
|
handleClose();
|
|
}}
|
|
>
|
|
<MeetingRoomIcon style={{ marginRight: 5 }} /> Logout
|
|
</MenuItem>
|
|
<Divider style={{ marginBottom: 10, }} />
|
|
|
|
<Typography variant="body2" color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, }}>
|
|
Version: 1.4.5
|
|
</Typography>
|
|
</Menu>
|
|
</span>
|
|
);
|
|
|
|
const listItemStyle = {
|
|
textAlign: "center",
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
// marginRight: 10,
|
|
};
|
|
|
|
const modalView =
|
|
<Dialog
|
|
open={modalOpen}
|
|
onClose={() => {
|
|
setModalOpen(false);
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
color: "white",
|
|
minWidth: 850,
|
|
minHeight: 370,
|
|
padding: 20,
|
|
backgroundColor: "rgba(0, 0, 0, 1)",
|
|
borderRadius: theme.palette?.borderRadius,
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{ display: "flex" }}>
|
|
<span style={{ color: "white", fontSize: 24 }}>
|
|
Upgrade your plan
|
|
</span>
|
|
<IconButton
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "close_Upgread_popup",
|
|
label: "",
|
|
})
|
|
};
|
|
setModalOpen(false);
|
|
}}
|
|
style={{
|
|
marginLeft: "auto",
|
|
position: "absolute",
|
|
top: 20,
|
|
right: 20,
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<div style={{ paddingLeft: "30px", paddingRight: "30px" }}>
|
|
<LicencePopup
|
|
serverside={serverside}
|
|
removeCookie={removeCookie}
|
|
isLoaded={isLoaded}
|
|
isLoggedIn={isLoggedIn}
|
|
globalUrl={globalUrl}
|
|
selectedOrganization={selectedOrganization}
|
|
billingInfo={billingInfo}
|
|
isCloud={isCloud}
|
|
userdata={userdata}
|
|
stripeKey={stripeKey}
|
|
setModalOpen={setModalOpen}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
</Dialog>
|
|
|
|
// Handle top bar or something
|
|
const defaultTop = -2
|
|
const loginTextBrowser = !isLoggedIn ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
minWidth: 1250,
|
|
maxWidth: 1250,
|
|
margin: "auto",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<List style={{ flex: 2, display: "flex", flexDirection: "row", }} component="nav">
|
|
<ListItem
|
|
style={{ textAlign: "center", marginLeft: "0px", paddingRight: 0 }}
|
|
>
|
|
<Link to="/" style={hrefStyle}>
|
|
<Grid
|
|
variant="text"
|
|
color="secondary"
|
|
style={{ textTransform: "none", display: "flex" }}
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "home_click",
|
|
label: "",
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<img
|
|
src={"/images/logos/topleft_logo.svg"}
|
|
alt="shuffle logo"
|
|
style={{ height: 25, }}
|
|
/>
|
|
</Grid>
|
|
</Link>
|
|
</ListItem>
|
|
</List>
|
|
<List className={classes.menuList} component="nav">
|
|
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
|
<Link to="/usecases" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
className={classes.menuButton}
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "usecases_click",
|
|
label: "",
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
Usecases
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{ textAlign: "center", marginLeft: 0, paddingRight: 0 }}>
|
|
<Link rel="noopener noreferrer" to="/docs" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
className={classes.menuButton}
|
|
onClick={() => { }}
|
|
>
|
|
Docs
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem
|
|
style={{ textAlign: "center", marginLeft: "0px", paddingRight: 0 }}
|
|
// onMouseEnter={handleMenuOpen}
|
|
// onMouseLeave={handleMenuClose}
|
|
>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
className={classes.menuButton}
|
|
style={{ width: 200 }}
|
|
onClick={handleMenuOpen}
|
|
>
|
|
Pricing & Services
|
|
<KeyboardArrowDownIcon style={{ marginLeft: 4 }} />
|
|
</Button>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
keepMounted
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleMenuClose}
|
|
className={classes.dropdownMenu}
|
|
classes={{ paper: classes.dropdownMenu }}
|
|
MenuListProps={{ className: classes.cssStcg3yMenuList }}
|
|
>
|
|
{isCloud && (
|
|
<MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/pricing')}>
|
|
<Link to="/pricing" style={hrefStyle}>
|
|
Pricing
|
|
</Link>
|
|
</MenuItem>
|
|
)}
|
|
<div className={classes.divider} />
|
|
<MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/professional-services')}>
|
|
<Link to="/professional-services" style={hrefStyle}>
|
|
Professional Services
|
|
</Link>
|
|
</MenuItem>
|
|
<div className={classes.divider} />
|
|
<MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/training')}>
|
|
<Link to="/training" style={hrefStyle}>
|
|
Training Courses
|
|
</Link>
|
|
</MenuItem>
|
|
<div className={classes.divider} />
|
|
<MenuItem className={classes.dropdownMenuItem} onClick={() => handleMenuItemClick('/partners')}>
|
|
<Link to="/partners" style={hrefStyle}>
|
|
Partner Program
|
|
</Link>
|
|
</MenuItem>
|
|
</Menu>
|
|
</ListItem>
|
|
|
|
|
|
|
|
{/* <ListItem style={{ textAlign: "center", marginLeft: 0, paddingRight: 0 }}>
|
|
<Link rel="noopener noreferrer" to="/training" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
className={classes.menuButton}
|
|
onClick={() => { }}
|
|
>
|
|
Training
|
|
</Button>
|
|
</Link>
|
|
</ListItem> */}
|
|
</List>
|
|
<List
|
|
style={{ flex: 2, display: "flex", alignItems: "flex-start", padding: 0, }}
|
|
component="nav"
|
|
>
|
|
<div style={{ maxWidth: 70, minWidth: 70, }} />
|
|
<span style={{ marginTop: 8, marginRight: 15, }}>
|
|
<SearchField globalUrl={globalUrl} isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} small={true} rounded={true} />
|
|
</span>
|
|
<Link to="/register" style={hrefStyle}>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
style={{
|
|
marginTop: 13,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
padding: "7px 14px 7px 14px",
|
|
borderRadius: 25,
|
|
textTransform: "none",
|
|
backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)",
|
|
color: "white",
|
|
}}
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "register_click",
|
|
label: "",
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
Sign Up
|
|
</Button>
|
|
</Link>
|
|
<Link to="/login" style={hrefStyle}>
|
|
<Button
|
|
style={{
|
|
marginTop: 12,
|
|
textTransform: "none",
|
|
borderRadius: 25,
|
|
color: "white",
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
padding: "7px 14px 7px 14px",
|
|
maxWidth: 100,
|
|
minWidth: 100,
|
|
}}
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "signin_click",
|
|
label: "",
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
|
|
</List>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: "flex" }}>
|
|
<div
|
|
style={{
|
|
minWidth: 1250,
|
|
maxWidth: 1250,
|
|
display: "flex",
|
|
margin: "auto",
|
|
}}
|
|
>
|
|
<div style={{ flexDirection: "row", marginLeft: 0 }}>
|
|
<List
|
|
style={{
|
|
height: 56,
|
|
marginTop: "auto",
|
|
marginBottom: "auto",
|
|
display: "flex",
|
|
flexDirect: "row",
|
|
alignItems: "baseline",
|
|
maxWidth: 340,
|
|
}}
|
|
component="nav"
|
|
>
|
|
<ListItem style={{ textAlign: "center", justifyContent: "center" }}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item style={{}}>
|
|
<img
|
|
src={"/images/logos/orange_logo.svg"}
|
|
alt="logo"
|
|
style={{ height: 20, width: 20, marginTop: 4 }}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/workflows" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
marginLeft: 25,
|
|
}}
|
|
>
|
|
{/*
|
|
<PolylineIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<Typography style={{ marginTop: defaultTop, marginRight: 8 }}>
|
|
Workflows
|
|
</Typography>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/apps" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
{/*
|
|
<AppsIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<Typography style={{ marginTop: defaultTop, marginRight: 5 }}>
|
|
Apps
|
|
</Typography>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
{/*
|
|
<ListItem style={{textAlign: "center"}}>
|
|
<Link to="/dashboard" style={hrefStyle}>
|
|
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
}}
|
|
>
|
|
{/*
|
|
<DescriptionIcon style={{marginRight: "5px"}} />
|
|
*/}
|
|
<Typography style={{ marginTop: defaultTop }}>
|
|
Docs
|
|
</Typography>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
{/*
|
|
<ListItem style={listItemStyle}>
|
|
<Link to="/admin?admin_tab=billing" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
width:170
|
|
}}
|
|
>
|
|
<Typography style={{ marginTop: defaultTop }}>
|
|
Pricing & Services
|
|
</Typography>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
*/}
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
<div style={{ flex: 1, marginTop: 10, }}>
|
|
<SearchField globalUrl={globalUrl} isHeader={true} isLoggedIn={isLoggedIn} isLoaded={isLoaded} serverside={serverside} userdata={userdata} hidemargins={true} />
|
|
</div>
|
|
<div style={{ flex: isLoggedIn ? null : 1, display: "flex", flexDirection: "row-reverse" }}>
|
|
<List
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row-reverse",
|
|
marginRight: 0,
|
|
paddingRight: 0,
|
|
paddingTop: "auto",
|
|
}}
|
|
component="nav"
|
|
>
|
|
<span
|
|
style={{
|
|
display: "flex",
|
|
paddingTop: 5,
|
|
flexDirection: "row-reverse",
|
|
}}
|
|
>
|
|
{avatarMenu}
|
|
{supportMenu}
|
|
{logoCheck}
|
|
</span>
|
|
|
|
{userdata === undefined ||
|
|
userdata.orgs === undefined ||
|
|
userdata.orgs === null ||
|
|
userdata.orgs.length <= 0 ? null : (
|
|
<span style={{ paddingTop: 5 }}>
|
|
<Select
|
|
disableUnderline
|
|
SelectDisplayProps={{
|
|
style: {
|
|
maxWidth: 50,
|
|
overflow: "hidden",
|
|
paddingLeft: 8,
|
|
},
|
|
}}
|
|
MenuProps={{
|
|
style: {
|
|
zIndex: 15000,
|
|
},
|
|
}}
|
|
style={{
|
|
borderRadius: theme.palette?.borderRadius,
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
marginRight: 15,
|
|
color: "white",
|
|
height: 45,
|
|
width: 85,
|
|
}}
|
|
value={userdata.active_org.id}
|
|
fullWidth
|
|
onChange={(e) => {
|
|
if (e.target.value === undefined || e.target.value === "create_new_suborgs") {
|
|
return
|
|
}
|
|
|
|
handleClickChangeOrg(e.target.value);
|
|
}}
|
|
>
|
|
{userdata.orgs.map((data, index) => {
|
|
if (
|
|
data.name === undefined ||
|
|
data.name === null ||
|
|
data.name.length === 0
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
const imagesize = 22;
|
|
var skipOrg = false;
|
|
if (
|
|
data.creator_org !== undefined &&
|
|
data.creator_org !== null &&
|
|
data.creator_org.length > 0
|
|
) {
|
|
// Finds the parent org
|
|
for (var key in userdata.child_orgs) {
|
|
if (data.child_orgs[key].id === data.creator_org) {
|
|
skipOrg = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (skipOrg) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const imageStyle = {
|
|
width: imagesize,
|
|
height: imagesize,
|
|
pointerEvents: "none",
|
|
marginRight: 10,
|
|
marginLeft:
|
|
data.creator_org !== undefined &&
|
|
data.creator_org !== null &&
|
|
data.creator_org.length > 0
|
|
? data.id === userdata.active_org.id
|
|
? 0
|
|
: 20
|
|
: 0,
|
|
};
|
|
|
|
const parsedTitle =
|
|
data.creator_org !== undefined &&
|
|
data.creator_org !== null &&
|
|
data.creator_org.length > 0
|
|
? `Suborg of ${data.creator_org}`
|
|
: "";
|
|
|
|
const image =
|
|
data.image === "" ? (
|
|
<img
|
|
alt={data.name}
|
|
src={theme.palette.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
) : (
|
|
<img
|
|
alt={data.name}
|
|
src={data.image}
|
|
style={imageStyle}
|
|
/>
|
|
)
|
|
|
|
var regiontag = "eu";
|
|
if (
|
|
data.region_url !== undefined &&
|
|
data.region_url !== null &&
|
|
data.region_url.length > 0
|
|
) {
|
|
const regionsplit = data.region_url.split(".");
|
|
if (
|
|
regionsplit.length > 2 &&
|
|
!regionsplit[0].includes("shuffler")
|
|
) {
|
|
const namesplit = regionsplit[0].split("/");
|
|
|
|
regiontag = namesplit[namesplit.length - 1];
|
|
|
|
if (regiontag === "california") {
|
|
regiontag = "us"
|
|
} else if (regiontag === "frankfurt") {
|
|
regiontag = "fr"
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<MenuItem
|
|
key={index}
|
|
disabled={data.id === userdata.active_org.id}
|
|
style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
color: "white",
|
|
height: 40,
|
|
zIndex: 10003,
|
|
}}
|
|
value={data.id}
|
|
>
|
|
<Tooltip
|
|
color="primary"
|
|
title={parsedTitle}
|
|
placement="left"
|
|
>
|
|
<div style={{ display: "flex" }}>
|
|
{isCloud ? (
|
|
<Typography
|
|
variant="body2"
|
|
style={{
|
|
borderRadius: theme.palette?.borderRadius,
|
|
float: "left",
|
|
margin: "0 0 0 0",
|
|
marginRight: 25,
|
|
}}
|
|
>
|
|
{regiontag}
|
|
</Typography>
|
|
) : null}{" "}
|
|
{image}{" "}
|
|
<span style={{ marginLeft: 8 }}>{data.name}</span>
|
|
</div>
|
|
</Tooltip>
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
<Divider />
|
|
<Link to="/admin?tab=tenants" style={hrefStyle}>
|
|
<MenuItem
|
|
key={"add suborgs"}
|
|
style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
color: "white",
|
|
height: 40,
|
|
zIndex: 10003,
|
|
}}
|
|
value={"create_new_suborgs"}
|
|
>
|
|
<Tooltip
|
|
color="primary"
|
|
title={""}
|
|
placement="left"
|
|
>
|
|
<div style={{ display: "flex", marginLeft: 50, marginRight: 50, }}>
|
|
<AddIcon />
|
|
<span style={{ marginLeft: 8 }}>
|
|
Add suborgs
|
|
</span>
|
|
</div>
|
|
</Tooltip>
|
|
</MenuItem>
|
|
</Link>
|
|
</Select>
|
|
</span>
|
|
)}
|
|
|
|
{/* Show on cloud, if not suborg and if not customer/pov/internal */}
|
|
{
|
|
userdata.licensed !== undefined &&
|
|
userdata.licensed !== null &&
|
|
userdata.licensed === false ?
|
|
<ListItem
|
|
style={{
|
|
textAlign: "center",
|
|
marginLeft: 0,
|
|
marginRight: 7,
|
|
marginTop: 0,
|
|
}}
|
|
title={upgradeHovered ? "Upgrade License" : ""}
|
|
open={tooltipOpen}
|
|
onClose={handleTooltipClose}
|
|
>
|
|
<Link style={hrefStyle}>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
style={{ textTransform: "none" }}
|
|
onMouseOver={() => { setUpgradeHovered(true); handleTooltipOpen(); }}
|
|
onMouseOut={() => { setUpgradeHovered(false); handleTooltipClose(); }}
|
|
onClick={() => {
|
|
if (isCloud) {
|
|
ReactGA.event({
|
|
category: "header",
|
|
action: "upgrade_popup_click",
|
|
})
|
|
}
|
|
|
|
setModalOpen(true)
|
|
}}
|
|
>
|
|
{/* {upgradeHovered ?
|
|
"Upgrade License"
|
|
: */}
|
|
Upgrade
|
|
{/* } */}
|
|
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
: null}
|
|
|
|
{userdata === undefined ||
|
|
userdata.app_execution_limit === undefined ||
|
|
userdata.app_execution_usage === undefined ||
|
|
userdata.app_execution_usage < 1000 ? null : (
|
|
<Tooltip
|
|
title={
|
|
<Typography variant="body1" style={{margin: 10, }}>
|
|
<b>App Runs used</b>: {userdata.app_execution_usage} / {userdata.app_execution_limit}. When the limit is reached, you can still use Shuffle normally, but your Workflow triggers will stop workflows from starting. Reach out to support@shuffler.io to extend this limit. Customer workflows are NOT stopped this way.
|
|
</Typography>
|
|
}
|
|
>
|
|
<div
|
|
style={{
|
|
maxHeight: 30,
|
|
minHeight: 30,
|
|
padding: 8,
|
|
textAlign: "center",
|
|
cursor: "pointer",
|
|
borderRadius: theme.palette?.borderRadius,
|
|
marginTop: 5,
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
minWidth: 60,
|
|
maxWidth: 60,
|
|
border:
|
|
userdata.app_execution_usage /
|
|
userdata.app_execution_limit >=
|
|
0.9
|
|
? "2px solid #f86a3e"
|
|
: null,
|
|
}}
|
|
onClick={() => {
|
|
console.log(
|
|
userdata.appe_execution_usage /
|
|
userdata.app_execution_limit
|
|
);
|
|
if (window.drift !== undefined) {
|
|
window.drift.api.startInteraction({
|
|
interactionId: 326905,
|
|
});
|
|
navigate("/pricing");
|
|
} else {
|
|
console.log(
|
|
"Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ",
|
|
window.drift
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="body2"
|
|
color="textSecondary"
|
|
style={{ fontSize: 12, color: "#f86a3e" }}
|
|
>
|
|
<b>
|
|
{(
|
|
(userdata.app_execution_usage /
|
|
userdata.app_execution_limit) *
|
|
100
|
|
).toFixed(0)}
|
|
%
|
|
</b>
|
|
</Typography>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
style={{ marginTop: 5 }}
|
|
value={(
|
|
(userdata.app_execution_usage /
|
|
userdata.app_execution_limit) *
|
|
100
|
|
).toFixed(0)}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
)}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const loginTextMobile = !isLoggedIn ? (
|
|
<div style={{ display: "flex" }}>
|
|
<List style={{ display: "flex", flexDirection: "row" }} component="nav">
|
|
<ListItem style={{ textAlign: "center" }}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<img
|
|
src={"/images/logos/orange_logo.svg"}
|
|
alt="logo"
|
|
style={{
|
|
height: 20,
|
|
width: 20,
|
|
marginTop: 3,
|
|
marginRight: 5,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{ textAlign: "center" }}>
|
|
<Link to="/docs" style={hrefStyle}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
About
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
|
<Link to="/contact" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
style={{ textTransform: "none" }}
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem
|
|
style={{ textAlign: "center", marginLeft: "0px", paddingLeft: 0 }}
|
|
>
|
|
<Link to="/pricing" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
style={{ textTransform: "none" }}
|
|
>
|
|
Pricing
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: "flex" }}>
|
|
<div style={{ flex: "1", flexDirection: "row" }}>
|
|
<List
|
|
style={{ display: "flex", flexDirect: "row", flex: "1" }}
|
|
component="nav"
|
|
>
|
|
<ListItem style={{ textAlign: "center" }}>
|
|
<Link to="/" style={hrefStyle}>
|
|
<div
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<HomeIcon
|
|
style={{ marginTop: "3px", marginRight: "5px" }}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
|
<Link to="/contact" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
style={{ textTransform: "none" }}
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
|
<Link to="/pricing" style={hrefStyle}>
|
|
<Button
|
|
variant="text"
|
|
color="secondary"
|
|
style={{ textTransform: "none" }}
|
|
>
|
|
Pricing
|
|
</Button>
|
|
</Link>
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
<div
|
|
style={{ flex: "10", display: "flex", flexDirection: "row-reverse" }}
|
|
>
|
|
<List
|
|
style={{ display: "flex", flexDirection: "row-reverse" }}
|
|
component="nav"
|
|
>
|
|
<ListItem style={{ flex: "1", textAlign: "center" }}>
|
|
<div
|
|
onMouseOver={handleHover}
|
|
onMouseOut={handleHoverOut}
|
|
onClick={handleClickLogout}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
Logout
|
|
</div>
|
|
</ListItem>
|
|
{logoCheck}
|
|
<ListItem></ListItem>
|
|
</List>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// <Divider style={{height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
|
//
|
|
/*
|
|
!isLoggedIn ?
|
|
<div style={{minHeight: 68, maxHeight: 68, backgroundColor: theme.palette.backgroundColor, }}>
|
|
<BrowserView style={{position: "sticky", top: 0, }}>
|
|
{loginTextBrowser}
|
|
</BrowserView>
|
|
</div>
|
|
:
|
|
*/
|
|
|
|
const topbarHeight = showTopbar ? 40 : 0
|
|
const topbar = !isCloud || !showTopbar ? null :
|
|
curpath === "/" || curpath.includes("/docs") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" || curpath === "/usecases" || curpath === "/usecases2" || curpath === "/training" || curpath === "/professional-services" ?
|
|
<span style={{ zIndex: 50001, }}>
|
|
<div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
|
|
<Typography style={{ paddingTop: 7, fontSize:16, margin: "auto", textAlign: "center", color: "white", }}>
|
|
{/* Shuffle 1.4.0 is out! Read more about */}
|
|
New
|
|
<u>
|
|
<span onClick={() => {
|
|
ReactGA.event({
|
|
category: "landingpage",
|
|
action: "click_header_training",
|
|
label: "",
|
|
})
|
|
|
|
navigate("/training")
|
|
|
|
}} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>
|
|
Public Training
|
|
</span>
|
|
</u>
|
|
Dates Released!
|
|
</Typography>
|
|
<IconButton color="secondary" style={{ position: "absolute", top: -3, right: 20, }} onClick={(event) => {
|
|
setShowTopbar(false)
|
|
|
|
// Set storage that it's clicked
|
|
localStorage.setItem(topbar_var, "true")
|
|
}}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</div>
|
|
</span>
|
|
:
|
|
null
|
|
|
|
return !isMobile ? (
|
|
<div style={{ marginTop: 0 }}>
|
|
<AppBar
|
|
color="transparent"
|
|
elevation={0}
|
|
style={{
|
|
boxShadow: "none",
|
|
minHeight: 68,
|
|
maxHeight: 68,
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
}}
|
|
>
|
|
{topbar}
|
|
<div
|
|
style={{
|
|
position: "sticky",
|
|
top: 0,
|
|
minHeight: 68,
|
|
maxHeight: 68,
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
}}
|
|
>
|
|
{loginTextBrowser}
|
|
</div>
|
|
{modalView}
|
|
</AppBar>
|
|
</div>
|
|
) : (
|
|
<MobileView>{loginTextMobile}</MobileView>
|
|
);
|
|
};
|
|
|
|
export default Header;
|