Heimdall 美化，兼容手机端的菜单栏隐藏及图标毛玻璃效果

主要功能

1. 图标增加毛玻璃效果
   • 代码会强制将图标背景色改为透明，删除相关CSS代码即可恢复。
2. 通过点击，切换菜单隐藏与显示
   • 网上大部分方案是鼠标移入时显示菜单栏。
   • 但这种方式在移动端是没法操作的，故改成了点击的方式。
3. 这些代码都没有做兼容
   • 手机端和常规的浏览器一般是没问题的。
   • 但如果是IE或比较低版本的浏览器可能会出现菜单无法打开的情况。
   • 如果菜单来无法打开，建议换手机或高版本的浏览器，删除JavaScript和CSS代码来恢复。

自定义 CSS

/* 图标效果 */
.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;
}

/* 导航栏隐藏 */
#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;
}

自定义 JavaScript

// 按钮区容器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);