Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
0de5395d
Commit
0de5395d
authored
Aug 04, 2020
by
d.arizona
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
apdet
parent
e1a484b4
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
185 additions
and
19 deletions
+185
-19
Home.tsx
src/pages/Home.tsx
+185
-19
No files found.
src/pages/Home.tsx
View file @
0de5395d
import
React
from
"react"
;
import
{
Trans
}
from
"@lingui/macro"
;
import
{
Sidebar
}
from
"./Sidebar"
;
import
React
from
'react'
;
import
clsx
from
'clsx'
;
import
{
makeStyles
,
useTheme
}
from
'@material-ui/core/styles'
;
import
Drawer
from
'@material-ui/core/Drawer'
;
import
AppBar
from
'@material-ui/core/AppBar'
;
import
Toolbar
from
'@material-ui/core/Toolbar'
;
import
List
from
'@material-ui/core/List'
;
import
CssBaseline
from
'@material-ui/core/CssBaseline'
;
import
Typography
from
'@material-ui/core/Typography'
;
import
Divider
from
'@material-ui/core/Divider'
;
import
IconButton
from
'@material-ui/core/IconButton'
;
import
MenuIcon
from
'@material-ui/icons/Menu'
;
import
ChevronLeftIcon
from
'@material-ui/icons/ChevronLeft'
;
import
ChevronRightIcon
from
'@material-ui/icons/ChevronRight'
;
import
ListItem
from
'@material-ui/core/ListItem'
;
import
ListItemIcon
from
'@material-ui/core/ListItemIcon'
;
import
ListItemText
from
'@material-ui/core/ListItemText'
;
import
InboxIcon
from
'@material-ui/icons/MoveToInbox'
;
import
MailIcon
from
'@material-ui/icons/Mail'
;
const
drawerWidth
=
240
;
const
useStyles
=
makeStyles
((
theme
)
=>
({
root
:
{
display
:
'flex'
,
},
appBar
:
{
zIndex
:
theme
.
zIndex
.
drawer
+
1
,
transition
:
theme
.
transitions
.
create
([
'width'
,
'margin'
],
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
leavingScreen
,
}),
},
appBarShift
:
{
marginLeft
:
drawerWidth
,
width
:
`calc(100% -
${
drawerWidth
}
px)`
,
transition
:
theme
.
transitions
.
create
([
'width'
,
'margin'
],
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
enteringScreen
,
}),
},
menuButton
:
{
marginRight
:
36
,
},
hide
:
{
display
:
'none'
,
},
drawer
:
{
width
:
drawerWidth
,
flexShrink
:
0
,
whiteSpace
:
'nowrap'
,
},
drawerOpen
:
{
width
:
drawerWidth
,
transition
:
theme
.
transitions
.
create
(
'width'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
enteringScreen
,
}),
},
drawerClose
:
{
transition
:
theme
.
transitions
.
create
(
'width'
,
{
easing
:
theme
.
transitions
.
easing
.
sharp
,
duration
:
theme
.
transitions
.
duration
.
leavingScreen
,
}),
overflowX
:
'hidden'
,
width
:
theme
.
spacing
(
7
)
+
1
,
[
theme
.
breakpoints
.
up
(
'sm'
)]:
{
width
:
theme
.
spacing
(
9
)
+
1
,
},
},
toolbar
:
{
display
:
'flex'
,
alignItems
:
'center'
,
justifyContent
:
'flex-end'
,
padding
:
theme
.
spacing
(
0
,
1
),
// necessary for content to be below app bar
...
theme
.
mixins
.
toolbar
,
},
content
:
{
flexGrow
:
1
,
padding
:
theme
.
spacing
(
3
),
},
}));
export
default
function
MiniDrawer
()
{
const
classes
=
useStyles
();
const
theme
=
useTheme
();
const
[
open
,
setOpen
]
=
React
.
useState
(
false
);
const
handleDrawerOpen
=
()
=>
{
setOpen
(
true
);
};
const
handleDrawerClose
=
()
=>
{
setOpen
(
false
);
};
const
Home
:
React
.
FC
=
()
=>
{
return
(
<
div
>
<
Trans
render=
"h1"
>
Home
</
Trans
>
<
div
>
<
Sidebar
width=
{
300
}
height=
{
"100vh"
}
>
<
h1
>
Nav Item
</
h1
>
<
h1
>
Nav Item
</
h1
>
<
h1
>
Nav Item
</
h1
>
<
h1
>
Nav Item
</
h1
>
<
h1
>
Nav Item
</
h1
>
</
Sidebar
>
</
div
>
<
div
className=
{
classes
.
root
}
>
<
CssBaseline
/>
<
AppBar
position=
"fixed"
className=
{
clsx
(
classes
.
appBar
,
{
[
classes
.
appBarShift
]:
open
,
})
}
>
<
Toolbar
>
<
IconButton
color=
"inherit"
aria
-
label=
"open drawer"
onClick=
{
handleDrawerOpen
}
edge=
"start"
className=
{
clsx
(
classes
.
menuButton
,
{
[
classes
.
hide
]:
open
,
})
}
>
<
MenuIcon
/>
</
IconButton
>
<
Typography
variant=
"h6"
noWrap
>
Mini variant drawer
</
Typography
>
</
Toolbar
>
</
AppBar
>
<
Drawer
variant=
"permanent"
className=
{
clsx
(
classes
.
drawer
,
{
[
classes
.
drawerOpen
]:
open
,
[
classes
.
drawerClose
]:
!
open
,
})
}
classes=
{
{
paper
:
clsx
({
[
classes
.
drawerOpen
]:
open
,
[
classes
.
drawerClose
]:
!
open
,
}),
}
}
>
<
div
className=
{
classes
.
toolbar
}
>
<
IconButton
onClick=
{
handleDrawerClose
}
>
{
theme
.
direction
===
'rtl'
?
<
ChevronRightIcon
/>
:
<
ChevronLeftIcon
/>
}
</
IconButton
>
</
div
>
<
Divider
/>
<
List
>
{
[
'Inbox'
,
'Starred'
,
'Send email'
,
'Drafts'
].
map
((
text
,
index
)
=>
(
<
ListItem
button
key=
{
text
}
>
<
ListItemIcon
>
{
index
%
2
===
0
?
<
InboxIcon
/>
:
<
MailIcon
/>
}
</
ListItemIcon
>
<
ListItemText
primary=
{
text
}
/>
</
ListItem
>
))
}
</
List
>
<
Divider
/>
<
List
>
{
[
'All mail'
,
'Trash'
,
'Spam'
].
map
((
text
,
index
)
=>
(
<
ListItem
button
key=
{
text
}
>
<
ListItemIcon
>
{
index
%
2
===
0
?
<
InboxIcon
/>
:
<
MailIcon
/>
}
</
ListItemIcon
>
<
ListItemText
primary=
{
text
}
/>
</
ListItem
>
))
}
</
List
>
</
Drawer
>
<
main
className=
{
classes
.
content
}
>
<
div
className=
{
classes
.
toolbar
}
/>
<
Typography
paragraph
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
facilisis leo vel. Risus at ultrices mi tempus imperdiet. Semper risus in hendrerit
gravida rutrum quisque non tellus. Convallis convallis tellus id interdum velit laoreet id
donec ultrices. Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra nibh cras.
Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Mauris commodo quis
imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus at augue. At augue eget
arcu dictum varius duis at consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem
donec massa sapien faucibus et molestie ac.
</
Typography
>
<
Typography
paragraph
>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet volutpat
consequat mauris. Elementum eu facilisis sed odio morbi. Euismod lacinia at quis risus sed
vulputate odio. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. In
hendrerit gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem et
tortor. Habitant morbi tristique senectus et. Adipiscing elit duis tristique sollicitudin
nibh sit. Ornare aenean euismod elementum nisi quis eleifend. Commodo viverra maecenas
accumsan lacus vel facilisis. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
</
Typography
>
</
main
>
</
div
>
);
};
export
default
Home
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment