initial

Author: arielvino

src/layout/sidebar/menu/Menu.tsx

@@ -1,13 +1,17 @@
+import { DatasetTwoTone, GroupsTwoTone } from '@mui/icons-material'
 import {
   List,
   ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
+  Tab,
+  Tabs,
   Tooltip,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
+import type { ParseKeys } from 'i18next'
 import React, { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link, useLocation } from 'react-router'
@@ -24,28 +28,49 @@ type MainMenuProps = {
   compact?: boolean
 }
 
-const MENU_GROUPS = [
+type MenuSection = {
+  key: ParseKeys
+  icon: React.ReactElement
+  groups: { key?: ParseKeys; paths: string[] }[]
+}
+
+/* The nav splits along the site's two halves: the data you came to look at, and the
+   people who collect it. They aren't peers — data pages are working surfaces you move
+   between mid-task, community pages are read-once destinations — so tabbing them keeps
+   the working set short while promoting "about"/"donate" from a subheading buried
+   two-thirds down the list to one of two always-visible labels. */
+const MENU_SECTIONS: MenuSection[] = [
   {
-    key: 'menu_group_analysis',
-    paths: [
-      '/single-line-map',
-      '/timeline',
-      '/gaps',
-      '/gaps_patterns',
-      '/operator',
-      '/vehicle',
-      '/train',
+    key: 'menu_section_data',
+    icon: <DatasetTwoTone />,
+    groups: [
+      {
+        key: 'menu_group_analysis',
+        paths: [
+          '/single-line-map',
+          '/timeline',
+          '/gaps',
+          '/gaps_patterns',
+          '/operator',
+          '/vehicle',
+          '/train',
+        ],
+      },
+      { key: 'menu_group_maps', paths: ['/map', '/velocity-heatmap'] },
     ],
   },
   {
-    key: 'menu_group_maps',
-    paths: ['/map', '/velocity-heatmap'],
-  },
-  {
-    key: 'menu_group_community',
-    paths: ['/public-appeal', '/about', '/donate'],
+    key: 'menu_section_community',
+    icon: <GroupsTwoTone />,
+    // One unnamed group: inside a tab already labelled "community", a "community"
+    // subheader is noise.
+    groups: [{ paths: ['/public-appeal', '/about', '/donate'] }],
   },
-] as const
+]
+
+const sectionOfPath = (pathname: string): ParseKeys | undefined =>
+  MENU_SECTIONS.find((section) => section.groups.some((group) => group.paths.includes(pathname)))
+    ?.key
 
 // antd's menu blues, kept as they were so the selected row survives the port unchanged
 const SELECTED_COLORS = {
@@ -59,29 +84,70 @@ const ROW_HEIGHT = { compact: 36, roomy: 44 }
    drawer scroll rather than shrink past it. */
 const MIN_ROW_HEIGHT = { compact: 28, roomy: 32 }
 
+/* Owns the padding and splits the height: the tab strip is fixed overhead (like the
+   subheaders), and the section list takes whatever is left. */
+const MenuShell = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'compact',
+})<Pick<MainMenuProps, 'compact'>>(({ compact }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  boxSizing: 'border-box',
+  padding: compact ? '4px 8px 8px' : '8px 10px 12px',
+}))
+
+/* Deliberately NOT the rows' selected treatment: a tab picks which list you are looking
+   at, a row picks which page is open. Giving both the same filled pill made the strip read
+   as two more menu rows, so the tabs take the conventional underline instead, over a rule
+   that reads as the top edge of the list they control. The accent is the theme's primary
+   rather than the rows' antd blue, which keeps the two states visibly different. */
+const SectionTabs = styled(Tabs, {
+  shouldForwardProp: (prop) => prop !== 'compact',
+})<Pick<MainMenuProps, 'compact'>>(({ theme, compact }) => ({
+  flex: '0 0 auto',
+  minHeight: 0,
+  marginBottom: compact ? 6 : 8,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  '& .MuiTabs-indicator': { height: 2 },
+  '& .MuiTab-root': {
+    flex: 1,
+    minWidth: 0,
+    minHeight: compact ? 34 : 40,
+    padding: '4px 8px',
+    fontSize: 13,
+    fontWeight: 500,
+    textTransform: 'none',
+    color: theme.palette.text.secondary,
+    '& .MuiSvgIcon-root': { fontSize: 20 },
+    '&.Mui-selected': { color: theme.palette.primary.main, fontWeight: 700 },
+  },
+}))
+
 /**
- * Auto-fit: the list is a flex column sized to whatever holds it — the sider on desktop,
- * the drawer body on mobile — so the rows absorb the available height and shrink from
- * ROW_HEIGHT toward MIN_ROW_HEIGHT on a short viewport instead of overflowing. Past that
- * floor the container's own overflow scrolls.
+ * Auto-fit: the section list is a flex column sized to whatever the shell leaves it, so
+ * the rows absorb the available height and shrink from ROW_HEIGHT toward MIN_ROW_HEIGHT on
+ * a short viewport instead of overflowing. Past that floor the list scrolls, which keeps
+ * the tab strip pinned above it.
  *
- * Every row is a flex item of this one container — the group headings are siblings rather
- * than nested lists — so all rows carry the same shrink weight and stay the same height as
- * each other. Spacing is `gap`, not margins: margins don't shrink, and would pin the rows
- * above their flex basis.
+ * Every row is a flex item of one container — the group headings are siblings rather than
+ * nested lists — so all rows carry the same shrink weight and stay the same height as each
+ * other. Spacing is `gap`, not margins: margins don't shrink, and would pin the rows above
+ * their flex basis.
  */
 const NavList = styled(List, {
   shouldForwardProp: (prop) => prop !== 'compact' && prop !== 'collapsed',
 })<MainMenuProps>(({ theme, compact, collapsed }) => {
   const density = compact ? 'compact' : 'roomy'
 
   return {
-    padding: compact ? '4px 8px 8px' : '8px 10px 12px',
+    padding: 0,
     display: 'flex',
     flexDirection: 'column',
     gap: 2,
-    height: '100%',
     boxSizing: 'border-box',
+    flex: '1 1 auto',
+    minHeight: 0,
+    overflow: 'auto',
 
     '& .MuiListSubheader-root': {
       // Fixed overhead — only the rows shrink, so the headings stay lean: on a phone three
@@ -133,6 +199,21 @@ const MainMenu = ({ collapsed = false, compact = false }: MainMenuProps) => {
   const [isDonateModalVisible, setDonateModalVisible] = useState(false)
   const { pathname } = useLocation()
 
+  const [sectionKey, setSectionKey] = useState(
+    () => sectionOfPath(pathname) ?? MENU_SECTIONS[0].key,
+  )
+  /* The tab tracks the URL, but is switchable on its own too — you can browse the
+     community list while a data page stays open — so it can't be a plain derivation of
+     pathname. Adjusting during render rather than in an effect keeps a cross-section
+     navigation (a link in the page body to /about) from painting the old tab for a frame. */
+  const [lastPathname, setLastPathname] = useState(pathname)
+  if (pathname !== lastPathname) {
+    setLastPathname(pathname)
+    const next = sectionOfPath(pathname)
+    if (next && next !== sectionKey) setSectionKey(next)
+  }
+  const section = MENU_SECTIONS.find(({ key }) => key === sectionKey) ?? MENU_SECTIONS[0]
+
   // src/routes imports the layout, so PAGES is still in its temporal dead zone while
   // this module initializes — the lookup has to be built at render time.
   const pageByPath = new Map<string, (typeof PAGES)[number]>(PAGES.map((page) => [page.path, page]))
@@ -193,17 +274,32 @@ const MainMenu = ({ collapsed = false, compact = false }: MainMenuProps) => {
 
   return (
     <>
-      <NavList className="sidebar-menu" compact={compact} collapsed={collapsed}>
-        {renderItem('/')}
-        {MENU_GROUPS.flatMap(({ key, paths }) => [
-          collapsed ? null : (
-            <ListSubheader key={key} disableSticky>
-              {t(key)}
-            </ListSubheader>
-          ),
-          ...paths.map((path) => renderItem(path)),
-        ])}
-      </NavList>
+      <MenuShell className="sidebar-menu" compact={compact}>
+        <SectionTabs
+          value={section.key}
+          onChange={(_, value: ParseKeys) => setSectionKey(value)}
+          compact={compact}
+          variant="fullWidth"
+          aria-label={t('menu_sections_label')}>
+          {MENU_SECTIONS.map(({ key, icon }) =>
+            collapsed ? (
+              <Tab key={key} value={key} icon={icon} aria-label={t(key)} title={t(key)} />
+            ) : (
+              <Tab key={key} value={key} label={t(key)} />
+            ),
+          )}
+        </SectionTabs>
+        <NavList compact={compact} collapsed={collapsed}>
+          {section.groups.flatMap(({ key, paths }) => [
+            key && !collapsed ? (
+              <ListSubheader key={key} disableSticky>
+                {t(key)}
+              </ListSubheader>
+            ) : null,
+            ...paths.map((path) => renderItem(path)),
+          ])}
+        </NavList>
+      </MenuShell>
       <DonateModal isVisible={isDonateModalVisible} onClose={() => setDonateModalVisible(false)} />
     </>
   )

src/locale/ar.json

@@ -161,7 +161,7 @@
   "menu_group_get_started": "البداية",
   "menu_group_analysis": "تحليل الرحلات",
   "menu_group_maps": "الخرائط",
-  "menu_group_community": "المجتمع",
+  "menu_section_community": "المجتمع",
   "report_a_bug_title": "الإبلاغ عن خطأ",
   "how_to_donate_title": "كيف أتبرّع؟",
   "how_to_donate_text": "خلف الكواليس يعمل فريق صغير ومتفانٍ، يهتمّ بتنظيم لقاءات التطوير والهاكاثونات وصيانة السيرڤرات، يتنقّل بين المكاتب الحكومية للإقناع والضغط والمساعدة على إصدار المزيد من قواعد البيانات؛ يتأكّد من أنّ الإعلام يعرف عملنا ويعرف كيف يتواصل معنا للحصول على البيانات والتحليلات، ويقوم بالكثير من العمل الجاري حتّى تُحدِث مشاريعنا تغييراً في العالم. نحن بحاجة لدعم المجتمع للاستمرار في العمل من أجل حكومة أكثر انفتاحاً. كونوا فرسان الشفافية وانضمّوا للدعم الشهري.",

src/locale/en.json

@@ -191,7 +191,9 @@
   "menu_group_get_started": "Get Started",
   "menu_group_analysis": "Trip Analysis",
   "menu_group_maps": "Maps",
-  "menu_group_community": "Community",
+  "menu_section_data": "Data",
+  "menu_section_community": "Community",
+  "menu_sections_label": "Menu sections",
   "report_a_bug_title": "Report a bug",
   "how_to_donate_title": "How can I donate?",
   "how_to_donate_text": "Behind the scenes of the projects is a small, dedicated team that takes care of organizing development and hackathon meetings and server maintenance, which has its feet between government offices to persuade, press, and swing to release more and more repositories; Make sure the media knows our work and also knows how to contact us for data and analytics, and does a lot of ongoing work to make our projects change in the world. We need community support to continue to work for a more open government. There were knights of transparency and joined in monthly support.",

src/locale/he.json

@@ -191,7 +191,9 @@
   "menu_group_get_started": "התחלה",
   "menu_group_analysis": "ניתוח נסיעות",
   "menu_group_maps": "מפות",
-  "menu_group_community": "קהילה",
+  "menu_section_data": "נתונים",
+  "menu_section_community": "קהילה",
+  "menu_sections_label": "מדורי התפריט",
   "report_a_bug_title": "דיווח על באג",
   "how_to_donate_title": "כיצד לתרום?",
   "how_to_donate_text": "מאחורי הקלעים של הפרוייקטים פועל צוות קטן ומסור, שדואג לארגון מפגשי הפיתוח וההאקתונים ותחזוקת השרתים, שמכתת רגליו בין משרדי ממשלה כדי לשכנע, ללחוץ, ולנדנד לשחרר עוד ועוד מאגרים; מוודא שהתקשורת תכיר את העבודה שלנו וגם תדע לפנות אלינו בשביל נתונים וניתוחים, ועושה עוד המון עבודה שוטפת כדי שהפרוייקטים שלנו ייצרו שינוי בעולם. אנחנו זקוקים לתמיכה של הקהילה כדי להמשיך ולפעול למען ממשל פתוח יותר. היו אבירי שקיפות והצטרפו בתמיכה חודשית.",

src/locale/ru.json

@@ -161,7 +161,7 @@
   "menu_group_get_started": "Начало",
   "menu_group_analysis": "Анализ поездок",
   "menu_group_maps": "Карты",
-  "menu_group_community": "Сообщество",
+  "menu_section_community": "Сообщество",
   "report_a_bug_title": "Сообщить об ошибке",
   "how_to_donate_title": "Как я могу пожертвовать?",
   "how_to_donate_text": "За кулисами проектов стоит небольшая, преданная команда, которая заботится об организации встреч по разработке и хакатонов и обслуживании серверов, которая ставит ноги между правительственными офисами, чтобы убеждать, давить и раскачивать для выпуска все больше и больше репозиториев; Убедиться, что СМИ знают нашу работу, а также знают, как связаться с нами для получения данных и аналитики, и делает много постоянной работы, чтобы наши проекты изменились в мире. Нам нужна поддержка сообщества, чтобы продолжать работать для более открытого правительства. Были рыцари прозрачности и присоединились к ежемесячной поддержке.",

tests/menu.spec.ts

@@ -1,26 +1,60 @@
+import { Page } from '@playwright/test'
 import { expect, setupTest, test } from './utils'
 
-const MENU_ITEMS = [
-  'ראשי',
+const DATA_MENU_ITEMS = [
   'מסלול נסיעה',
   'היסטוריית נסיעות',
   'נסיעות שלא בוצעו',
   'דפוסי נסיעות שלא בוצעו',
   'חברה מפעילה',
+  'רכב',
+  'רכבת ישראל',
   'מפת תחבורה',
   'מפת מהירות',
-  'קול קורא',
-  'אודות',
-  'לתרומות',
 ]
 
+const COMMUNITY_MENU_ITEMS = ['קול קורא', 'אודות', 'לתרומות']
+
+const menuLinks = (page: Page) => page.locator('.sidebar-menu:visible').locator('ul > li a')
+
 test.beforeEach(async ({ page }) => {
   await setupTest(page)
 })
 
 test('should display logo and menu items correctly', async ({ page }) => {
   await expect(page.locator('.main-header .header-logo')).toHaveAccessibleName('דאטאבוס')
-  await expect(page.locator('ul > li a')).toContainText(MENU_ITEMS)
+  await expect(menuLinks(page)).toContainText(DATA_MENU_ITEMS)
+})
+
+// The menu carries no "home" row — the header logo is the way back. If that ever stops
+// being a link home, the sidebar has to grow the row back.
+test('the logo is the way back to the homepage', async ({ page }) => {
+  await page.getByRole('tab', { name: 'קהילה' }).click()
+  await page.getByRole('link', { name: 'אודות', exact: true }).click()
+  await expect(page).toHaveURL(/\/about/)
+  await page.locator('.main-header .header-logo').click()
+  await expect(page).toHaveURL((url) => url.pathname === '/')
+})
+
+test('the community tab swaps the list', async ({ page }) => {
+  await page.getByRole('tab', { name: 'קהילה' }).click()
+  await expect(menuLinks(page)).toContainText(COMMUNITY_MENU_ITEMS)
+})
+
+test('the tab follows the open page', async ({ page }) => {
+  await page.getByRole('tab', { name: 'קהילה' }).click()
+  await page.getByRole('link', { name: 'אודות', exact: true }).click()
+  await expect(page).toHaveURL(/\/about/)
+  // Landing on a community page must leave the community tab selected, or the menu
+  // would contradict the URL.
+  await expect(page.getByRole('tab', { name: 'קהילה' })).toHaveAttribute('aria-selected', 'true')
+})
+
+test('a deep link to a community page opens on the community tab', async ({ page }) => {
+  await page.goto('/about')
+  await page.locator('.preloader').waitFor({ state: 'hidden' })
+  await expect(page.getByRole('tab', { name: 'קהילה' })).toHaveAttribute('aria-selected', 'true')
+  await expect(menuLinks(page)).toContainText(COMMUNITY_MENU_ITEMS)
 })
 
 test("the main header doesn't show duplicate icons", async ({ page }) => {

tests/utils.ts

@@ -164,12 +164,29 @@ export const setupTest = async (page: Page, lng: string = 'he') => {
   await page.locator('.preloader').waitFor({ state: 'hidden' })
 }
 
+/**
+ * The sidebar splits its pages across data/community tabs, so a page's link is only in
+ * the DOM while its own tab is selected. Rather than mirror the section table here (which
+ * would need updating every time a page moves between tabs), try each tab until the link
+ * appears.
+ */
+const openSidebarSectionOf = async (page: Page, link: Locator) => {
+  if (await link.count()) return
+  // `:visible` because the sider and the mobile drawer each render a menu, and only one
+  // of them is on screen at a time.
+  for (const tab of await page.locator('.sidebar-menu:visible').getByRole('tab').all()) {
+    await tab.click()
+    if (await link.count()) return
+  }
+}
+
 export const visitPage = async (page: Page, label: (typeof PAGES)[number]['label']) => {
   // Scoped to the nav: the homepage repeats several of these labels on its own link
   // cards, so an unscoped name match would resolve to two elements.
   const link = page
     .locator('.sidebar-menu')
     .getByRole('link', { name: i18next.t(label), exact: true })
+  await openSidebarSectionOf(page, link)
   const href = await link.getAttribute('href')
   // Register waitForURL before clicking to avoid missing fast client-side navigations
   const navigationPromise = href