Skip to content

Commit

Permalink
Merge pull request #101 from SmartDev0910/dev
Browse files Browse the repository at this point in the history 
Upgraded siderbar and simple demo
  • Loading branch information
@Stardev1127
Stardev1127 committed Apr 18, 2023
2 parents 7dcab7c + 2c19495 commit 31e64cf
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 154 deletions.
4 changes: 2 additions & 2 deletions sera_frontend_pro/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,11 @@ function Overview() {
<Box>
<Button
component={Link}
href="/dashboards/tasks"
href="/applications/business-ecosystem"
variant="contained"
sx={{ ml: 2 }}
>
Live Preview
Launch the app
</Button>
</Box>
</Box>
Expand Down
116 changes: 3 additions & 113 deletions sera_frontend_pro/src/content/Overview/Hero/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,66 +35,6 @@ const LabelWrapper = styled(Box)(
`
);

const MuiAvatar = styled(Box)(
({ theme }) => `
width: ${theme.spacing(8)};
height: ${theme.spacing(8)};
border-radius: ${theme.general.borderRadius};
background-color: #e5f7ff;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto ${theme.spacing(2)};
img {
width: 60%;
height: 60%;
display: block;
}
`
);

const TsAvatar = styled(Box)(
({ theme }) => `
width: ${theme.spacing(8)};
height: ${theme.spacing(8)};
border-radius: ${theme.general.borderRadius};
background-color: #dfebf6;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto ${theme.spacing(2)};
img {
width: 60%;
height: 60%;
display: block;
}
`
);

const NextJsAvatar = styled(Box)(
({ theme }) => `
width: ${theme.spacing(8)};
height: ${theme.spacing(8)};
border-radius: ${theme.general.borderRadius};
background-color: #dfebf6;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto ${theme.spacing(2)};
img {
width: 60%;
height: 60%;
display: block;
}
`
);

function Hero() {
return (
<Container maxWidth="lg" sx={{ textAlign: 'center' }}>
Expand All @@ -105,10 +45,10 @@ function Hero() {
container
>
<Grid item md={10} lg={8} mx="auto">
<LabelWrapper color="success">Version 1.0.0</LabelWrapper>
<TypographyH1 sx={{ mb: 2 }} variant="h1">
SERA Dashboard
</TypographyH1>
<LabelWrapper color="success">Version 1.0.0</LabelWrapper>
<TypographyH2
sx={{ lineHeight: 1.5, pb: 4 }}
variant="h4"
Expand All @@ -123,62 +63,12 @@ function Hero() {
</TypographyH2>
<Button
component={Link}
href="/dashboards/tasks"
href="/applications/business-ecosystem"
size="large"
variant="contained"
>
Go To the Dashboard
Launch the app
</Button>
<Grid container spacing={3} mt={5}>
<Grid item md={4}>
<MuiAvatar>
<img
src="/static/images/logo/material-ui.svg"
alt="Material-UI"
/>
</MuiAvatar>
<Typography variant="h4">
<Box sx={{ pb: 2 }}>
<b>Powered by MUI (Material-UI)</b>
</Box>
<Typography component="span" variant="subtitle2">
A simple and customizable component library to build faster,
beautiful, and accessible React apps.
</Typography>
</Typography>
</Grid>
<Grid item md={4}>
<NextJsAvatar>
<img src="/static/images/logo/next-js.svg" alt="NextJS" />
</NextJsAvatar>
<Typography variant="h4">
<Box sx={{ pb: 2 }}>
<b>Built with Next.js</b>
</Box>
<Typography component="span" variant="subtitle2">
Next.js gives you the best developer experience with all the
features you need for production.
</Typography>
</Typography>
</Grid>
<Grid item md={4}>
<TsAvatar>
<img
src="/static/images/logo/typescript.svg"
alt="Typescript"
/>
</TsAvatar>
<Typography variant="h4">
<Box sx={{ pb: 2 }}>
<b>Built with Typescript</b>
</Box>
<Typography component="span" variant="subtitle2">
Tokyo Free Black features a modern technology stack and is
built with React + Typescript.
</Typography>
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
Expand Down
59 changes: 20 additions & 39 deletions sera_frontend_pro/src/layouts/SidebarLayout/Sidebar/SidebarMenu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,62 +178,45 @@ function SidebarMenu() {
return (
<>
<MenuWrapper>
<List component="div">
<SubMenuWrapper>
<List component="div">
<ListItem component="div">
<NextLink href="/" passHref>
<Button
className={currentRoute === '="/' ? 'active' : ''}
disableRipple
component="a"
onClick={closeSidebar}
startIcon={<DesignServicesTwoToneIcon />}
>
Overview
</Button>
</NextLink>
</ListItem>
</List>
</SubMenuWrapper>
</List>
<List
component="div"
subheader={
<ListSubheader component="div" disableSticky>
Dashboards
Accounts
</ListSubheader>
}
>
<SubMenuWrapper>
<List component="div">
<ListItem component="div">
<NextLink href="/dashboards/tasks" passHref>
<NextLink href="/management/profile" passHref>
<Button
className={
currentRoute === '/dashboards/tasks' ? 'active' : ''
currentRoute === '/management/profile' ? 'active' : ''
}
disableRipple
component="a"
onClick={closeSidebar}
startIcon={<BrightnessLowTwoToneIcon />}
startIcon={<AccountCircleTwoToneIcon />}
>
Manage Tasks
User Profile
</Button>
</NextLink>
</ListItem>
<ListItem component="div">
<NextLink href="/applications/messenger" passHref>
<NextLink href="/management/profile/settings" passHref>
<Button
className={
currentRoute === '/applications/messenger' ? 'active' : ''
currentRoute === '/management/profile/settings'
? 'active'
: ''
}
disableRipple
component="a"
onClick={closeSidebar}
startIcon={<MmsTwoToneIcon />}
startIcon={<DisplaySettingsTwoToneIcon />}
>
Messenger
Account Settings
</Button>
</NextLink>
</ListItem>
Expand Down Expand Up @@ -445,41 +428,39 @@ function SidebarMenu() {
component="div"
subheader={
<ListSubheader component="div" disableSticky>
Accounts
Dashboards
</ListSubheader>
}
>
<SubMenuWrapper>
<List component="div">
<ListItem component="div">
<NextLink href="/management/profile" passHref>
<NextLink href="/dashboards/tasks" passHref>
<Button
className={
currentRoute === '/management/profile' ? 'active' : ''
currentRoute === '/dashboards/tasks' ? 'active' : ''
}
disableRipple
component="a"
onClick={closeSidebar}
startIcon={<AccountCircleTwoToneIcon />}
startIcon={<BrightnessLowTwoToneIcon />}
>
User Profile
Manage Tasks
</Button>
</NextLink>
</ListItem>
<ListItem component="div">
<NextLink href="/management/profile/settings" passHref>
<NextLink href="/applications/messenger" passHref>
<Button
className={
currentRoute === '/management/profile/settings'
? 'active'
: ''
currentRoute === '/applications/messenger' ? 'active' : ''
}
disableRipple
component="a"
onClick={closeSidebar}
startIcon={<DisplaySettingsTwoToneIcon />}
startIcon={<MmsTwoToneIcon />}
>
Account Settings
Messenger
</Button>
</NextLink>
</ListItem>
Expand Down

0 comments on commit 31e64cf

Please sign in to comment.