Docusaurus 2 如何在移动端视图Navbar右侧添加按钮导航项

需要在Docusaurus站点移动端视图的导航栏右侧，添加按钮样式的导航项（最常见场景是放置GitHub入口链接），预期效果参考下图：

在docusaurus.config.js中未找到对应的原生配置项，当前使用的导航栏配置代码如下：

navbar: {
        items: [
          { to: "/docs/get-started", label: "HOME", position: "left" },
          { to: "/docs/get-started", label: "GET STARTED", position: "left" },
          { to: "/docs/learn", label: "LEARN", position: "left" },
          { to: "/docs/api", label: "API", position: "left" },
          {
            href: "https://dev.to/nucleoid",
            label: "BLOG",
            position: "left",
          },
          {
            href: "https://github.com/NucleoidJS/Nucleoid",
            html: require("fs").readFileSync("./github.html", "utf8"),
            position: "right",
          },
        ],
      },

Docusaurus原生导航栏配置默认会把所有position: "right"的导航项，在移动端视图下全部收进汉堡展开菜单里，要实现固定在移动端导航栏右侧的按钮效果，不用修改框架核心逻辑，通过自定义CSS即可实现，步骤如下：

• 首先修改现有导航栏配置，给要放在右侧的GitHub导航项加一个自定义类名，方便后续样式定位：

{
  href: "https://github.com/NucleoidJS/Nucleoid",
  html: require("fs").readFileSync("./github.html", "utf8"),
  position: "right",
  className: "navbar-github-btn" // 新增自定义类名
}

• 打开站点的自定义样式文件，默认路径为src/css/custom.css，添加以下样式代码：

/* Docusaurus默认移动端断点为996px，如果你自定义过断点请同步修改这个值 */
@media screen and (max-width: 996px) {
  /* 隐藏侧边汉堡菜单里重复的GitHub按钮，避免出现两个入口 */
  .navbar-sidebar .navbar-github-btn {
    display: none;
  }
  /* 将顶部导航栏的GitHub按钮固定到右侧，预留出汉堡按钮的位置避免重叠 */
  .navbar .navbar-github-btn {
    position: absolute;
    right: 3.2rem;
    top: 50%;
    transform: translateY(-50%);
  }
  /* 给导航栏内容区加右侧内边距，防止按钮和导航标题挤在一起 */
  .navbar__inner {
    padding-right: 4rem;
  }
}

• 如果需要调整按钮样式匹配设计效果，直接给.navbar-github-btn类添加对应样式即可，比如加边框、圆角、hover效果：

.navbar-github-btn {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  transition: all 0.2s ease;
}
.navbar-github-btn:hover {
  border-color: var(--ifm-color-primary);
  background: var(--ifm-color-primary-contrast-background);
}

提示：如果需要加多个固定在移动端右侧的按钮，只要给对应导航项都加上自定义类名，逐个调整right属性的数值错开位置即可。

内容的提问来源于stack exchange，提问作者Can Mingir