fix: hiddenNavBar: auto should work

e2e/fixtures/hide-nav-bar/doc/index.mdx

@@ -0,0 +1,99 @@
+---
+pageType: custom
+---
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT
+
+A LOT OF CONTENT

e2e/fixtures/hide-nav-bar/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@rspress-fixture/rspress-hide-nav-bar",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.17"
+  }
+}

e2e/fixtures/hide-nav-bar/rspress-hide-auto.config.ts

@@ -0,0 +1,13 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  route: {
+    cleanUrls: true,
+  },
+  themeConfig: {
+    hideNavbar: 'auto',
+    nav: [],
+  },
+});

e2e/fixtures/hide-nav-bar/rspress.config.ts

@@ -0,0 +1,13 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  route: {
+    cleanUrls: true,
+  },
+  themeConfig: {
+    hideNavbar: 'never',
+    nav: [],
+  },
+});

e2e/fixtures/hide-nav-bar/tsconfig.json

@@ -0,0 +1 @@
+{}

e2e/tests/hide-nav-bar.test.ts

@@ -0,0 +1,55 @@
+import { expect, type Page, test } from '@playwright/test';
+import path from 'node:path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+async function isNavBarVisible(page: Page): Promise<boolean> {
+  const nav = await page.$('.rspress-nav');
+  const className: string = await nav?.evaluate(el => el.className);
+
+  return !className.includes('hidden');
+}
+
+async function scrollDown(page: Page) {
+  // Simulate the scrolling of people
+  await page.mouse.wheel(0, 100);
+  await page.waitForTimeout(100);
+  await page.mouse.wheel(0, 100);
+  await page.waitForTimeout(100);
+}
+
+test.describe('basic test', async () => {
+  let appPort;
+  let app;
+  async function launchApp(configFile: string) {
+    const appDir = path.join(fixtureDir, 'hide-nav-bar');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort, configFile);
+  }
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('hideNavBar: "auto" should work', async ({ page }) => {
+    await launchApp('./rspress-hide-auto.config.ts');
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await scrollDown(page);
+    expect(await isNavBarVisible(page)).toBeFalsy();
+  });
+
+  test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({
+    page,
+  }) => {
+    await launchApp('./rspress.config.ts');
+    await page.setViewportSize({ width: 375, height: 812 });
+
+    await page.goto(`http://localhost:${appPort}/`);
+
+    await scrollDown(page);
+    expect(await isNavBarVisible(page)).toBeTruthy();
+  });
+});

e2e/tests/nav-link-item-with-hash.test.ts

@@ -42,36 +42,4 @@ test.describe('basic test', async () => {
     await page.getByRole('link', { name: 'PageC' }).click();
     await expect(page.locator('.rspress-nav-screen')).not.toBeVisible();
   });
-
-  test('Navbar should be visible on mobile when we scroll down with hideNavbar to never', async ({
-    page,
-  }) => {
-    await page.setViewportSize({ width: 375, height: 812 });
-
-    await page.goto(`http://localhost:${appPort}/`);
-
-    await page.evaluate(() => {
-      window.scrollBy(0, 800);
-    });
-
-    // Allow to check if the rspress-nav is in the viewport
-    // toBeVisible() doesn't work here because it check the visibility and the display property
-    const isInViewport = await page.evaluate(sel => {
-      const element = document.querySelector(sel);
-
-      if (!element) return false;
-
-      const rect = element.getBoundingClientRect();
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <=
-          (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <=
-          (window.innerWidth || document.documentElement.clientWidth)
-      );
-    }, '.rspress-nav');
-
-    expect(isInViewport).toBeTruthy();
-  });
 });

e2e/utils/runCommands.ts

@@ -9,18 +9,19 @@ export interface CommandOptions {
   env: Record<string, string>;
 }
 
-export type Command = 'dev' | 'build' | 'preview';
+export type Command = 'dev' | `dev -- -c ${string}` | 'build' | 'preview';
 
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export async function runCommand(
+export async function runNpmScript(
   commandName: Command,
   options: CommandOptions,
 ) {
+  const command = commandName.split(' ')[0];
   return new Promise((resolve, reject) => {
-    const instance = spawn('npm', ['run', commandName], {
+    const instance = spawn('npm', ['run', ...commandName.split(' ')], {
       cwd: options.appDir,
       env: {
         TEST: '1',
@@ -45,7 +46,7 @@ export async function runCommand(
         build: /Pages rendered/,
       };
 
-      if (bootupMarkers[commandName].test(message)) {
+      if (bootupMarkers[command].test(message)) {
         if (!didResolve) {
           didResolve = true;
           resolve(instance);
@@ -80,8 +81,12 @@ export async function runCommand(
   });
 }
 
-export async function runDevCommand(appDir: string, port: number) {
-  return runCommand('dev', {
+export async function runDevCommand(
+  appDir: string,
+  port: number,
+  configFile?: string,
+) {
+  return runNpmScript(configFile ? `dev -- -c ${configFile}` : 'dev', {
     appDir,
     env: {
       PORT: port.toString(),
@@ -90,14 +95,14 @@ export async function runDevCommand(appDir: string, port: number) {
 }
 
 export async function runBuildCommand(appDir: string) {
-  return runCommand('build', {
+  return runNpmScript('build', {
     appDir,
     env: {},
   });
 }
 
 export async function runPreviewCommand(appDir: string, port: number) {
-  return runCommand('preview', {
+  return runNpmScript('preview', {
     appDir,
     env: {
       PORT: port.toString(),

packages/theme-default/src/components/Nav/index.tsx

@@ -128,6 +128,9 @@ export function Nav(props: NavProps) {
 
   const computeNavPosition = () => {
     // On doc page we have the menu bar that is already sticky
+    if (!isMobile) {
+      return 'sticky';
+    }
     if (siteData.themeConfig.hideNavbar === 'never' && page.pageType !== 'doc')
       return 'sticky';