SHARE
TWEET

Untitled

a guest Oct 17th, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect } from 'react'
  2. import styled, { withTheme } from 'styled-components'
  3. import { Menu as MenuIcon } from '@material-ui/icons'
  4. import { Button as MaterialButton } from '@material-ui/core'
  5.  
  6. import { createEvent, createStore } from 'effector'
  7. import { useStore } from 'effector-react'
  8.  
  9.  
  10. const Menu = styled.div`
  11.   z-index: 1001;
  12.   width: 300px;
  13.   height: 100%;
  14.   position: absolute;
  15.   display: flex;
  16.   flex-direction: column;
  17.   transition: left 0.4s ease;
  18.   left: ${prop => prop.isOpen ? '0' : '-300px'};
  19.   background: linear-gradient(rgba(30, 33, 80, 0.66) 0%, rgba(30, 33, 58, 0.66) 14%, rgba(30, 35, 65, 0.66) 28%, rgba(21, 53, 105, 0.66) 78%, rgba(19, 58, 116, 0.66) 100%);
  20. `
  21.  
  22. const Title = styled.h1`
  23.   font-size: 14pt;
  24.   min-height: 4rem;
  25.   padding: 0.5rem 0;
  26.   margin: 0;
  27.   display: flex;
  28.   justify-content: center;
  29.   align-items: center;
  30.   color: white;
  31. `
  32.  
  33. const Button = styled(MaterialButton)`
  34.   left: calc(100% + 1rem);
  35.   z-index: 1002;
  36.   position: absolute;
  37.   top: 20px;
  38.   background: #0089ff;
  39.   border: none;
  40.   color: white;
  41.   border-radius: 3px;
  42.   min-width: 16px;
  43. `
  44.  
  45. const menuToggle = createEvent('menu open')
  46.  
  47. const menuOpened = createStore(true)
  48.   .on(menuToggle, state => state ? false : true)
  49.  
  50. export const MainMenu = (props) => {
  51.  
  52.   const isOpen = useStore(menuOpened)
  53.  
  54.   console.log(props)
  55.  
  56.   useEffect(() => {
  57.     console.log('change', isOpen)
  58.     return () => {
  59.       console.log('change 2', isOpen)
  60.     }
  61.   })
  62.  
  63.   return (
  64.     <Menu isOpen={isOpen}>
  65.       <Title>
  66.         Ministry of Transport<br/>Republic of Latvia β
  67.       </Title>
  68.         <Button
  69.           onClick={menuToggle}
  70.         >
  71.           <MenuIcon/>
  72.         </Button>
  73.     </Menu>
  74.   )
  75. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top