windowサイズの切り替わりでのクラス追加

Question

初めて質問させていただきます。かなりの初心者ですので、
上手く質問事項等記載できていなかったらすいません。

現在レスポンシブ時のハンバーガーナビゲーションを制作していて、
下記の実装が上手くいかず悩んでます。
＜問題＞
レスポンシブでスマホ時とPC時にメニューバーをcssのクラスで表示非表示を切り替えているが、
スマホ時に表示するハンバーガーアイコンをクリックしたまま画面サイズをPC状態に変更すると
ハンバーガーメニュー部分が非表示に切り替わらないままとどまってしまう。(closeクラスが付与されず表示のままになってしなう)

<やりたいこと>
ハンバーガーアイコンをクリックしてメニューを表示状態のまま画面サイズを変更した際
「1014px」にwindowサイズが変更されたら強制的に非表示にするクラス（close）を追加したい。

html

<header class="SpNav">
    <div class="SpNavIcon" id="SpNavIcon">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <nav class="SpNavMenu close">
        <ul class="SpNavMenuInner">
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="SpNavMenuBg"></div>
    </nav>
</header>

試したこと

const SpNavIcon = document.getElementById('SpNavIcon');
const span = SpNavIcon.children;
const SpNavMenu = document.getElementsByClassName('SpNavMenu');

クリック時の切り替え用-----------------------------------------------
SpNavIcon.addEventListener('click',(el, i) => {
if(SpNavMenu[0].classList.toggle("close") === true){
SpNavMenu[0].classList.add("close");
on.reset();
SpNavMenuBg.reset();
Inner.reset();
}else{
SpNavMenu[0].classList.remove("close");
on.play();
SpNavMenuBg.play();
Inner.play();
};
});

画面変更時用(上手くいかない部分)-----------------------------------------------
(function(){
window.addEventListener( 'resize', () => {
let win = window.width;
let breakPoint = 1014;
if(win > breakPoint){
SpNavMenu[0].classList.add("close");
}
}, false );
});

<追記>
クリック時の切り替え用部分では、「anime.js」を使ってアニメーションを設定し、一緒に実行しています。
jqueryで下記の様に記載した際は上手く反応してくれるのですが、
javascriptで行った際上手く行きませんでした。

jqueryで上手くいった記載----------------------------------------------------
$(function(){
$(window).resize(function(){
var win = $(window).width();
var break = 1014;
if (win > break) {
$('.SpNavMenu').addClass('close');
}
})
});