Skip to content

Commit 27016c3

Browse files
CFsylvesterCFsylvester
committed
remove client side rendering from layout to keep as server side
1 parent 305f64f commit 27016c3

File tree

3 files changed

+71
-54
lines changed

3 files changed

+71
-54
lines changed

‎src/app/layout.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
'use client';
1+
import { ReactNode } from 'react';
22
import '@/styles/globals.scss';
3-
import { ReactNode, useState } from 'react';
43
import { Montserrat } from 'next/font/google';
54

65
// components
76
import GridOverlayToggle from '@/components/GridOverlayToggle';
87

8+
// optimized fonts
99
const montserrat = Montserrat({
1010
subsets: ['latin'],
1111
weight: ['300', '400', '500', '600', '700'],
@@ -14,23 +14,19 @@ const montserrat = Montserrat({
1414
});
1515

1616
const RootLayout = ({ children }: { children: ReactNode }) => {
17-
const [showGrid, setShowGrid] = useState(false);
1817
const devMode = process.env.NODE_ENV === 'development';
1918

2019
return (
2120
<html lang="en" className={montserrat.variable}>
2221
<body>
2322
{/* DEV GRID TOGGLE */}
24-
{devMode && (
25-
<GridOverlayToggle
26-
active={showGrid}
27-
onChange={setShowGrid}
28-
className="fixed bottom-8 right-4 z-20"
29-
/>
30-
)}
23+
{devMode && <GridOverlayToggle />}
3124

3225
{/* MAIN CONTENT */}
33-
<main className={`layout ${showGrid ? 'grid-overlay' : ''}`}>{children}</main>
26+
{/* GRID OVERLAY relies on the main layout class */}
27+
<main data-grid-overlay className={'layout'}>
28+
{children}
29+
</main>
3430
</body>
3531
</html>
3632
);

‎src/components/GridOverlayToggle/index.tsx‎

Lines changed: 53 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
'use client';
2-
import React from 'react';
2+
import React, { useEffect, useState, useRef } from 'react';
33
import Icon from '@/components/Icon';
44

5-
type Props = {
6-
active: boolean;
7-
onChange: (active: boolean) => void;
8-
className?: string;
9-
};
10-
5+
// needs to be hardcoded because tailwind doesn't support dynamic classes
116
const breakpoints = [
127
{ name: 'xs', classes: 'inline sm:hidden' },
138
{ name: 'sm', classes: 'hidden sm:inline md:hidden' },
@@ -19,43 +14,60 @@ const breakpoints = [
1914
{ name: '4xl', classes: 'hidden 4xl:inline' },
2015
];
2116

22-
const GridOverlayToggle: React.FC<Props> = ({ active, onChange, className = '' }) => (
23-
<button
24-
onClick={() => onChange(!active)}
25-
className={`
26-
${className}
27-
flex items-center
28-
w-32 h-12
29-
rounded-lg
30-
px-3
31-
bg-neu-navy-base
32-
shadow-neu-navy-base
33-
transition-all duration-200
34-
`}
35-
>
36-
<div className="flex items-end mr-2">
37-
<span className="text-white text-display-label font-bold leading-tight">Grid</span>
38-
<span className="text-display-caption text-neu-white-darker ml-1">
39-
{breakpoints.map(({ name, classes }) => (
40-
<span key={name} className={classes}>
41-
({name})
42-
</span>
43-
))}
44-
</span>
45-
</div>
17+
const GridOverlayToggle: React.FC = () => {
18+
const [active, setActive] = useState(false);
19+
const mainRef = useRef<HTMLElement | null>(null);
20+
21+
// Get main element reference once on mount
22+
useEffect(() => {
23+
mainRef.current = document.querySelector('main');
24+
}, []);
4625

47-
<div
26+
// Toggle grid overlay
27+
useEffect(() => {
28+
if (mainRef.current) {
29+
mainRef.current.setAttribute('data-grid-overlay', active ? 'active' : '');
30+
}
31+
}, [active]);
32+
33+
return (
34+
<button
35+
onClick={() => setActive(prev => !prev)}
4836
className={`
49-
flex items-center justify-center
50-
w-[36px] h-[36px]
51-
rounded-full
52-
bg-neu-navy-dark
53-
shadow-neu-navy-inset
37+
flex items-center
38+
w-32 h-12
39+
rounded-lg
40+
px-3
41+
bg-neu-navy-base
42+
shadow-neu-navy-base
43+
transition-all duration-200
44+
fixed bottom-8 right-4 z-20
5445
`}
5546
>
56-
<Icon type="grid" active={active} size={18} />
57-
</div>
58-
</button>
59-
);
47+
<div className="flex items-end mr-2">
48+
<span className="text-white text-display-label font-bold leading-tight">Grid</span>
49+
<span className="text-display-caption text-neu-white-darker ml-1">
50+
{breakpoints.map(({ name, classes }) => (
51+
<span key={name} className={classes}>
52+
({name})
53+
</span>
54+
))}
55+
</span>
56+
</div>
57+
58+
<div
59+
className={`
60+
flex items-center justify-center
61+
w-[36px] h-[36px]
62+
rounded-full
63+
bg-neu-navy-dark
64+
shadow-neu-navy-inset
65+
`}
66+
>
67+
<Icon type="grid" active={active} size={18} />
68+
</div>
69+
</button>
70+
);
71+
};
6072

6173
export default GridOverlayToggle;

‎src/styles/utilities/layout.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
}
7272
}
7373

74-
.grid-overlay {
74+
[data-grid-overlay] {
7575
@apply mx-auto bg-repeat-x z-10;
7676

7777
width: calc(
@@ -86,5 +86,14 @@
8686
transparent calc(var(--layout-col-width) + var(--layout-gap))
8787
);
8888
background-size: calc(var(--layout-col-width) + var(--layout-gap)) 100%;
89-
transition: background-image 0.3s ease-in-out;
89+
opacity: 0;
90+
visibility: hidden;
91+
transition:
92+
opacity 0.3s ease-in-out,
93+
visibility 0.3s ease-in-out;
94+
95+
&[data-grid-overlay='active'] {
96+
opacity: 1;
97+
visibility: visible;
98+
}
9099
}

0 commit comments

Comments
 (0)