ContentGroup options?

[MichelDiz]

Hi, I'm trying to use your Nav with 'react-simple-flex-grid, but the positioning goes completely wrong. And I noticed that putting "Static" it returns to normal. How can this be defined?

var MovingDiv = _styledComponents.default.div.withConfig({

';position:static;left:',

Cheers

[yusinto]

Hi @MichelDiz I've never used react-simple-flex-grid before, but I'll take a look.

[yusinto]

@MichelDiz that package doesn't seem to work for me even outside of react-site-nav so I won't spend anymore time on that. You can easily write your own ContentGroup components using css grid or/and flex as per the 3 examples in the project.

I understand this might take a bit more time than using something that's ready-made. So I think what I'll do is provide some ready-made ContentGroup components with react-site-nav that developers can just import and use. What do you think?

[MichelDiz]

I had thought it might add something simple like passing StateProps. As it is an open project, I opened this question to report. The problem not only happens with react-simple-flex-grid, but with all the others I've tested that are "grid-something-pj".

But any solution is already good willing.

Cheers.

[yusinto]

@MichelDiz I am intrigued about this bug. To help me reproduce and fix this, are you able to share your code so I can run and debug please?

[MichelDiz]

Install gatsby -g and Just:
gatsby new SiteTest https://github.com/gatsbyjs/gatsby-starter-default\#v2
and

const Header = ({ siteTitle }) => (
  <div
    style={{
      background: 'transparent',
      marginBottom: '1.45rem',
    }}
  >
    <div
      style={{
        margin: '0 auto',
        maxWidth: 1170,
        padding: '1.45rem 1.0875rem',
      }}
    >
      <header>
        <Row gutter={40}>
          <Col xs={2} sm={4} md={6} lg={8} xl={10}>
            <Link
              to="/"
              style={{
                color: 'black',
                textDecoration: 'none',
              }}
            >
              <img src="someimage.com/assets/images/logo.png" />
            </Link>
          </Col>
          <Col xs={10} sm={8} md={6} lg={4} xl={2}>
            <SiteNav
              background="transparent"
              fontSize="18"
              color="#black"
              fontFamily="Helvetica, sans-serif"
              breakpoint="768"
              debug={false}
            >
              <ContentGroup title="About" width="420" height="270">
                {/* 3. You can add anything in a ContentGroup */}
                <ul>
                  {/* react router link! */}
                  <li>
                    <Link to="/my-story">My Story</Link>
                  </li>
                  <li>Another list item</li>
                </ul>
              </ContentGroup>
              <ContentGroup title="Contact" width="420" height="270">
                Free text followed by some links.
                <br />
                <a href="mailto:[email protected]">Email</a>
                <br />
                <a href="https://github.com/yusinto">Github</a>
              </ContentGroup>
            </SiteNav>
          </Col>
        </Row>
      </header>
    </div>
  </div>
)

[yusinto]

Cool thanks. I am a gatsby user and in processs of moving my blog to gatsby v2. I can reproduce the issue. I will debug and fix. Will keep you updated. Thank you!

[daisyncyril]

how i can have a hover effect to the root element when the dropdown is open.