prettier fix
parent
95d27176c2
commit
134b9b3f9d
|
|
@ -2,5 +2,5 @@
|
|||
"tabWidth": 2,
|
||||
"singleQuote": false,
|
||||
"semi": true,
|
||||
"trailingComma": "all"
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ import {
|
|||
Person as AccountIcon,
|
||||
Search as SearchIcon,
|
||||
Send as SendIcon,
|
||||
MenuOpen as MenuOpenIcon,
|
||||
MenuOpen as MenuOpenIcon
|
||||
} from "@material-ui/icons";
|
||||
import classNames from "classnames";
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ import UserAvatar from "../UserAvatar/UserAvatar";
|
|||
import {
|
||||
useLayoutState,
|
||||
useLayoutDispatch,
|
||||
toggleSidebar,
|
||||
toggleSidebar
|
||||
} from "../../context/LayoutContext";
|
||||
import { useUserDispatch, signOut } from "../../context/UserContext";
|
||||
|
||||
|
|
@ -41,29 +41,29 @@ const messages = [
|
|||
variant: "warning",
|
||||
name: "Jane Hew",
|
||||
message: "Hey! How is it going?",
|
||||
time: "9:32",
|
||||
time: "9:32"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
variant: "success",
|
||||
name: "Lloyd Brown",
|
||||
message: "Check out my new Dashboard",
|
||||
time: "9:18",
|
||||
time: "9:18"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
variant: "primary",
|
||||
name: "Mark Winstein",
|
||||
message: "I want rearrange the appointment",
|
||||
time: "9:15",
|
||||
time: "9:15"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
variant: "secondary",
|
||||
name: "Liana Dutti",
|
||||
message: "Good news from sale department",
|
||||
time: "9:09",
|
||||
},
|
||||
time: "9:09"
|
||||
}
|
||||
];
|
||||
|
||||
const notifications = [
|
||||
|
|
@ -72,20 +72,20 @@ const notifications = [
|
|||
id: 1,
|
||||
color: "success",
|
||||
type: "info",
|
||||
message: "What is the best way to get ...",
|
||||
message: "What is the best way to get ..."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: "secondary",
|
||||
type: "notification",
|
||||
message: "This is just a simple notification",
|
||||
message: "This is just a simple notification"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
color: "primary",
|
||||
type: "e-commerce",
|
||||
message: "12 new orders has arrived today",
|
||||
},
|
||||
message: "12 new orders has arrived today"
|
||||
}
|
||||
];
|
||||
|
||||
export default function Header(props) {
|
||||
|
|
@ -112,25 +112,19 @@ export default function Header(props) {
|
|||
onClick={() => toggleSidebar(layoutDispatch)}
|
||||
className={classNames(
|
||||
classes.headerMenuButtonSandwich,
|
||||
classes.headerMenuButtonCollapse,
|
||||
classes.headerMenuButtonCollapse
|
||||
)}
|
||||
>
|
||||
{layoutState.isSidebarOpened ? (
|
||||
<MenuOpenIcon
|
||||
classes={{
|
||||
root: classNames(
|
||||
classes.headerIcon,
|
||||
classes.headerIconCollapse,
|
||||
),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MenuIcon
|
||||
classes={{
|
||||
root: classNames(
|
||||
classes.headerIcon,
|
||||
classes.headerIconCollapse,
|
||||
),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -141,12 +135,12 @@ export default function Header(props) {
|
|||
<div className={classes.grow} />
|
||||
<div
|
||||
className={classNames(classes.search, {
|
||||
[classes.searchFocused]: isSearchOpen,
|
||||
[classes.searchFocused]: isSearchOpen
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(classes.searchIcon, {
|
||||
[classes.searchIconOpened]: isSearchOpen,
|
||||
[classes.searchIconOpened]: isSearchOpen
|
||||
})}
|
||||
onClick={() => setSearchOpen(!isSearchOpen)}
|
||||
>
|
||||
|
|
@ -156,7 +150,7 @@ export default function Header(props) {
|
|||
placeholder="Search…"
|
||||
classes={{
|
||||
root: classes.inputRoot,
|
||||
input: classes.inputInput,
|
||||
input: classes.inputInput
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -164,7 +158,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
setNotificationsMenu(e.currentTarget);
|
||||
setIsNotificationsUnread(false);
|
||||
}}
|
||||
|
|
@ -181,7 +175,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
aria-haspopup="true"
|
||||
aria-controls="mail-menu"
|
||||
onClick={e => {
|
||||
onClick={(e) => {
|
||||
setMailMenu(e.currentTarget);
|
||||
setIsMailsUnread(false);
|
||||
}}
|
||||
|
|
@ -199,7 +193,7 @@ export default function Header(props) {
|
|||
color="inherit"
|
||||
className={classes.headerMenuButton}
|
||||
aria-controls="profile-menu"
|
||||
onClick={e => setProfileMenu(e.currentTarget)}
|
||||
onClick={(e) => setProfileMenu(e.currentTarget)}
|
||||
>
|
||||
<AccountIcon classes={{ root: classes.headerIcon }} />
|
||||
</IconButton>
|
||||
|
|
@ -225,7 +219,7 @@ export default function Header(props) {
|
|||
{messages.length} New Messages
|
||||
</Typography>
|
||||
</div>
|
||||
{messages.map(message => (
|
||||
{messages.map((message) => (
|
||||
<MenuItem key={message.id} className={classes.messageNotification}>
|
||||
<div className={classes.messageNotificationSide}>
|
||||
<UserAvatar color={message.variant} name={message.name} />
|
||||
|
|
@ -236,7 +230,7 @@ export default function Header(props) {
|
|||
<div
|
||||
className={classNames(
|
||||
classes.messageNotificationSide,
|
||||
classes.messageNotificationBodySide,
|
||||
classes.messageNotificationBodySide
|
||||
)}
|
||||
>
|
||||
<Typography weight="medium" gutterBottom>
|
||||
|
|
@ -266,7 +260,7 @@ export default function Header(props) {
|
|||
className={classes.headerMenu}
|
||||
disableAutoFocusItem
|
||||
>
|
||||
{notifications.map(notification => (
|
||||
{notifications.map((notification) => (
|
||||
<MenuItem
|
||||
key={notification.id}
|
||||
onClick={() => setNotificationsMenu(null)}
|
||||
|
|
@ -301,7 +295,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Profile
|
||||
|
|
@ -309,7 +303,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Tasks
|
||||
|
|
@ -317,7 +311,7 @@ export default function Header(props) {
|
|||
<MenuItem
|
||||
className={classNames(
|
||||
classes.profileMenuItem,
|
||||
classes.headerMenuItem,
|
||||
classes.headerMenuItem
|
||||
)}
|
||||
>
|
||||
<AccountIcon className={classes.profileMenuIcon} /> Messages
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
QuestionAnswer as SupportIcon,
|
||||
LibraryBooks as LibraryIcon,
|
||||
HelpOutline as FAQIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
ArrowBack as ArrowBackIcon
|
||||
} from "@material-ui/icons";
|
||||
import { useTheme } from "@material-ui/styles";
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
|
@ -26,7 +26,7 @@ import Dot from "./components/Dot";
|
|||
import {
|
||||
useLayoutState,
|
||||
useLayoutDispatch,
|
||||
toggleSidebar,
|
||||
toggleSidebar
|
||||
} from "../../context/LayoutContext";
|
||||
|
||||
const structure = [
|
||||
|
|
@ -35,14 +35,14 @@ const structure = [
|
|||
id: 1,
|
||||
label: "Typography",
|
||||
link: "/app/typography",
|
||||
icon: <TypographyIcon />,
|
||||
icon: <TypographyIcon />
|
||||
},
|
||||
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
|
||||
{
|
||||
id: 3,
|
||||
label: "Notifications",
|
||||
link: "/app/notifications",
|
||||
icon: <NotificationsIcon />,
|
||||
icon: <NotificationsIcon />
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
|
|
@ -52,34 +52,49 @@ const structure = [
|
|||
children: [
|
||||
{ label: "Icons", link: "/app/ui/icons" },
|
||||
{ label: "Charts", link: "/app/ui/charts" },
|
||||
{ label: "Maps", link: "/app/ui/maps" },
|
||||
],
|
||||
{ label: "Maps", link: "/app/ui/maps" }
|
||||
]
|
||||
},
|
||||
{ id: 5, type: "divider" },
|
||||
{ id: 6, type: "title", label: "HELP" },
|
||||
{ id: 7, label: "Library", link: "https://flatlogic.com/templates", icon: <LibraryIcon /> },
|
||||
{ id: 8, label: "Support", link: "https://flatlogic.com/forum", icon: <SupportIcon /> },
|
||||
{ id: 9, label: "FAQ", link: "https://flatlogic.com/forum", icon: <FAQIcon /> },
|
||||
{
|
||||
id: 7,
|
||||
label: "Library",
|
||||
link: "https://flatlogic.com/templates",
|
||||
icon: <LibraryIcon />
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: "Support",
|
||||
link: "https://flatlogic.com/forum",
|
||||
icon: <SupportIcon />
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "FAQ",
|
||||
link: "https://flatlogic.com/forum",
|
||||
icon: <FAQIcon />
|
||||
},
|
||||
{ id: 10, type: "divider" },
|
||||
{ id: 11, type: "title", label: "PROJECTS" },
|
||||
{
|
||||
id: 12,
|
||||
label: "My recent",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="warning" />,
|
||||
icon: <Dot size="small" color="warning" />
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: "Starred",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="primary" />,
|
||||
icon: <Dot size="small" color="primary" />
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: "Background",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="secondary" />,
|
||||
},
|
||||
icon: <Dot size="small" color="secondary" />
|
||||
}
|
||||
];
|
||||
|
||||
function Sidebar({ location }) {
|
||||
|
|
@ -106,13 +121,13 @@ function Sidebar({ location }) {
|
|||
variant={isPermanent ? "permanent" : "temporary"}
|
||||
className={classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})}
|
||||
classes={{
|
||||
paper: classNames({
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
}),
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
open={isSidebarOpened}
|
||||
>
|
||||
|
|
@ -121,13 +136,13 @@ function Sidebar({ location }) {
|
|||
<IconButton onClick={() => toggleSidebar(layoutDispatch)}>
|
||||
<ArrowBackIcon
|
||||
classes={{
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse),
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</div>
|
||||
<List className={classes.sidebarList}>
|
||||
{structure.map(link => (
|
||||
{structure.map((link) => (
|
||||
<SidebarLink
|
||||
key={link.id}
|
||||
location={location}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Drawer,
|
||||
IconButton,
|
||||
List,
|
||||
withStyles } from "@material-ui/core";
|
||||
import React from "react";
|
||||
import { Drawer, IconButton, List, withStyles } from "@material-ui/core";
|
||||
import {
|
||||
Home as HomeIcon,
|
||||
NotificationsNone as NotificationsIcon,
|
||||
|
|
@ -13,126 +9,182 @@ import {
|
|||
QuestionAnswer as SupportIcon,
|
||||
LibraryBooks as LibraryIcon,
|
||||
HelpOutline as FAQIcon,
|
||||
ArrowBack as ArrowBackIcon,
|
||||
ArrowBack as ArrowBackIcon
|
||||
} from "@material-ui/icons";
|
||||
import classNames from 'classnames';
|
||||
import classNames from "classnames";
|
||||
|
||||
import SidebarLink from './components/SidebarLink/SidebarLinkContainer';
|
||||
import Dot from './components/Dot';
|
||||
import SidebarLink from "./components/SidebarLink/SidebarLinkContainer";
|
||||
import Dot from "./components/Dot";
|
||||
|
||||
const structure = [
|
||||
{ id: 0, label: 'Dashboard', link: '/app/dashboard', icon: <HomeIcon /> },
|
||||
{ id: 1, label: 'Typography', link: '/app/typography', icon: <TypographyIcon /> },
|
||||
{ id: 2, label: 'Tables', link: '/app/tables', icon: <TableIcon /> },
|
||||
{ id: 3, label: 'Notifications', link: '/app/notifications', icon: <NotificationsIcon />},
|
||||
{ id: 0, label: "Dashboard", link: "/app/dashboard", icon: <HomeIcon /> },
|
||||
{
|
||||
id: 1,
|
||||
label: "Typography",
|
||||
link: "/app/typography",
|
||||
icon: <TypographyIcon />
|
||||
},
|
||||
{ id: 2, label: "Tables", link: "/app/tables", icon: <TableIcon /> },
|
||||
{
|
||||
id: 3,
|
||||
label: "Notifications",
|
||||
link: "/app/notifications",
|
||||
icon: <NotificationsIcon />
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: 'UI Elements',
|
||||
link: '/app/ui',
|
||||
label: "UI Elements",
|
||||
link: "/app/ui",
|
||||
icon: <UIElementsIcon />,
|
||||
children: [
|
||||
{ label: 'Icons', link: '/app/ui/icons' },
|
||||
{ label: 'Charts', link: '/app/ui/charts' },
|
||||
{ label: 'Maps', link: '/app/ui/maps' },
|
||||
],
|
||||
{ label: "Icons", link: "/app/ui/icons" },
|
||||
{ label: "Charts", link: "/app/ui/charts" },
|
||||
{ label: "Maps", link: "/app/ui/maps" }
|
||||
]
|
||||
},
|
||||
{ id: 5, type: 'divider' },
|
||||
{ id: 6, type: 'title', label: 'HELP' },
|
||||
{ id: 7, label: 'Library', link: 'https://flatlogic.com/templates', icon: <LibraryIcon /> },
|
||||
{ id: 8, label: 'Support', link: 'https://flatlogic.com/forum/', icon: <SupportIcon /> },
|
||||
{ id: 9, label: 'FAQ', link: 'https://flatlogic.com/forum/', icon: <FAQIcon />},
|
||||
{ id: 10, type: 'divider' },
|
||||
{ id: 11, type: 'title', label: 'PROJECTS' },
|
||||
{ id: 12, label: 'My recent', link: '', icon: <Dot size="small" color="secondary" /> },
|
||||
{ id: 13, label: 'Starred', link: '', icon: <Dot size="small" color="primary" /> },
|
||||
{ id: 14, label: 'Background', link: '', icon: <Dot size="small" color="secondary" /> },
|
||||
{ id: 5, type: "divider" },
|
||||
{ id: 6, type: "title", label: "HELP" },
|
||||
{
|
||||
id: 7,
|
||||
label: "Library",
|
||||
link: "https://flatlogic.com/templates",
|
||||
icon: <LibraryIcon />
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: "Support",
|
||||
link: "https://flatlogic.com/forum/",
|
||||
icon: <SupportIcon />
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
label: "FAQ",
|
||||
link: "https://flatlogic.com/forum/",
|
||||
icon: <FAQIcon />
|
||||
},
|
||||
{ id: 10, type: "divider" },
|
||||
{ id: 11, type: "title", label: "PROJECTS" },
|
||||
{
|
||||
id: 12,
|
||||
label: "My recent",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="secondary" />
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: "Starred",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="primary" />
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
label: "Background",
|
||||
link: "",
|
||||
icon: <Dot size="small" color="secondary" />
|
||||
}
|
||||
];
|
||||
|
||||
const SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
|
||||
const SidebarView = ({
|
||||
classes,
|
||||
theme,
|
||||
toggleSidebar,
|
||||
isSidebarOpened,
|
||||
isPermanent,
|
||||
location
|
||||
}) => {
|
||||
return (
|
||||
<Drawer
|
||||
variant={isPermanent ? 'permanent' : 'temporary'}
|
||||
variant={isPermanent ? "permanent" : "temporary"}
|
||||
className={classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})}
|
||||
classes={{
|
||||
paper: classNames(classes.drawer, {
|
||||
[classes.drawerOpen]: isSidebarOpened,
|
||||
[classes.drawerClose]: !isSidebarOpened,
|
||||
}),
|
||||
[classes.drawerClose]: !isSidebarOpened
|
||||
})
|
||||
}}
|
||||
open={isSidebarOpened}
|
||||
>
|
||||
<div className={classes.mobileBackButton}>
|
||||
<IconButton
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
|
||||
<IconButton onClick={toggleSidebar}>
|
||||
<ArrowBackIcon
|
||||
classes={{
|
||||
root: classNames(classes.headerIcon, classes.headerIconCollapse)
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</div>
|
||||
<List className={classes.sidebarList}>
|
||||
{structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
|
||||
{structure.map((link) => (
|
||||
<SidebarLink
|
||||
key={link.id}
|
||||
location={location}
|
||||
isSidebarOpened={isSidebarOpened}
|
||||
{...link}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const styles = theme => ({
|
||||
const styles = (theme) => ({
|
||||
menuButton: {
|
||||
marginLeft: 12,
|
||||
marginRight: 36,
|
||||
marginRight: 36
|
||||
},
|
||||
hide: {
|
||||
display: 'none',
|
||||
display: "none"
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
whiteSpace: "nowrap",
|
||||
top: theme.spacing.unit * 8,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
top: 0,
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
drawerOpen: {
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
duration: theme.transitions.duration.enteringScreen
|
||||
})
|
||||
},
|
||||
drawerClose: {
|
||||
transition: theme.transitions.create('width', {
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
}),
|
||||
overflowX: 'hidden',
|
||||
overflowX: "hidden",
|
||||
width: theme.spacing.unit * 7 + 40,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
width: drawerWidth,
|
||||
width: drawerWidth
|
||||
}
|
||||
},
|
||||
toolbar: {
|
||||
...theme.mixins.toolbar,
|
||||
[theme.breakpoints.down("sm")]: {
|
||||
display: 'none',
|
||||
display: "none"
|
||||
}
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing.unit * 3,
|
||||
padding: theme.spacing.unit * 3
|
||||
},
|
||||
mobileBackButton: {
|
||||
marginTop: theme.spacing.unit * .5,
|
||||
marginTop: theme.spacing.unit * 0.5,
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.only("sm")]: {
|
||||
marginTop: theme.spacing.unit * .625,
|
||||
marginTop: theme.spacing.unit * 0.625
|
||||
},
|
||||
[theme.breakpoints.up("md")]: {
|
||||
display: 'none',
|
||||
display: "none"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue