feat: add option to hide region name in navigation bar

Add SHOW_REGION_NAME_IN_NAV_BAR build-time configuration to control
whether the region name text is displayed in the navigation bar.
This helps conserve horizontal space on mobile devices.

- Defaults to true for backwards compatibility
- Logo alt text still uses region name for accessibility
- Uses Vite's define feature to expose non-prefixed env var

Closes #291

Author: aaronbrethorst

.env.example

@@ -17,6 +17,9 @@ PUBLIC_OBA_REGION_CENTER_LAT=47.60728155903877
 PUBLIC_OBA_REGION_CENTER_LNG=-122.3339240843084
 PUBLIC_OBA_REGION_NAME="Puget Sound"
 
+# Set to "false" to hide the region name text in the navigation bar
+SHOW_REGION_NAME_IN_NAV_BAR=true
+
 PUBLIC_OBA_SERVER_URL="https://api.pugetsound.onebusaway.org/"
 
 PUBLIC_OTP_SERVER_URL=""

src/components/navigation/Header.svelte

@@ -9,6 +9,8 @@
 	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 	import MobileMenu from './MobileMenu.svelte';
 
+	const showRegionName = __SHOW_REGION_NAME_IN_NAV_BAR__;
+
 	let isMobileMenuOpen = $state(false);
 	let shouldShowMobile = $state(false);
 	let navContainer;
@@ -107,9 +109,11 @@
 			<a href="/" class="block">
 				<img src={PUBLIC_OBA_LOGO_URL} alt={PUBLIC_OBA_REGION_NAME} class="h-10 rounded-sm" />
 			</a>
-			<a href="/" class="block text-xl font-extrabold text-brand-foreground">
-				{PUBLIC_OBA_REGION_NAME}
-			</a>
+			{#if showRegionName}
+				<a href="/" class="block text-xl font-extrabold text-brand-foreground">
+					{PUBLIC_OBA_REGION_NAME}
+				</a>
+			{/if}
 		</div>
 	</div>
 

src/components/navigation/__tests__/Header.test.js

@@ -9,6 +9,9 @@ vi.mock('$env/static/public', () => ({
 	PUBLIC_NAV_BAR_LINKS: '{"Home": "/", "About": "/about"}'
 }));
 
+// Set default value for the global define
+globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = true;
+
 // Mock ThemeSwitcher component
 vi.mock('$lib/ThemeSwitch/ThemeSwitcher.svelte', () => ({
 	default: () => '<div data-testid="theme-switcher">Theme Switcher</div>'
@@ -131,3 +134,44 @@ describe('Header', () => {
 		expect(textLink).toHaveClass('block', 'text-xl', 'font-extrabold');
 	});
 });
+
+describe('Header with region name hidden', () => {
+	beforeEach(() => {
+		globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = false;
+
+		// Mock ResizeObserver
+		global.ResizeObserver = vi.fn().mockImplementation(() => ({
+			observe: vi.fn(),
+			unobserve: vi.fn(),
+			disconnect: vi.fn()
+		}));
+	});
+
+	afterEach(() => {
+		globalThis.__SHOW_REGION_NAME_IN_NAV_BAR__ = true;
+		vi.restoreAllMocks();
+	});
+
+	test('hides region name text when config is false', () => {
+		render(Header);
+
+		// Region name text should not be present
+		expect(screen.queryByText('Test Region')).not.toBeInTheDocument();
+	});
+
+	test('logo alt text still uses region name for accessibility', () => {
+		render(Header);
+
+		// Logo should still have the region name as alt text
+		const logo = screen.getByRole('img');
+		expect(logo).toHaveAttribute('alt', 'Test Region');
+	});
+
+	test('only logo link exists when region name is hidden', () => {
+		render(Header);
+
+		// Should only have one link for the logo
+		const links = screen.getAllByRole('link', { name: /test region/i });
+		expect(links).toHaveLength(1);
+	});
+});

vite.config.js

@@ -1,9 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineConfig } from 'vitest/config';
+import dotenv from 'dotenv';
+
+dotenv.config();
 
 export default defineConfig({
 	plugins: [sveltekit(), svelteTesting()],
+	define: {
+		__SHOW_REGION_NAME_IN_NAV_BAR__: JSON.stringify(
+			process.env.SHOW_REGION_NAME_IN_NAV_BAR !== 'false'
+		)
+	},
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],
 		coverage: {