MobileSidebar.js 756 B

123456789101112131415161718192021222324252627282930313233
  1. import React from 'react'
  2. import styled from 'styled-components'
  3. import DocLinks from './DocLinks'
  4. import {} from '../components/Sidebar'
  5. const MobileContainer = styled.div`
  6. border-left: 1px solid #86838333;
  7. border-bottom: 1px solid #86838333;
  8. padding: 30px 30px 200px;
  9. width: 340px;
  10. display: block;
  11. height: calc(100vh - 54px);
  12. overflow: scroll;
  13. position: fixed;
  14. top: 54px;
  15. right: 0px;
  16. background-color: ${(props) => props.theme.colors.white};
  17. z-index: 100;
  18. @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) {
  19. display: none;
  20. }
  21. `
  22. const MobileSidebar = () => {
  23. return (
  24. <MobileContainer flexDirection='column'>
  25. <DocLinks />
  26. </MobileContainer>
  27. )
  28. }
  29. export default MobileSidebar