estoy creando un botón de menú y un botón de tema, pero cuando presiono el botón de menú no funciona desde el primer clic, necesita dos clics, pero el botón de tema funciona correctamente, lo que quiero es hacer el menú el botón funciona desde el primer clic

 <script> function initate() { var style1 = document.getElementById("themeicon"); var logo = document.getElementById("logimg"); let root = document.documentElement; var x = document.getElementById('togglebtn'); var icon = document.getElementById('menuicon'); let toggleclk = document.getElementById('toggle'); style1.onclick = function () { if(style1.className == "far fa-moon"){ root.style.setProperty('--black1','#111'); root.style.setProperty('--submit-border','#352418'); root.style.setProperty('--submit-border-btm','#352418'); root.style.setProperty('--light-grey','#111'); root.style.setProperty('--light-grey2','#222'); } else{ root.style.setProperty('--black1','whitesmoke'); root.style.setProperty('--black2','whitesmoke'); root.style.setProperty('--black3','#fff'); root.style.setProperty('--submit-border-btm','#91603eea'); root.style.setProperty('--light-grey','lightgrey'); root.style.setProperty('--light-grey2','lightgrey'); root.style.setProperty('--box-bg','whitesmoke'); } } toggleclk.onclick = function() { if (x.style.transform == "translate(130%, -160%)") { x.style.transform = "translate(130%, 1%)"; x.style.opacity = "1"; root.style.setProperty('--transform-before', 'rotate(45deg)'); root.style.setProperty('--transform-after', 'rotate(-45deg)'); root.style.setProperty('--transform-span', 'scaleX(0)'); } else { x.style.transform = "translate(130%, -160%)"; x.style.opacity = "0"; root.style.setProperty('--transform-before', ' translateY(-10px)'); root.style.setProperty('--transform-after', ' translateY(10px)'); root.style.setProperty('--transform-span', ' translateY(0)'); } } } window.onload = initate; </script>

Cuál es el problema