28 | {/*
29 | There are two dropdown containers for csstransitions component main and secondary.
30 | we always go back to main conyainer and we use secondary as name for more container because we can style easy
31 | */}
32 |
40 | {/* CSSTransition component check for next element and adds transitions to that element by adding classNames we specified
41 | in this component props to next element and we add css to animate
42 | */}
43 |
44 | My Profile
45 | {/* if this item is clicked then only CSSTransition component will be triggered if active === settings as given in in prop boolean */}
46 | }
48 | goToMenu={"settings"}
49 | setActive={setActive}
50 | >
51 | Settings
52 |
53 |
54 | Animals
55 |
56 |
57 |
58 |
65 |
66 | }
68 | goToMenu={"main"}
69 | setActive={setActive}
70 | />
71 |
72 | }>HTML
73 | }>CSS
74 | }>
75 | JavaScript
76 |
77 | }>
78 | Awesome!
79 |
80 |
81 |
82 |
89 |
90 | }
93 | setActive={setActive}
94 | >
95 |
Animals
96 |
97 | Kangaroo
98 | Frog
99 | Horse?
100 | Hedgehog
101 |
102 |
103 |