How to use the frontity.styled.nav function in frontity

const isCurrentPage = state.router.link === link;
      return (
        
          {/* If link url is the current page, add `aria-current` for a11y */}
          
            {name}
          
        
      );
    })}
  
);

export default connect(Nav);

const NavContainer = styled.nav`
  list-style: none;
  display: flex;
  width: 848px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  margin: 0;
  overflow-x: auto;
`;

const NavItem = styled.div`
  padding: 0;
  margin: 0 16px;
  color: #fff;
  font-size: 0.9em;
  box-sizing: border-box;

background: #fff;
  display: flex;
  justify-content: stretch;
  overflow: auto;
  width: 100%;
`;

const MenuWrapper = styled(SectionContainer)`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100%;
`;

const MenuContent = styled.nav`
  display: block;
`;

const MenuList = styled.ul`
  position: relative;
  list-style: none;
  margin: 0;
  /* left: calc(50% - 50vw);
  width: 100vw; */
`;

const ToggleText = styled.span`
  margin-right: 1.6rem;
  * {
    fill: currentColor;
  }

import React from "react";
import {  styled ,connect } from "frontity";
import Link from "../utils/link";
import { inDesktop } from '../utils/media-queries';

const Nav = ({ state }) => (
  
      {state.theme.menu.map(([name, link]) => (
          {name}
      ))}
  
);

export default connect(Nav);

const Container = styled.nav`
    flex: 1 1 auto;
`;

const Item = styled(Link)`
    --margin-right: .5;

    font-size: 11px;
    font-family: var(--system-family);
    text-decoration: none;
    letter-spacing: .06em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: var(--header-height);
    position: relative;
    opacity: ${({ isSelected }) => ( isSelected ? 1 : .7)};
    transition: all .2s;

);
        })}
      
    
  
);

export default connect(Navigation);

const NavWrapper = styled.div`
  align-items: center;
  display: flex;
`;

const MenuNav = styled.nav`
  display: none;
  @media (min-width: 1000px) {
    display: block;
    width: 100%;
  }
`;

const Menu = styled.ul`
  display: flex;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.0277em;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  margin: 0;