导航栏根据屏幕宽度动态渲染

我现在有一个导航栏，我想根据用户的屏幕大小动态的渲染出来这些菜单，放不下的就放在更多下拉菜单里

我现在是分了两个数组去存放菜单数据，一个是显示在导航栏上的，一个是放不下隐藏起来的。请问该怎么实现？

menuList: [
        { id: "1", pid: "0", name: "首页", url: "/home", icon: "el-icon-s-home", },
        { id: "3", pid: "0", name: "菜单管理", url: "/menuMangement", icon: "el-icon-s-data", },
        { id: "4", pid: "0", name: "权限管理", url: "/menuAuthority", icon: "el-icon-s-platform", },
        { id: "5", pid: "0", name: "信息栏目维护", url: "/infoMaintenance", icon: "el-icon-s-claim", },
        { id: "6", pid: "0", name: "信息发布", url: "/infoPublish", icon: "el-icon-s-platform", }
      ],
      hideMenu: [
        { id: "2", pid: "0", name: "个人中心", url: "/personalPortal", icon: "el-icon-s-grid", },
        { id: "7", pid: "0", name: "常用联系人维护", url: "/contacts", icon: "el-icon-s-platform", }
      ]

使用媒体查询