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

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;
  }
`;

const MenuListItem = styled.li`
  position: relative;

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;

  @media (min-width: 1220px) {
    margin-top: -0.8rem;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -2.5rem;
  }
`;

import { styled, connect } from "frontity";
import React from "react";
import PostMetaItem from "./post-meta-item";
import { UserIcon, CalendarIcon } from "../icons";

export const PostMetaWrapper = styled.div`
  margin-top: 2rem;
  @media (min-width: 700px) {
    margin-top: 3rem;
  }
`;

export const PostMetaList = styled.ul`
  justify-content: center;
  color: #6d6d6d;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: 500;
  list-style: none;
  margin: -1rem 0 0 -2rem;

  svg {
    fill: currentColor;
  }

  @media (min-width: 700px) {
    font-size: 1.6rem;
    margin: -1.4rem 0 0 -3rem;