layout

本文档页面构建使用的布局套路

• --width-aside 侧边宽度 全局变量
• aside[data-float] 侧边悬浮
• aside[data-collapsed] 塌陷侧边（带过渡）
• aside[data-folded] 折叠侧边

## watermark

添加 na-watermark 类名的元素即可拥有一个 ::after 水印图层

这个页面充满了水印

全局变量 --opacity-watermark 水印调整透明度（默认0.5）

## menu

本文档的左侧菜单利用了这个，但是使用的 details>summary

结合 details[name] 属性可以在不写JavaScript的情况下保持只有一个子菜单展开

在之前的实现是 ul>li

• li.na-menu-submenu[data-folded] 标记当前折叠的子菜单
  • [data-selected] 标记当前选中的叶子

• 叶子-0
• 分类-1
  • 叶子-1-1
  • 叶子-1-2
• 分类-2
  • 叶子-2-1
  • 叶子-2-2

全局变量 --color-menu 可以自定义菜单主题颜色RGB值

以下全局变量控制内边距

• --padding-horizonal-menu-item 纵向内边距
• --padding-vertical-menu-item 横向内边距