Skip to content

Commit abb3874

Browse files
author
Boopathi
committed
fix: update header content
1 parent 084485e commit abb3874

File tree

3 files changed

+156
-102
lines changed

3 files changed

+156
-102
lines changed

‎src/app/privacy-policy/page.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,29 @@ export default function PrivacyPolicyPage() {
1515
// This prevents hydration mismatch by rendering the date only on the client.
1616
useEffect(() => {
1717
setLastUpdated(new Date().toLocaleDateString());
18+
19+
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
20+
const initialTheme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
21+
setTheme(initialTheme);
22+
if (initialTheme === 'dark') {
23+
document.documentElement.classList.add('dark');
24+
} else {
25+
document.documentElement.classList.remove('dark');
26+
}
1827
}, []);
1928

29+
useEffect(() => {
30+
if (theme) {
31+
if (theme === 'dark') {
32+
document.documentElement.classList.add('dark');
33+
} else {
34+
document.documentElement.classList.remove('dark');
35+
}
36+
localStorage.setItem('theme', theme);
37+
}
38+
}, [theme]);
39+
40+
2041
// Dummy props for the Header, as it's used statically here and doesn't need to change views.
2142
const headerProps = {
2243
activeView: "home" as const,
@@ -26,6 +47,7 @@ export default function PrivacyPolicyPage() {
2647
theme: theme,
2748
setTheme: (t: 'light' | 'dark') => setTheme(t),
2849
isLoading: false, // Set to false as we are not checking auth status on this page
50+
isStaticPage: true,
2951
};
3052

3153
return (

‎src/app/terms-of-service/page.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,28 @@ export default function TermsOfServicePage() {
1515
// This prevents hydration mismatch by rendering the date only on the client.
1616
useEffect(() => {
1717
setLastUpdated(new Date().toLocaleDateString());
18+
19+
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
20+
const initialTheme = savedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
21+
setTheme(initialTheme);
22+
if (initialTheme === 'dark') {
23+
document.documentElement.classList.add('dark');
24+
} else {
25+
document.documentElement.classList.remove('dark');
26+
}
1827
}, []);
1928

29+
useEffect(() => {
30+
if (theme) {
31+
if (theme === 'dark') {
32+
document.documentElement.classList.add('dark');
33+
} else {
34+
document.documentElement.classList.remove('dark');
35+
}
36+
localStorage.setItem('theme', theme);
37+
}
38+
}, [theme]);
39+
2040

2141
// Dummy props for the Header, as it's used statically here and doesn't need to change views.
2242
const headerProps = {
@@ -27,6 +47,7 @@ export default function TermsOfServicePage() {
2747
theme: theme,
2848
setTheme: (t: 'light' | 'dark') => setTheme(t),
2949
isLoading: false, // Set to false as we are not checking auth status on this page
50+
isStaticPage: true,
3051
};
3152

3253
return (

‎src/components/layout/header.tsx‎

Lines changed: 113 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface HeaderProps {
1818
theme: 'light' | 'dark' | null;
1919
setTheme: (theme: 'light' | 'dark') => void;
2020
isLoading: boolean;
21+
isStaticPage?: boolean;
2122
}
2223

2324
const navItems: { id: View; label: string; loggedIn?: boolean }[] = [
@@ -30,7 +31,7 @@ const navItems: { id: View; label: string; loggedIn?: boolean }[] = [
3031
{ id: "education", label: "Education" },
3132
];
3233

33-
export default function Header({ activeView, setActiveView, isLoggedIn, onLogout, theme, setTheme, isLoading }: HeaderProps) {
34+
export default function Header({ activeView, setActiveView, isLoggedIn, onLogout, theme, setTheme, isLoading, isStaticPage = false }: HeaderProps) {
3435
const router = useRouter();
3536
const pathname = usePathname();
3637
const [isNavigating, setIsNavigating] = React.useState(false);
@@ -101,121 +102,131 @@ export default function Header({ activeView, setActiveView, isLoggedIn, onLogout
101102
</div>
102103

103104
{/* Desktop Navigation (Center) */}
104-
<nav className="hidden md:flex items-center space-x-6">
105-
{navItems
106-
.filter((item) => !item.loggedIn || isLoggedIn)
107-
.map((item) => (
108-
<button
109-
key={item.id}
110-
onClick={() => setActiveView(item.id)}
111-
className={cn(
112-
"text-sm font-medium transition-colors hover:text-primary",
113-
activeView === item.id
114-
? "text-primary"
115-
: "text-muted-foreground"
116-
)}
117-
>
118-
{item.label}
119-
</button>
120-
))}
121-
</nav>
105+
{!isStaticPage && (
106+
<nav className="hidden md:flex items-center space-x-6">
107+
{navItems
108+
.filter((item) => !item.loggedIn || isLoggedIn)
109+
.map((item) => (
110+
<button
111+
key={item.id}
112+
onClick={() => setActiveView(item.id)}
113+
className={cn(
114+
"text-sm font-medium transition-colors hover:text-primary",
115+
activeView === item.id
116+
? "text-primary"
117+
: "text-muted-foreground"
118+
)}
119+
>
120+
{item.label}
121+
</button>
122+
))}
123+
</nav>
124+
)}
122125

123126
{/* Right Side */}
124127
<div className="flex-1 flex justify-end">
125128
{/* Desktop Auth Buttons */}
126129
<div className="hidden md:flex items-center gap-2">
127-
{isLoading ? (
128-
<Loader2 className="h-6 w-6 animate-spin text-primary" />
129-
) : isLoggedIn ? (
130-
<>
131-
<Button variant="ghost" size="icon" onClick={() => setActiveView('dashboard')}>
132-
<UserCircle className="h-6 w-6" />
133-
<span className="sr-only">Dashboard</span>
134-
</Button>
135-
<Button variant="ghost" size="icon" onClick={onLogout}>
136-
<LogOut className="h-6 w-6" />
137-
<span className="sr-only">Logout</span>
138-
</Button>
139-
</>
140-
) : (
130+
{!isStaticPage && (
141131
<>
142-
<Button variant="ghost" onClick={() => setActiveView('login')}>
143-
Login
144-
</Button>
145-
<Button onClick={() => setActiveView('signup')} className="bg-accent hover:bg-accent/90 text-accent-foreground">
146-
Sign Up
147-
</Button>
132+
{isLoading ? (
133+
<Loader2 className="h-6 w-6 animate-spin text-primary" />
134+
) : isLoggedIn ? (
135+
<>
136+
<Button variant="ghost" size="icon" onClick={() => setActiveView('dashboard')}>
137+
<UserCircle className="h-6 w-6" />
138+
<span className="sr-only">Dashboard</span>
139+
</Button>
140+
<Button variant="ghost" size="icon" onClick={onLogout}>
141+
<LogOut className="h-6 w-6" />
142+
<span className="sr-only">Logout</span>
143+
</Button>
144+
</>
145+
) : (
146+
<>
147+
<Button variant="ghost" onClick={() => setActiveView('login')}>
148+
Login
149+
</Button>
150+
<Button onClick={() => setActiveView('signup')} className="bg-accent hover:bg-accent/90 text-accent-foreground">
151+
Sign Up
152+
</Button>
153+
</>
154+
)}
148155
</>
149156
)}
150157
<ThemeToggleButton />
151158
</div>
152159

153160
{/* Mobile Navigation */}
154161
<div className="md:hidden">
155-
<Sheet>
156-
<SheetTrigger asChild>
157-
<Button variant="ghost" size="icon">
158-
<Menu className="h-6 w-6" />
159-
<span className="sr-only">Open menu</span>
160-
</Button>
161-
</SheetTrigger>
162-
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
163-
<div className="flex items-center justify-between mb-8">
164-
<SheetClose asChild>
165-
<BrandLogo inSheet={true} />
166-
</SheetClose>
167-
<ThemeToggleButton />
168-
</div>
169-
<nav className="flex flex-col space-y-2">
170-
{navItems
171-
.filter((item) => !item.loggedIn || isLoggedIn)
172-
.map((item) => (
173-
<SheetClose key={item.id} asChild>
174-
<Button
175-
variant="ghost"
176-
onClick={() => setActiveView(item.id)}
177-
className={cn(
178-
"justify-start text-lg",
179-
activeView === item.id ? "text-primary" : "text-muted-foreground"
180-
)}
181-
>
182-
{item.label}
183-
</Button>
184-
</SheetClose>
185-
))}
186-
</nav>
187-
<div className="absolute bottom-6 left-6 right-6">
188-
{isLoading ? (
189-
<div className="flex justify-center">
190-
<Loader2 className="h-8 w-8 animate-spin text-primary" />
191-
</div>
192-
) : isLoggedIn ? (
193-
<div className="flex items-center justify-between">
194-
<SheetClose asChild>
195-
<Button variant="ghost" size="icon" onClick={() => setActiveView('dashboard')}>
196-
<UserCircle className="h-8 w-8" />
197-
<span className="sr-only">Dashboard</span>
198-
</Button>
199-
</SheetClose>
200-
<SheetClose asChild>
201-
<Button variant="outline" onClick={onLogout}>
202-
<LogOut className="mr-2 h-5 w-5" /> Logout
203-
</Button>
162+
{!isStaticPage ? (
163+
<Sheet>
164+
<SheetTrigger asChild>
165+
<Button variant="ghost" size="icon">
166+
<Menu className="h-6 w-6" />
167+
<span className="sr-only">Open menu</span>
168+
</Button>
169+
</SheetTrigger>
170+
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
171+
<div className="flex items-center justify-between mb-8">
172+
<SheetClose asChild>
173+
<BrandLogo inSheet={true} />
174+
</SheetClose>
175+
<ThemeToggleButton />
176+
</div>
177+
<nav className="flex flex-col space-y-2">
178+
{navItems
179+
.filter((item) => !item.loggedIn || isLoggedIn)
180+
.map((item) => (
181+
<SheetClose key={item.id} asChild>
182+
<Button
183+
variant="ghost"
184+
onClick={() => setActiveView(item.id)}
185+
className={cn(
186+
"justify-start text-lg",
187+
activeView === item.id ? "text-primary" : "text-muted-foreground"
188+
)}
189+
>
190+
{item.label}
191+
</Button>
204192
</SheetClose>
205-
</div>
206-
) : (
207-
<div className="flex flex-col gap-2">
208-
<SheetClose asChild>
209-
<Button className="w-full" onClick={() => setActiveView('login')}>Login</Button>
210-
</SheetClose>
211-
<SheetClose asChild>
212-
<Button variant="secondary" className="w-full" onClick={() => setActiveView('signup')}>Sign Up</Button>
213-
</SheetClose>
214-
</div>
215-
)}
216-
</div>
217-
</SheetContent>
218-
</Sheet>
193+
))}
194+
</nav>
195+
<div className="absolute bottom-6 left-6 right-6">
196+
{isLoading ? (
197+
<div className="flex justify-center">
198+
<Loader2 className="h-8 w-8 animate-spin text-primary" />
199+
</div>
200+
) : isLoggedIn ? (
201+
<div className="flex items-center justify-between">
202+
<SheetClose asChild>
203+
<Button variant="ghost" size="icon" onClick={() => setActiveView('dashboard')}>
204+
<UserCircle className="h-8 w-8" />
205+
<span className="sr-only">Dashboard</span>
206+
</Button>
207+
</SheetClose>
208+
<SheetClose asChild>
209+
<Button variant="outline" onClick={onLogout}>
210+
<LogOut className="mr-2 h-5 w-5" /> Logout
211+
</Button>
212+
</SheetClose>
213+
</div>
214+
) : (
215+
<div className="flex flex-col gap-2">
216+
<SheetClose asChild>
217+
<Button className="w-full" onClick={() => setActiveView('login')}>Login</Button>
218+
</SheetClose>
219+
<SheetClose asChild>
220+
<Button variant="secondary" className="w-full" onClick={() => setActiveView('signup')}>Sign Up</Button>
221+
</SheetClose>
222+
</div>
223+
)}
224+
</div>
225+
</SheetContent>
226+
</Sheet>
227+
) : (
228+
<ThemeToggleButton />
229+
)}
219230
</div>
220231
</div>
221232

0 commit comments

Comments
 (0)