How to use the linaria/react.styled.nav function in linaria

import { styled } from 'linaria/react';
import Link from './Link';
import type { Metadata, Separator } from '../types';

const SidebarContent = styled.aside`
  background-color: #f8f9fa;

  @media (min-width: 640px) {
    height: 100%;
    min-width: 240px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
`;

const Navigation = styled.nav`
  padding: 12px 24px;

  @media (min-width: 640px) {
    padding: 20px 32px;
  }
`;

const Searchbar = styled.input`
  appearance: none;
  width: calc(100% - 48px);
  padding: 8px 12px;
  margin: 32px 24px 0;
  font-size: 1em;
  background-color: rgba(0, 0, 55, 0.08);
  transition: background-color 0.3s;
  border-radius: 3px;

import React from 'react';
import { styled } from 'linaria/react';

import NavLink from './NavLink';

const Wrapper = styled.nav`
  background: #fff;
  position: relative;

  @media (max-width: 768px) {
    overflow-x: auto;
    width: 100%
    border-bottom: 1px solid #e0d6eb;
  }

  @media (min-width: 769px) {
    writing-mode: vertical-lr;
  }
`;

const List = styled.ul`
  margin: 0;