diff --git a/src/NotificationHeader.jsx b/src/NotificationHeader.jsx
index 805e28e..29803f0 100644
--- a/src/NotificationHeader.jsx
+++ b/src/NotificationHeader.jsx
@@ -27,7 +27,11 @@ const useStyles = makeStyles(theme => ({
color: '#7e7e7e'
},
chevron: {
- fontSize: '1.1rem'
+ fontSize: '1.1rem',
+ transition: 'transform 300ms',
+ '&.expanded': {
+ transform: 'rotate(180deg)'
+ }
}
}));
export default function NotificationHeader(props) {
@@ -36,6 +40,7 @@ export default function NotificationHeader(props) {
const icon = props.icon
const date = props.date
const accent = props.accent
+ const expanded = props.expanded
return (
@@ -44,7 +49,7 @@ export default function NotificationHeader(props) {
{name}
•
{date}
-
+
)
}
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index b5511a5..d3c8e05 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -16,6 +16,8 @@ const useStyles = makeStyles(theme => ({
export default function AndroidNotification(props) {
const classes = useStyles()
+ const [expanded, setExpanded] = React.useState(false)
+
const defaultProps = {
name: 'Android Notification',
icon:
,
@@ -24,10 +26,15 @@ export default function AndroidNotification(props) {
title: 'Awesome Notification',
body: 'this is an awesome notification !'
}
+
+ function toggleExpandMode() {
+ setExpanded(!expanded)
+ }
+
return (
-
+
-
+