diff --git a/apps/admin/src/pages/ThemeSettingsPage.tsx b/apps/admin/src/pages/ThemeSettingsPage.tsx index 2bb208e..3b7ce67 100644 --- a/apps/admin/src/pages/ThemeSettingsPage.tsx +++ b/apps/admin/src/pages/ThemeSettingsPage.tsx @@ -43,6 +43,7 @@ export default function ThemeSettingsPage() { const [scrollRevealEnabled, setScrollRevealEnabled] = useState(true) const [scrollRevealStyle, setScrollRevealStyle] = useState('fade-up') const [scrollRevealDuration, setScrollRevealDuration] = useState('700') + const [headerStyle, setHeaderStyle] = useState('single_line') const fontPreset = resolveFontPreset(themeTokens) @@ -59,6 +60,7 @@ export default function ThemeSettingsPage() { setScrollRevealEnabled(data.scrollRevealEnabled ?? true) setScrollRevealStyle(data.scrollRevealStyle || 'fade-up') setScrollRevealDuration((data.scrollRevealDuration ?? 700).toString()) + setHeaderStyle(data.headerStyle || 'single_line') }) .catch(console.error) .finally(() => setLoading(false)) @@ -76,6 +78,7 @@ export default function ThemeSettingsPage() { scrollRevealEnabled, scrollRevealStyle, scrollRevealDuration: parseInt(scrollRevealDuration) || 700, + headerStyle, }), }) if (res.ok) alert('Saved successfully!') @@ -132,6 +135,66 @@ export default function ThemeSettingsPage() { + {/* Header Layout Style */} +
+
+
🧭
+
+

PC Header Layout Style

+

เลือกรูปแบบการจัดวางเมนูส่วนหัวหลักสำหรับหน้าจอแนวกว้าง (PC / Desktop View)

+
+
+ +
+ + + +
+
+ {/* Scroll Reveal */}
diff --git a/apps/backend/prisma/migrations/20260726220219_add_header_style_to_store_settings/migration.sql b/apps/backend/prisma/migrations/20260726220219_add_header_style_to_store_settings/migration.sql new file mode 100644 index 0000000..f2ef065 --- /dev/null +++ b/apps/backend/prisma/migrations/20260726220219_add_header_style_to_store_settings/migration.sql @@ -0,0 +1,2 @@ +-- AlterTable +ALTER TABLE "StoreSettings" ADD COLUMN "headerStyle" TEXT NOT NULL DEFAULT 'single_line'; diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma index 2b82ed6..0329069 100644 --- a/apps/backend/prisma/schema.prisma +++ b/apps/backend/prisma/schema.prisma @@ -278,6 +278,7 @@ model StoreSettings { scrollRevealEnabled Boolean @default(true) scrollRevealStyle String @default("fade-up") scrollRevealDuration Int @default(700) + headerStyle String @default("single_line") translations StoreSettingsTranslation[] updatedAt DateTime @updatedAt } diff --git a/apps/backend/src/routes/settings.ts b/apps/backend/src/routes/settings.ts index 079ff47..0d3c5c0 100644 --- a/apps/backend/src/routes/settings.ts +++ b/apps/backend/src/routes/settings.ts @@ -151,6 +151,7 @@ export const settingsRoute = new Elysia({ prefix: "/settings" }) scrollRevealEnabled: t.Optional(t.Boolean()), scrollRevealStyle: t.Optional(t.String()), scrollRevealDuration: t.Optional(t.Number()), + headerStyle: t.Optional(t.String()), }) }) .patch("/translations", async ({ body, set }) => { diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx index 3352fd3..53adec5 100644 --- a/apps/website/src/components/Navbar.tsx +++ b/apps/website/src/components/Navbar.tsx @@ -215,12 +215,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n return () => mediaQuery.removeEventListener('change', updateDesktopMenu) }, []) + const isTwoTier = settings?.headerStyle === 'two_tier' + return ( <> {isClientReady && mobileOpen && ( diff --git a/packages/types/index.ts b/packages/types/index.ts index a7703f1..ff7cbb1 100644 --- a/packages/types/index.ts +++ b/packages/types/index.ts @@ -193,6 +193,7 @@ export interface StoreSettings { scrollRevealEnabled?: boolean | null scrollRevealStyle?: string | null scrollRevealDuration?: number | null + headerStyle?: 'single_line' | 'two_tier' | string | null } export interface FooterBrand {