sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new pages

Browse source
This commit is contained in:
Darren Clarke 2022-12-02 17:45:14 +01:00
parent 95a21d6f50
commit 2b9672fedf
No known key found for this signature in database
GPG key ID: E2483E6F82907488
11 changed files with 432 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

134
components/Sidebar.tsx
View file

@ -8,39 +8,57 @@ import {
ListItemIcon,
ListItemText,
Drawer,
Accordion,
AccordionSummary,
AccordionDetails,
} from "@mui/material";
import {
FeaturedPlayList as FeaturedPlayListIcon,
Person as PersonIcon,
Analytics as AnalyticsIcon,
Logout as LogoutIcon,
Cottage as CottageIcon,
Settings as SettingsIcon,
} from "@mui/icons-material";
import Link from "next/link";
const MenuItem = ({ name, href, iconSize }: any) => (
const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
<Link href={href} passHref>
<ListItem button>
<ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
<ListItemIcon
sx={{
color: `black !important`,
color: `white`,
}}
>
<Box
sx={{
width: iconSize,
height: iconSize,
ml: `${(20 - iconSize) / 2}px`,
mr: `${(20 - iconSize) / 2}px`,
mr: 0.5,
}}
>
{/* <Image src={icon} alt="" /> */}
{iconSize > 0 && <Icon />}
</Box>
<ListItemText
primary={
<Typography
variant="body1"
style={{
color: "#000 !important",
sx={{
color: "#fff !important",
fontSize: 14,
fontFamily: "Roboto",
fontWeight: 400,
marginLeft: 10,
marginTop: -3,
marginLeft: "12px",
marginTop: "-1px",
textDecoration: "none !important",
">a": {
textDecoration: "none !important",
},
"a:visited": {
textDecoration: "none !important",
},
border: 0,
}}
>
{name}
@ -58,7 +76,7 @@ interface SidebarProps {
export const Sidebar: FC<SidebarProps> = ({ open }) => (
<Drawer
sx={{ width: 300, flexShrink: 0, backgroundColor: "black !important" }}
sx={{ width: 300, flexShrink: 0 }}
variant="permanent"
anchor="left"
open={open}
@ -66,8 +84,6 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => (
sx: {
width: 300,
border: 0,
backgroundColor: "black !important",
},
}}
>
@ -76,15 +92,95 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => (
direction="column"
justifyContent="space-between"
wrap="nowrap"
sx={{ backgroundColor: "black", height: "100%" }}
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
>
<Grid item>
<Typography variant="h6" sx={{ fontSize: 12, color: "white" }}>
Hello
</Typography>
</Grid>
<Grid item>
<Typography variant="h2" sx={{ fontSize: 22, color: "white", mb: 1.5 }}>
Agent/User
</Typography>
</Grid>
<Grid item>
<Box sx={{ height: 1.5, width: "100%", backgroundColor: "white" }} />
</Grid>
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
<List component="nav">
<MenuItem name="" href="/" iconSize={20} />
<MenuItem name="" href="/create" iconSize={20} />
<MenuItem name="" href="/trends" iconSize={13} />
<MenuItem name="" href="/faq" iconSize={20} />
<MenuItem name="" href="/about" iconSize={20} />
<MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
<Accordion
sx={{
backgroundColor: "#25272A",
border: 0,
m: 0,
p: 0,
boxShadow: "none",
mt: -1,
mb: -1,
}}
>
<AccordionSummary sx={{ p: 0, m: 0 }}>
<MenuItem
name="My tickets"
href="/assigned"
Icon={FeaturedPlayListIcon}
iconSize={20}
/>
</AccordionSummary>
<AccordionDetails sx={{ p: 0, mt: -2, ml: "20px" }}>
<MenuItem
name="Assigned"
href="/assigned"
Icon={FeaturedPlayListIcon}
iconSize={0}
/>
<MenuItem
name="Urgent"
href="/urgent"
Icon={FeaturedPlayListIcon}
iconSize={0}
/>
<MenuItem
name="Pending"
href="/pending"
Icon={FeaturedPlayListIcon}
iconSize={0}
/>
<MenuItem
name="Unassigned"
href="/unassigned"
Icon={FeaturedPlayListIcon}
iconSize={0}
/>
</AccordionDetails>
</Accordion>
<MenuItem
name="Leafcutter"
href="/leafcutter"
Icon={AnalyticsIcon}
iconSize={20}
/>
<MenuItem
name="Profile"
href="/profile"
Icon={PersonIcon}
iconSize={20}
/>
<MenuItem
name="Settings"
href="/settings"
Icon={SettingsIcon}
iconSize={20}
/>
<MenuItem
name="Logout"
href="/logout"
Icon={LogoutIcon}
iconSize={20}
/>
</List>
</Grid>
</Grid>

43
components/ZammadWrapper.tsx Normal file
View file

@ -0,0 +1,43 @@
import { FC, useState } from "react";
import Iframe from "react-iframe";
type ZammadWrapperProps = {
url: string;
hideSidebar?: boolean;
};
export const ZammadWrapper: FC<ZammadWrapperProps> = ({
url,
hideSidebar = true,
}) => {
const [display, setDisplay] = useState("none");
return (
<Iframe
id="link"
url={url}
width="100%"
height="100%"
frameBorder={0}
styles={{ display }}
onLoad={() => {
const linkElement = document.querySelector("iframe");
if (
linkElement.contentDocument &&
linkElement.contentDocument?.querySelector
) {
// @ts-ignore
linkElement.contentDocument.querySelector("#navigation").style =
"display: none";
if (hideSidebar) {
// @ts-ignore
linkElement.contentDocument.querySelector(".sidebar").style =
"display: none";
}
setDisplay("inherit");
}
}}
/>
);
};