Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ContentGroup options? #3

Open
MichelDiz opened this issue Aug 21, 2018 · 7 comments
Open

ContentGroup options? #3

MichelDiz opened this issue Aug 21, 2018 · 7 comments

Comments

@MichelDiz
Copy link

MichelDiz commented Aug 21, 2018

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
Copy link
Owner

yusinto commented Aug 22, 2018

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

@yusinto
Copy link
Owner

yusinto commented Aug 22, 2018

@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
Copy link
Author

MichelDiz commented Aug 22, 2018

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
Copy link
Owner

yusinto commented Aug 22, 2018

@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
Copy link
Author

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
Copy link
Owner

yusinto commented Aug 23, 2018

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants