スマホメニューの開閉部分をjavascriptで判定させたい

現在スマホメニューの作成をjQueryを使わず、javascriptのみで行っています。

下記のようなコードを書いたのですが、開閉メニューを閉じる時の挙動がうまくいきません。

HTML

<nav id="menu">
					<div id="menuIcon">
						<span></span>
						<span></span>
						MENU
					</div>
					<ul>
						<li><a href="">一般住宅</a></li>
						<li><a href="">リフォーム</a></li>
						<li><a href="">リノベーション</a></li>
						<li><a href="">その他事業</a></li>
						<li><a href="">会社概要</a></li>
						<li><a href="">お問い合わせ</a></li>
					</ul>
				</nav>

<script>
		const menu = document.querySelector('#menu ul');
		const menuIcon = document.getElementById('menuIcon');
		const result = menu.classList.contains('visible');

		if(result === true){
			menuIcon.addEventListener('click', function(){
			menu.classList.remove('visible');
		});
	} else {
		menuIcon.addEventListener('click', function(){
			menu.classList.add('visible');
		});
	}

	</script>

SCSS

@media (max-width: 767px){
	.visible{
		display: block !important;
	}
	nav#menu{
		background-color: $brown;
		display: block;
		#menuIcon{
			color: #fff;
			cursor: pointer;
		}
		ul{
			padding-left: 0;
			display: none;
		}
		li{
			display: block;
			text-align: center;
			padding-bottom: 8px;
			padding-right: 0;
			margin-bottom: 8px;
			a{
				color: #fff;
			}
		}
	}
}

menuIconを押すと、ul部分が現れ、もう一回menuIconを押すと、ul部分を閉じる。
というような形にしたいのですが、開く事は出来ても閉じることができません。

chromeのconsoleにもエラーが出ないので、どうしたらよいか分かりません。
ご教示お願いします。