feat(header): show Layout switcher only in DEMO mode (#451)

The Layout combobox in the header is now only visible in DEMO mode.
For deployed sites (non-DEMO), layout switching remains available
only through Settings.

- Add isDemoMode() condition in NavigationControls
- Add isDemoMode() condition in mobile header
- Layout switcher remains accessible via Settings in all modes

Author: evereq

components/header/index.tsx

@@ -29,6 +29,7 @@ import { useSurveysEnabled } from '@/hooks/use-surveys-enabled';
 import { useTagsEnabled } from '@/hooks/use-tags-enabled';
 import { useHeaderSettings } from '@/hooks/use-header-settings';
 import { useCategoriesExists } from '@/hooks/use-categories-exists';
+import { isDemoMode } from '@/lib/utils';
 
 interface NavigationItem {
 	key: string;
@@ -171,6 +172,7 @@ export default function Header() {
 	const { tagsEnabled } = useTagsEnabled();
 	const { settings: headerSettings } = useHeaderSettings();
 	const { data: categoriesData, isLoading: categoriesLoading } = useCategoriesExists();
+	const isDemo = isDemoMode();
 
 	const t = useTranslations('common');
 	const tListing = useTranslations('listing');
@@ -371,7 +373,7 @@ export default function Header() {
 					)}
 
 					<div className={STYLES.mobileControls}>
-						{headerSettings.layoutEnabled && (
+						{headerSettings.layoutEnabled && isDemo && (
 							<div className="py-2 flex justify-center">
 								<div className="scale-90 sm:scale-95 md:scale-100 transition-transform duration-200">
 									<LayoutSwitcher inline />

components/navigation-controls.tsx

@@ -1,22 +1,24 @@
-"use client";
+'use client';
 
-import { LanguageSwitcher } from "./language-switcher";
-import { ThemeToggler } from "./theme-toggler";
-import { LayoutSwitcher } from "./layout-switcher";
-import { useHeaderSettings } from "@/hooks/use-header-settings";
+import { LanguageSwitcher } from './language-switcher';
+import { ThemeToggler } from './theme-toggler';
+import { LayoutSwitcher } from './layout-switcher';
+import { useHeaderSettings } from '@/hooks/use-header-settings';
+import { isDemoMode } from '@/lib/utils';
 
 export function NavigationControls() {
-  const { settings } = useHeaderSettings();
+	const { settings } = useHeaderSettings();
+	const isDemo = isDemoMode();
 
-  return (
-    <div className="flex items-center gap-2 md:gap-3 transition-all duration-300">
-      {settings.layoutEnabled && (
-        <div className="hidden sm:block">
-          <LayoutSwitcher inline={false} />
-        </div>
-      )}
-      {settings.languageEnabled && <LanguageSwitcher />}
-      {settings.themeEnabled && <ThemeToggler />}
-    </div>
-  );
+	return (
+		<div className="flex items-center gap-2 md:gap-3 transition-all duration-300">
+			{settings.layoutEnabled && isDemo && (
+				<div className="hidden sm:block">
+					<LayoutSwitcher inline={false} />
+				</div>
+			)}
+			{settings.languageEnabled && <LanguageSwitcher />}
+			{settings.themeEnabled && <ThemeToggler />}
+		</div>
+	);
 }