スマホでのメニュー表示デザイン・バグ (#405) (#408)

Reviewed-on: #408
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/index.css

@@ -239,6 +239,11 @@ body
   background: var(--top-nav-submenu-bg);
 }
 
+.top-nav-mobile-menu .top-nav-submenu
+{
+  background: var(--top-nav-mobile-active-bg);
+}
+
 .top-nav-mobile-menu
 {
   background: var(--top-nav-mobile-menu-bg);

frontend/src/index.test.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { describe, expect, it } from 'vitest'
+
+
+const indexCss = readFileSync (
+    resolve (process.cwd (), 'src/index.css'),
+    'utf8')
+const compactIndexCss = indexCss.replace (/\s+/g, ' ')
+const mobileActiveRule = '.top-nav-mobile-active {'
+    + ' background: var(--top-nav-mobile-active-bg); }'
+const mobileSubmenuRule = '.top-nav-mobile-menu .top-nav-submenu {'
+    + ' background: var(--top-nav-mobile-active-bg); }'
+
+
+describe ('TopNav mobile menu colours', () => {
+  it ('uses one background variable for active rows and expanded submenus', () => {
+    expect (compactIndexCss).toContain (mobileActiveRule)
+    expect (compactIndexCss).toContain (mobileSubmenuRule)
+  })
+})

frontend/src/lib/settings.test.ts

@@ -89,8 +89,12 @@ describe ('settings', () => {
   })
 
   it ('derives TopNav colours without mixing mobile active backgrounds', () => {
-    expect (buildThemeTokens ('light', { }).topNavMobileActiveBackground).toBe (
+    const tokens = buildThemeTokens ('light', { })
+
+    expect (tokens.topNavMobileActiveBackground).toBe (
 	LIGHT_THEME_TOKENS.topNavRootBackgroundDesktop)
+    expect (tokens.topNavMobileActiveBackground).not.toBe (
+	tokens.topNavRootBackgroundMobile)
     expect (buildThemeTokens ('dark', { }).topNavMobileActiveBackground).toBe (
 	DARK_THEME_TOKENS.topNavActiveBackground)
   })