@mui/material#AppBar JavaScript Examples
The following examples show how to use
@mui/material#AppBar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: DashboardNavbar.js From Django-REST-Framework-React-BoilerPlate with MIT License | 6 votes |
|
RootStyle = styled(AppBar)(({ theme }) => ({
boxShadow: 'none',
backdropFilter: 'blur(6px)',
WebkitBackdropFilter: 'blur(6px)', // Fix on Mobile
backgroundColor: alpha(theme.palette.background.default, 0.72),
[theme.breakpoints.up('lg')]: {
width: `calc(100% - ${DRAWER_WIDTH + 1}px)`,
},
}))
Example #2
| Source File: Footer.jsx From matx-react with MIT License | 6 votes |
|
Footer = () => {
const theme = useTheme();
const { settings } = useSettings();
const footerTheme = settings.themes[settings.footer.theme] || theme;
return (
<ThemeProvider theme={footerTheme}>
<AppBar color="primary" position="static" sx={{ zIndex: 96 }}>
<AppFooter>
<FooterContent>
<a href="https://ui-lib.com/downloads/matx-pro-react-admin/">
<Button variant="contained" color="secondary">
Get MatX Pro
</Button>
</a>
<Span sx={{ m: 'auto' }}></Span>
<Paragraph sx={{ m: 0 }}>
Design and Developed by <a href="http://ui-lib.com">UI Lib</a>
</Paragraph>
</FooterContent>
</AppFooter>
</AppBar>
</ThemeProvider>
);
}
Example #3
| Source File: MessagePopperButton.js From react-saas-template with MIT License | 5 votes |
|
function MessagePopperButton(props) {
const { classes, messages } = props;
const anchorEl = useRef();
const [isOpen, setIsOpen] = useState(false);
const handleClick = useCallback(() => {
setIsOpen(!isOpen);
}, [isOpen, setIsOpen]);
const handleClickAway = useCallback(() => {
setIsOpen(false);
}, [setIsOpen]);
const id = isOpen ? "scroll-playground" : null;
return (
<Fragment>
<IconButton
onClick={handleClick}
buttonRef={anchorEl}
aria-label="Open Messages"
aria-describedby={id}
color="primary"
size="large">
<MessageIcon />
</IconButton>
<Popover
disableScrollLock
id={id}
open={isOpen}
anchorEl={anchorEl.current}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
classes={{ paper: classes.popoverPaper }}
onClose={handleClickAway}
>
<AppBar position="static" color="inherit" className={classes.noShadow}>
<Box pt={1} pl={2} pb={1} pr={1}>
<Typography variant="subtitle1">Messages</Typography>
</Box>
<Divider className={classes.divider} />
</AppBar>
<List dense className={classes.tabContainer}>
{messages.length === 0 ? (
<ListItem>
<ListItemText>
You haven't received any messages yet.
</ListItemText>
</ListItem>
) : (
messages.map((element, index) => (
<MessageListItem
key={index}
message={element}
divider={index !== messages.length - 1}
/>
))
)}
</List>
</Popover>
</Fragment>
);
}
Example #4
| Source File: CompareModal.jsx From hr-atx58-fec-havarti with Mozilla Public License 2.0 | 4 votes |
|
export default function ModalPopup({
onClose,
open,
compareFeatures,
relatedProductFeatures,
overviewProductFeatures,
relatedProductName,
}) {
//useContext
const { clickTracker, overviewProduct } = useContext(ProductsContext);
const [clickTrackerFunc] = clickTracker;
const [overviewProductState, setOverviewProductState] = overviewProduct;
const handleClose = () => {
onClose();
};
let uniqueFeatures = [...new Set(compareFeatures)];
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
onClick={() =>
clickTrackerFunc.clickTrackerFunc("Comparison Modal", event.target)
}
>
<AppBar position="static">
<Toolbar variant="dense">
<IconButton
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<CompareArrowsIcon />
</IconButton>
<Typography variant="h6" color="inherit" component="div">
Compare Items
</Typography>
</Toolbar>
</AppBar>
<Grid
container
direction="column"
justifyContent="space-evenly"
alignItems="stretch"
>
<Grid item xs={12}>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs={4}>
<DialogTitle>Overview Product</DialogTitle>
</Grid>
<Grid item xs={4}></Grid>
<Grid item xs={4}>
<DialogTitle>Selected Product</DialogTitle>
</Grid>
</Grid>
</Grid>
{uniqueFeatures.map((feature, index) => (
<Grid item xs={12} key={index}>
<Grid spacing={2} container direction="row" alignItems="center">
<Grid item xs={4}>
{overviewProductFeatures[feature] ? (
<Typography variant="h6" color="inherit" component="p">
{overviewProductFeatures[feature]}
</Typography>
) : (
""
)}
</Grid>
<Grid item xs={4}>
<Typography variant="h6" color="inherit" component="p">
{feature}
</Typography>
</Grid>
<Grid item xs={4}>
{relatedProductFeatures[feature] ? (
<Typography variant="h6" color="inherit" component="p">
{relatedProductFeatures[feature]}
</Typography>
) : (
""
)}
</Grid>
</Grid>
</Grid>
))}
</Grid>
</Dialog>
);
}
Example #5
| Source File: index.jsx From Edlib with GNU General Public License v3.0 | 4 votes |
|
ContentExplorerHeader = ({ onClose, getUrl }) => {
const { t } = useTranslation();
const { classes } = useStyles();
const location = useLocation();
const history = useHistory();
const { enableDoku, inMaintenanceMode } = useConfigurationContext();
const { getUserConfig } = useEdlibComponentsContext();
const isActive = (path) => {
let paths = [path];
if (Array.isArray(path)) {
paths = [...path];
}
return paths.some((path) =>
matchPath(location.pathname, {
path,
exact: false,
})
);
};
const enabledTypes =
getUserConfig('enabledResourceTypes') || Object.values(resourceEditors);
const isEditorEnabled = (type) => enabledTypes.indexOf(type) !== -1;
const editorMapping = {
[resourceEditors.H5P]: {
link: getUrl('/resources/new/contentauthor?group=h5p'),
label: t('Interaktivitet'),
},
[resourceEditors.QUESTION_SET]: {
link: getUrl('/resources/new/contentauthor?group=questionset'),
label: t('Spørsmål'),
},
// [resourceEditors.ARTICLE]: {
// link: getUrl('/resources/new/contentauthor?group=article'),
// label: t('Tekst'),
// },
// [resourceEditors.EMBED]: {
// link: '/resources/new/url',
// label: 'Link',
// },
[resourceEditors.DOKU]: {
link: getUrl('/resources/new/doku'),
label: 'EdStep',
},
};
const activatedEditorsList = Object.entries(editorMapping)
.filter(([type]) => isEditorEnabled(type))
.filter(([type]) => {
switch (type) {
case resourceEditors.DOKU:
return enableDoku;
default:
return true;
}
});
//******************************************************************************
//************ New Component ***************************************************
//******************************************************************************
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const buttonClasses = (active) =>
cn(classes.headerButton, {
[classes.selectedButton]: active,
});
return (
<AppBar position="static" className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<div>
<img
className={classes.logo}
src={logoUrl}
alt="edlib logo"
/>
</div>
{!inMaintenanceMode && (
<div className={classes.links}>
{activatedEditorsList.length > 1 && (
<div>
<Button
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
startIcon={<AddCircleRounded />}
sx={{
color: isActive([
getUrl('/resources/new'),
getUrl('/link-author'),
getUrl('/doku-author'),
])
? 'secondary.main'
: 'default',
}}
className={classes.headerButton}
>
{t('Opprett innhold')}
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
keepMounted
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={open}
onClose={handleClose}
>
{activatedEditorsList.map(
([type, { link, label }]) => (
<MenuItem
onClick={() => {
history.push(link);
handleClose();
}}
key={type}
>
{label}
</MenuItem>
)
)}
</Menu>
</div>
)}
{activatedEditorsList.length === 1 && (
<div>
<Button
onClick={() => {
history.push(
activatedEditorsList[0][1].link
);
handleClose();
}}
color="inherit"
startIcon={<AddCircleRounded />}
sx={{
color: isActive(
activatedEditorsList[0][1].link
)
? 'secondary.main'
: 'default',
}}
className={classes.headerButton}
>
{t('Opprett innhold')}
</Button>
</div>
)}
<div>
<Button
onClick={() => {
history.push(getUrl('/shared-content'));
handleClose();
}}
color="inherit"
startIcon={<ShoppingCart />}
sx={{
color: isActive(getUrl('/shared-content'))
? 'secondary.main'
: 'default',
}}
className={classes.headerButton}
>
{t('Delt innhold')}
</Button>
</div>
<div>
<Button
onClick={() => {
history.push(getUrl('/my-content'));
handleClose();
}}
color="inherit"
startIcon={<Home />}
sx={{
color: isActive(getUrl('/my-content'))
? 'secondary.main'
: 'default',
}}
className={classes.headerButton}
>
{t('Mitt innhold')}
</Button>
</div>
</div>
)}
{onClose ? (
<div className={classes.close}>
<Close onClick={onClose} />
</div>
) : (
<div> </div>
)}
</Toolbar>
</AppBar>
);
}
Example #6
| Source File: NavBar.js From react-saas-template with MIT License | 4 votes |
|
function NavBar(props) {
const { selectedTab, messages, classes, openAddBalanceDialog, theme } = props;
// Will be use to make website more accessible by screen readers
const links = useRef([]);
const [isMobileOpen, setIsMobileOpen] = useState(false);
const [isSideDrawerOpen, setIsSideDrawerOpen] = useState(false);
const isWidthUpSm = useMediaQuery(theme.breakpoints.up("sm"));
const openMobileDrawer = useCallback(() => {
setIsMobileOpen(true);
}, [setIsMobileOpen]);
const closeMobileDrawer = useCallback(() => {
setIsMobileOpen(false);
}, [setIsMobileOpen]);
const openDrawer = useCallback(() => {
setIsSideDrawerOpen(true);
}, [setIsSideDrawerOpen]);
const closeDrawer = useCallback(() => {
setIsSideDrawerOpen(false);
}, [setIsSideDrawerOpen]);
const menuItems = [
{
link: "/c/dashboard",
name: "Dashboard",
onClick: closeMobileDrawer,
icon: {
desktop: (
<DashboardIcon
className={
selectedTab === "Dashboard" ? classes.textPrimary : "text-white"
}
fontSize="small"
/>
),
mobile: <DashboardIcon className="text-white" />,
},
},
{
link: "/c/posts",
name: "Posts",
onClick: closeMobileDrawer,
icon: {
desktop: (
<ImageIcon
className={
selectedTab === "Posts" ? classes.textPrimary : "text-white"
}
fontSize="small"
/>
),
mobile: <ImageIcon className="text-white" />,
},
},
{
link: "/c/subscription",
name: "Subscription",
onClick: closeMobileDrawer,
icon: {
desktop: (
<AccountBalanceIcon
className={
selectedTab === "Subscription"
? classes.textPrimary
: "text-white"
}
fontSize="small"
/>
),
mobile: <AccountBalanceIcon className="text-white" />,
},
},
{
link: "/",
name: "Logout",
icon: {
desktop: (
<PowerSettingsNewIcon className="text-white" fontSize="small" />
),
mobile: <PowerSettingsNewIcon className="text-white" />,
},
},
];
return (
<Fragment>
<AppBar position="sticky" className={classes.appBar}>
<Toolbar className={classes.appBarToolbar}>
<Box display="flex" alignItems="center">
<Hidden smUp>
<Box mr={1}>
<IconButton
aria-label="Open Navigation"
onClick={openMobileDrawer}
color="primary"
size="large"
>
<MenuIcon />
</IconButton>
</Box>
</Hidden>
<Hidden smDown>
<Typography
variant="h4"
className={classes.brandText}
display="inline"
color="primary"
>
Wa
</Typography>
<Typography
variant="h4"
className={classes.brandText}
display="inline"
color="secondary"
>
Ver
</Typography>
</Hidden>
</Box>
<Box
display="flex"
justifyContent="flex-end"
alignItems="center"
width="100%"
>
{isWidthUpSm && (
<Box mr={3}>
<Balance
balance={2573}
openAddBalanceDialog={openAddBalanceDialog}
/>
</Box>
)}
<MessagePopperButton messages={messages} />
<ListItem
disableGutters
className={classNames(classes.iconListItem, classes.smBordered)}
>
<Avatar
alt="profile picture"
src={`${process.env.PUBLIC_URL}/images/logged_in/profilePicture.jpg`}
className={classNames(classes.accountAvatar)}
/>
{isWidthUpSm && (
<ListItemText
className={classes.username}
primary={
<Typography color="textPrimary">Username</Typography>
}
/>
)}
</ListItem>
</Box>
<IconButton
onClick={openDrawer}
color="primary"
aria-label="Open Sidedrawer"
size="large"
>
<SupervisorAccountIcon />
</IconButton>
<SideDrawer open={isSideDrawerOpen} onClose={closeDrawer} />
</Toolbar>
</AppBar>
<Hidden smDown>
<Drawer // both drawers can be combined into one for performance
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
open={false}
>
<List>
{menuItems.map((element, index) => (
<Link
to={element.link}
className={classes.menuLink}
onClick={element.onClick}
key={index}
ref={(node) => {
links.current[index] = node;
}}
>
<Tooltip
title={element.name}
placement="right"
key={element.name}
>
<ListItem
selected={selectedTab === element.name}
button
divider={index !== menuItems.length - 1}
className={classes.permanentDrawerListItem}
onClick={() => {
links.current[index].click();
}}
aria-label={
element.name === "Logout"
? "Logout"
: `Go to ${element.name}`
}
>
<ListItemIcon className={classes.justifyCenter}>
{element.icon.desktop}
</ListItemIcon>
</ListItem>
</Tooltip>
</Link>
))}
</List>
</Drawer>
</Hidden>
<NavigationDrawer
menuItems={menuItems.map((element) => ({
link: element.link,
name: element.name,
icon: element.icon.mobile,
onClick: element.onClick,
}))}
anchor="left"
open={isMobileOpen}
selectedItem={selectedTab}
onClose={closeMobileDrawer}
/>
</Fragment>
);
}
Example #7
| Source File: NavBar.js From react-saas-template with MIT License | 4 votes |
|
function NavBar(props) {
const {
classes,
openRegisterDialog,
openLoginDialog,
handleMobileDrawerOpen,
handleMobileDrawerClose,
mobileDrawerOpen,
selectedTab
} = props;
const menuItems = [
{
link: "/",
name: "Home",
icon: <HomeIcon className="text-white" />
},
{
link: "/blog",
name: "Blog",
icon: <BookIcon className="text-white" />
},
{
name: "Register",
onClick: openRegisterDialog,
icon: <HowToRegIcon className="text-white" />
},
{
name: "Login",
onClick: openLoginDialog,
icon: <LockOpenIcon className="text-white" />
}
];
return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<div>
<Typography
variant="h4"
className={classes.brandText}
display="inline"
color="primary"
>
Wa
</Typography>
<Typography
variant="h4"
className={classes.brandText}
display="inline"
color="secondary"
>
Ver
</Typography>
</div>
<div>
<Hidden mdUp>
<IconButton
className={classes.menuButton}
onClick={handleMobileDrawerOpen}
aria-label="Open Navigation"
size="large">
<MenuIcon color="primary" />
</IconButton>
</Hidden>
<Hidden mdDown>
{menuItems.map(element => {
if (element.link) {
return (
<Link
key={element.name}
to={element.link}
className={classes.noDecoration}
onClick={handleMobileDrawerClose}
>
<Button
color="secondary"
size="large"
classes={{ text: classes.menuButtonText }}
>
{element.name}
</Button>
</Link>
);
}
return (
<Button
color="secondary"
size="large"
onClick={element.onClick}
classes={{ text: classes.menuButtonText }}
key={element.name}
>
{element.name}
</Button>
);
})}
</Hidden>
</div>
</Toolbar>
</AppBar>
<NavigationDrawer
menuItems={menuItems}
anchor="right"
open={mobileDrawerOpen}
selectedItem={selectedTab}
onClose={handleMobileDrawerClose}
/>
</div>
);
}
Example #8
| Source File: TopBar.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, profile, title, onAdd, fetching, settings, license } = this.props;
const { menuAnchorEl } = this.state;
const licenseVisible = this.context.includes(SYSTEM_ADMIN_WRITE);
return (
<AppBar position="fixed" className={classes.root}>
<Toolbar className={classes.root}>
<Hidden lgUp>
<IconButton color="inherit" onClick={this.handleMenuToggle} size="large">
<Burger />
</IconButton>
</Hidden>
{this.links.map((link, idx) =>
<Tooltip
placement="bottom"
title={t(link.title) + (!config[link.key] ? ` (${t("Not configured")})` : '')} key={idx}
>
<span>
<IconButton
href={config[link.key]}
disabled={!config[link.key]}
target="_blank"
className={classes.iconButton}
size="large">
<link.icon />
</IconButton>
</span>
</Tooltip>
)}
{title && <Typography className={classes.title} variant="h6">{title}</Typography>}
<div className={classes.flexEndContainer}>
<Box className={classes.profileButton} onClick={this.handleMenuOpen('menuAnchorEl')}>
<Typography className={classes.username}>{profile.Profile.user.username}</Typography>
<AccountCircleIcon className={classes.profileIcon}></AccountCircleIcon>
</Box>
{licenseVisible && <LicenseIcon
activated={license.product && license.product !== "Community"}
handleNavigation={this.handleNavigation}
/>}
<img
src={settings.language === 'en-US' ? german : english}
alt=""
width={35}
height={44}
className={classes.flag}
onClick={this.handleLangChange}
/>
<Menu
id="simple-menu"
anchorEl={menuAnchorEl}
keepMounted
open={Boolean(menuAnchorEl)}
onClose={this.handleMenuClose('menuAnchorEl')}
>
<MenuItem onClick={this.handleNavigation('settings')}>
{t('Settings')}
</MenuItem>
<MenuItem onClick={this.handleNavigation('changePassword')}>
{t('Change password')}
</MenuItem>
<MenuItem onClick={this.handleLogout}>
{t('Logout')}
</MenuItem>
</Menu>
</div>
{onAdd && <div className={classes.divider}></div>}
{onAdd && <Button onClick={onAdd} color="inherit" className={classes.add}>
<Add />{t('Add')}
</Button>}
</Toolbar>
<Fade
in={fetching}
style={{
transitionDelay: '500ms',
}}
>
<LinearProgress variant="indeterminate" color="primary"/>
</Fade>
</AppBar>
);
}
Example #9
| Source File: index.js From mui-image with ISC License | 3 votes |
|
export default function Demo() {
const [currentPhoto, setCurrentPhoto] = React.useState(DEFAULT_IMAGE);
const [showPhoto, setShowPhoto] = React.useState(true);
const [showLoading, setShowLoading] = React.useState(SHOW_LOADING);
const [errorIcon, setErrorIcon] = React.useState(ERROR_ICON);
const [height, setHeight] = React.useState(HEIGHT);
const [width, setWidth] = React.useState(WIDTH);
const [shift, setShift] = React.useState(SHIFT);
const [distance, setDistance] = React.useState(DISTANCE);
const [shiftDuration, setShiftDuration] = React.useState(SHIFT_DURATION);
const [duration, setDuration] = React.useState(DURATION);
const [easing, setEasing] = React.useState(EASING);
const [fit, setFit] = React.useState(FIT);
const [bgColor, setBgColor] = React.useState(BG_COLOR);
function getNewPhoto() {
if (mobileOpen) setMobileOpen(false);
const newPhoto = Math.floor(Math.random() * 1051);
setShowPhoto(false);
setCurrentPhoto(newPhoto);
setTimeout(() => {
setShowPhoto(true);
}, 100);
}
function refreshPhoto() {
if (mobileOpen) setMobileOpen(false);
setShowPhoto(false);
setTimeout(() => {
setShowPhoto(true);
}, 100);
}
function resetDefaults() {
setShowLoading(SHOW_LOADING);
setErrorIcon(ERROR_ICON);
setHeight(HEIGHT);
setWidth(WIDTH);
setShift(SHIFT);
setDistance(DISTANCE);
setShiftDuration(SHIFT_DURATION);
setDuration(DURATION);
setEasing(EASING);
setFit(FIT);
setBgColor(BG_COLOR);
}
const [mobileOpen, setMobileOpen] = React.useState(false);
const mobile = useMediaQuery('@media (max-width: 900px)');
function handleDrawerToggle() {
setMobileOpen(!mobileOpen);
}
return (
<Box sx={{ display: 'flex', height: '100vh' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { md: 'none' } }}
>
{mobileOpen ? <CodeOffIcon /> : <CodeIcon />}
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', md: 'inline-block' } }}
>
<TypeIt
getBeforeInit={(instance) => {
instance
.pause(3500)
.type('npm install mui-image')
.pause(1500)
.delete()
.type("import Image from 'mui-image'");
return instance;
}}
options={{ speed: 120, cursor: false }}
/>
</Typography>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'inline-block', md: 'none' } }}
>
mui-image
</Typography>
<Box display="flex">
<IconButton
onClick={() =>
window.open('https://yarnpkg.com/package/mui-image')
}
color="inherit"
>
<YarnIcon
viewBox="0 0 256 256"
fontSize="large"
color="inherit"
/>
</IconButton>
<IconButton
onClick={() => window.open('https://npmjs.com/package/mui-image')}
color="inherit"
>
<NpmIcon fontSize="large" color="inherit" />
</IconButton>
<IconButton
onClick={() =>
window.open('https://github.com/benmneb/mui-image')
}
color="inherit"
>
<GitHubIcon fontSize="large" color="inherit" />
</IconButton>
</Box>
</Toolbar>
</AppBar>
<Drawer
variant={mobile ? 'temporary' : 'permanent'}
open={mobile ? mobileOpen : true}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true,
}}
sx={{
width: DRAWER_WIDTH,
maxWidth: '100vw',
flexShrink: 0,
'& .MuiDrawer-paper': {
width: DRAWER_WIDTH,
maxWidth: '100vw',
boxSizing: 'border-box',
},
}}
>
<Toolbar />
<Stack
spacing={2}
component="section"
padding={2}
sx={{ minWidth: '100%' }}
>
<Box component="div" variant="h6">
{'<Image'}
</Box>
<Stack spacing={1} sx={{ pl: 2 }}>
<Line component="div">
src="https://picsum.photos/id/{currentPhoto}/2000"
</Line>
<Tooltip title="Any valid CSS `height` property" placement="right">
<Line component="div">
height="
<TextField
variant="standard"
value={height}
onChange={(e) => setHeight(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip title="Any valid CSS `width` property" placement="right">
<Line component="div">
width="
<TextField
variant="standard"
value={width}
onChange={(e) => setWidth(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip
title="Any valid CSS `object-fit` property"
placement="right"
>
<Line component="div">
fit=
<Select
variant="standard"
value={fit}
onChange={(e) => setFit(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value="fill">"fill"</MenuItem>
<MenuItem value="contain">"contain"</MenuItem>
<MenuItem value="cover">"cover"</MenuItem>
<MenuItem value="none">"none"</MenuItem>
<MenuItem value="scale-down">"scale-down"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Number of milliseconds the image takes to transition in"
placement="right"
>
<Line component="div">
duration={'{'}
<TextField
variant="standard"
value={duration}
onChange={(e) => setDuration(e.target.value)}
/>
{'}'}
</Line>
</Tooltip>
<Tooltip
title="Any valid CSS `transition-timing-function` property"
placement="right"
>
<Line component="div">
easing=
<Select
variant="standard"
value={easing}
onChange={(e) => setEasing(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value="cubic-bezier(0.7, 0, 0.6, 1)">
"cubic-bezier(0.7, 0, 0.6, 1)"
</MenuItem>
<MenuItem value="ease">"ease"</MenuItem>
<MenuItem value="ease-in">"ease-in"</MenuItem>
<MenuItem value="ease-out">"ease-out"</MenuItem>
<MenuItem value="ease-in-out">"ease-in-out"</MenuItem>
<MenuItem value="linear">"linear"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Once installed you can add a custom loading indicator"
placement="right"
>
<Line component="div">
showLoading=
<FormControlLabel
sx={{ ml: 0 }}
control={
<Switch
checked={showLoading}
onChange={(e) => setShowLoading(e.target.checked)}
/>
}
label={`{ ${showLoading} }`}
labelPlacement="start"
/>
</Line>
</Tooltip>
<Tooltip
title="Once installed you can add a custom error icon"
placement="right"
>
<Line component="div">
errorIcon=
<FormControlLabel
sx={{ ml: 0 }}
control={
<Switch
checked={errorIcon}
onChange={(e) => setErrorIcon(e.target.checked)}
/>
}
label={`{ ${errorIcon} }`}
labelPlacement="start"
/>
</Line>
</Tooltip>
<Tooltip
title="Direction to shift image as it appears"
placement="right"
>
<Line component="div">
shift=
<Select
variant="standard"
value={shift || 'null'}
onChange={(e) => setShift(e.target.value)}
sx={{ minWidth: 100 }}
>
<MenuItem value={'null'}>{'{ null }'}</MenuItem>
<MenuItem value="top">"top"</MenuItem>
<MenuItem value="right">"right"</MenuItem>
<MenuItem value="bottom">"bottom"</MenuItem>
<MenuItem value="left">"left"</MenuItem>
</Select>
</Line>
</Tooltip>
<Tooltip
title="Distance to shift the image as it appears. Any valid CSS `length` property"
placement="right"
>
<Line component="div">
distance="
<TextField
variant="standard"
value={distance}
onChange={(e) => setDistance(e.target.value)}
/>
"
</Line>
</Tooltip>
<Tooltip
title="Number of milliseconds the shift takes"
placement="right"
>
<Line component="div">
shiftDuration={'{'}
<TextField
variant="standard"
value={shiftDuration || duration * 0.3}
onChange={(e) => setShiftDuration(e.target.value)}
/>
{'}'}
</Line>
</Tooltip>
<Tooltip
title="Color the image transitions in from. Any valid CSS `background-color` property"
placement="right"
>
<Line component="div">
bgColor="
<TextField
variant="standard"
value={bgColor}
onChange={(e) => setBgColor(e.target.value)}
/>
"
</Line>
</Tooltip>
</Stack>
<Box component="div" variant="h6">
{'/>'}
</Box>
<Button
disabled={showPhoto === 'refresh'}
variant="contained"
onClick={refreshPhoto}
disableElevation
>
Refresh photo
</Button>
<Button
disabled={showPhoto === 'new'}
variant="outlined"
onClick={getNewPhoto}
>
Random photo
</Button>
<Button onClick={resetDefaults}>Reset defaults</Button>
</Stack>
</Drawer>
<Box component="section" sx={{ flexGrow: 1, backgroundColor: bgColor }}>
<Toolbar />
<ImageOutput
sx={{
maxHeight: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
}}
>
{showPhoto && (
<Image
src={`https://picsum.photos/id/${currentPhoto}/2000`}
width={width}
height={height}
duration={duration}
showLoading={showLoading}
errorIcon={errorIcon}
shift={shift}
distance={distance}
shiftDuration={shiftDuration}
easing={easing}
fit={fit}
bgColor={bgColor}
/>
)}
</ImageOutput>
</Box>
</Box>
);
}
Example #10
| Source File: Layout.jsx From CRM with Apache License 2.0 | 2 votes |
|
Layout = (props) => {
const { window } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
const sidebarContents = [
{
title: "Contacts",
link: "/admin_dashboard/contacts",
icon: <Phone strokeWidth={1} />,
},
{
title: "Tickets",
link: "/admin_dashboard/tickets",
icon: <Package strokeWidth={1} />,
},
{
title: "Todos",
link: "/admin_dashboard/todos",
icon: <FileText strokeWidth={1} />,
},
{
title: "Email",
link: "/admin_dashboard/emails",
icon: <Inbox strokeWidth={1} />,
},
{
title: "CDA",
link: "/admin_dashboard/cda",
icon: <Book strokeWidth={1} />,
},
];
const drawer = (
<div>
<Toolbar />
<Divider />
<List>
{sidebarContents.map((item, index) => (
<ListItem button key={index} component={NavLink} to={item.link}>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={item.title} />
</ListItem>
))}
</List>
<Divider />
</div>
);
const container =
window !== undefined ? () => window().document.body : undefined;
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const renderMenu = (
<Menu
id="long-menu"
MenuListProps={{
"aria-labelledby": "long-button",
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<User width="18px" strokeWidth={1.5} />
</ListItemIcon>
<Typography variant="inherit">Profile</Typography>
</MenuItem>
<MenuItem onClick={handleClose}>
<ListItemIcon>
<LogOut width="18px" strokeWidth={1.5} />
</ListItemIcon>
<Typography variant="inherit">Logout</Typography>
</MenuItem>
</Menu>
);
return (
<section className="wrapper">
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
position="fixed"
sx={{
// width: { sm: `calc(100% - ${drawerWidth}px)` },
// ml: { sm: `${drawerWidth}px` },
backgroundColor: "#1e1e2f",
backgroundImage: "none",
boxShadow: "none",
borderTop: "2px solid #1d8cf8",
}}
>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: "none" } }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Easy CRM
</Typography>
<Box sx={{ flexGrow: 1 }} />
<IconButton
color="inherit"
aria-label="more"
id="long-button"
aria-controls={open ? "long-menu" : undefined}
aria-expanded={open ? "true" : undefined}
aria-haspopup="true"
onClick={handleClick}
>
<MoreVertical />
</IconButton>
{renderMenu}
</Toolbar>
</AppBar>
<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
aria-label="sidebar"
className="sidebar"
>
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: "block", sm: "none" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: 230,
border: "none",
// backgroundColor: "transparent",
background: "linear-gradient(0deg, #3358f4, #1d8cf8)",
position: "relative",
},
}}
>
{drawer}
</Drawer>
<Drawer
variant="permanent"
sx={{
display: { xs: "none", sm: "block" },
"& .MuiDrawer-paper": {
boxSizing: "border-box",
width: 230,
border: "none",
backgroundColor: "transparent",
position: "relative",
},
}}
open
>
{drawer}
</Drawer>
</Box>
<Box
component="main"
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - ${drawerWidth}px)` },
overflowY: "scroll",
// height: "100vh - 64px",
}}
className="main-panel"
>
<Toolbar />
<Outlet />
</Box>
</Box>
</section>
);
}
