Responsive Navigation

[CristhianF7]

Problem

We want to refactor the navigation component, the current implementation was made to receive props but We'd prefer to use native CSS media queries rather than javascript screen listeners.

Acceptance Criteria

• Navigation should be responsive
• Adjust the version because is tied to the desktop version
• Use CSS media queries with styled-media-query
• Mobile first

Implementation Example

Use theme/media/index.ts in the style component

export const StyledComponent = styled.div`
  // mobile styles
  width: 614px;


  ${media.greaterThan('md')`
    // desktop styles
    width: 790px;
  `};
`;

Result

< 1028px

> 1028px

[D-B-Hawk]

Hey @CristhianF7. I would love to take care of this issue for you. I will reach out for any questions i have.

[fharper]

@D-B-Hawk: that's awesome, thanks for contributing.

Feel free to ask any questions here, or on our Slack community in #helpind-hands for anything kubefirst related or #contributors for specifics about this contribution (or contributing to kubefirst overall).