/* 图标效果 */
.item {
    background-color: transparent !important; /* 强制图标背景透明 */
    transition: all .2s ease-in-out;
    border: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* 鼠标移入时图标放大 */
.item:hover {
    transform: scale(1.02);
    will-change: opacity;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/*字体*/
.details {
    color: #000000;
}
/* 导航栏隐藏 */
#config-buttons {
    transform: translateY(calc(100% - 27px));
    transition: transform 0.25s;
}

#config-buttons.show {
    transform: translateY(0);
    transition: transform 0.25s;
}

#config-buttons > .toggle-button{
    background: rgba(0,0,0,.8);
    text-align: center;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
}

// 按钮区容器DOM
const menuContainer = document.querySelector('#config-buttons');
// localStorage 存储的Key
const storageKey = 'heimdall_isShowMenu';

// 根据存储的信息，设置菜单的显示隐藏
function setMenuClass() {
  const isShowMenu = localStorage.getItem(storageKey) === 'true';

  if (isShowMenu) {
    menuContainer.classList.add('show');
  } else {
    menuContainer.classList.remove('show');
  }
}

setMenuClass();

// 创建切换按钮
const toggleButton = document.createElement('span');
toggleButton.className = 'toggle-button';
toggleButton.appendChild(document.createTextNode('='));

toggleButton.addEventListener('click', function () {
  const isShowMenu = menuContainer.classList.contains('show');
  localStorage.setItem(storageKey, !isShowMenu);
  setMenuClass();
});

// 将切换按钮添加到最上面
const firstButton = menuContainer.firstChild;
menuContainer.insertBefore(toggleButton, firstButton);