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

• Add AWS gitlab to the installation Types
• Create forms or reuse the github form for AWS

• We need to rename local code related to k3d so it keeps consistent with the CLI
• Note: still need to confirm if we also want to update the content like titles and descriptions

We are not supporting the static release and the internal API anymore. We only want to read config values via Environment Variables.

• Delete internal api from the store. src/store.ts

• Delete internal api src/api/internalApi.ts

• Refactor the action to read env variables from the runtime values window.__env__

• Create a reducer function to set configs.

• Add civo gitlab to the installation Types
• Create forms and flow

• Add local gitlab to the installation Types

• Reuse the github form

• Store the form fields in the redux state.

Add civo github to the installation Types
Create forms and flow

• Argo CD Url should be http://localhost:8080/applications/argo
• Argo Workflows Url should be http://localhost:8080/applications/argo-cwft-components
• Argo Workflos Doc link should be https://docs.kubefirst.io/tooling/argo.html.

These URL updates should only apply to the local scenario.