design: implement symmetrical 2x2 design layout grid with light/dark vertical sidebars and light/dark top horizontals
This commit is contained in:
@@ -174,7 +174,10 @@ function EntrepType({ value, onChange }) {
|
||||
|
||||
function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
// Ultra-high-fidelity CSS-rendered miniatures representing your actual page-dashboard.jsx designs!
|
||||
const isDark = styleId === "rail";
|
||||
const isDark =
|
||||
styleId === "sidebar_dark" ||
|
||||
styleId === "topbar_dark" ||
|
||||
styleId === "rail";
|
||||
const accentColor = "var(--accent)";
|
||||
|
||||
// Theme palettes from page-dashboard.jsx
|
||||
@@ -240,7 +243,6 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
</div>
|
||||
);
|
||||
|
||||
// Common high-fidelity dashboard body matching page-dashboard.jsx
|
||||
// Common high-fidelity dashboard body matching page-dashboard.jsx
|
||||
const renderDashboardMockup = () => (
|
||||
<div
|
||||
@@ -725,7 +727,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
);
|
||||
|
||||
let content;
|
||||
if (styleId === "sidebar") {
|
||||
if (styleId === "sidebar_light") {
|
||||
// Left-side menu column + main dashboard area — Light/Minimal CRM theme (Screen 3)
|
||||
content = (
|
||||
<div
|
||||
@@ -900,8 +902,137 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Dashboard (Light) */}
|
||||
{renderDashboardMockup()}
|
||||
</div>
|
||||
);
|
||||
} else if (styleId === "sidebar_dark") {
|
||||
// Left-side menu column + main dashboard area — Full Dark theme (Screen 3 Dark)
|
||||
content = (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "#0e0f12",
|
||||
}}
|
||||
>
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
style={{
|
||||
width: 52,
|
||||
borderRight: "1px solid rgba(255,255,255,0.08)",
|
||||
padding: "8px 6px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 6,
|
||||
background: "#16171d",
|
||||
}}
|
||||
>
|
||||
{/* Logo / Workspace Selector */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.08)",
|
||||
paddingBottom: 4,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 2.5,
|
||||
background: accentColor,
|
||||
opacity: 0.9,
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 4.5,
|
||||
fontWeight: 700,
|
||||
color: "#fff",
|
||||
letterSpacing: "-0.01em",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
Lattice Studio
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 3,
|
||||
color: "rgba(255,255,255,0.4)",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
Free · 4 members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mini Search box */}
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 8,
|
||||
borderRadius: 2,
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingLeft: 3,
|
||||
}}
|
||||
>
|
||||
{wireLine(16, 0.15)}
|
||||
</div>
|
||||
{/* Menu Sections (VIEWS, TOOLS, ADMIN) */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 5,
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
{/* Standard Links */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<div style={{ display: "flex", gap: 3, alignItems: "center" }}>
|
||||
<div
|
||||
style={{
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: "50%",
|
||||
background: accentColor,
|
||||
}}
|
||||
/>
|
||||
{wireLine(12, 0.55)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
>
|
||||
{wireLine(14, 0.35)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
>
|
||||
{wireLine(16, 0.35)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin */}
|
||||
{/* Views */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<span
|
||||
style={{
|
||||
@@ -912,26 +1043,57 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
ADMIN
|
||||
VIEWS
|
||||
</span>
|
||||
<div
|
||||
{["Companies", "People", "Opportunities"].map((v) => (
|
||||
<div
|
||||
key={v}
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
>
|
||||
{wireLine(24, 0.35)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tools */}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
fontSize: 3.5,
|
||||
color: c.muted,
|
||||
fontWeight: 600,
|
||||
letterSpacing: "0.04em",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
>
|
||||
{wireLine(18, 0.35)}
|
||||
</div>
|
||||
TOOLS
|
||||
</span>
|
||||
{["Insights", "Automations", "Docs"].map((v) => (
|
||||
<div
|
||||
key={v}
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 3,
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
>
|
||||
{wireLine(20, 0.35)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Dashboard (Light) */}
|
||||
{/* Main Dashboard (Dark) */}
|
||||
{renderDashboardMockup()}
|
||||
</div>
|
||||
);
|
||||
} else if (styleId === "topbar") {
|
||||
} else if (styleId === "topbar_light") {
|
||||
// Top Horizontal Dark Header Bar + Light Dashboard (Screen 2)
|
||||
content = (
|
||||
<div
|
||||
@@ -1075,6 +1237,150 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
{renderDashboardMockup()}
|
||||
</div>
|
||||
);
|
||||
} else if (styleId === "topbar_dark") {
|
||||
// Top Horizontal Dark Header Bar + Dark Dashboard (Screen 2 Dark)
|
||||
content = (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "#0e0f12",
|
||||
}}
|
||||
>
|
||||
{/* Top Dark Header */}
|
||||
<div
|
||||
style={{
|
||||
height: 20,
|
||||
borderBottom: "1px solid rgba(255,255,255,0.08)",
|
||||
padding: "0 10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
background: "#121110",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: 6, alignItems: "center" }}>
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 2,
|
||||
background: accentColor,
|
||||
opacity: 0.9,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 5.5,
|
||||
fontWeight: 700,
|
||||
color: "#fff",
|
||||
fontFamily: "var(--font-sans)",
|
||||
letterSpacing: "-0.01em",
|
||||
}}
|
||||
>
|
||||
Lattice
|
||||
</span>
|
||||
<span style={{ fontSize: 4.5, color: "rgba(255,255,255,0.3)" }}>
|
||||
/
|
||||
</span>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 2 }}>
|
||||
<div
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "50%",
|
||||
background: "#d4b8a8",
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 4.5,
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
mira-reyes
|
||||
</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 4.5, color: "rgba(255,255,255,0.3)" }}>
|
||||
/
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 4.5,
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
dashboard
|
||||
</span>
|
||||
</div>
|
||||
{/* Miniature ⌘K Bar */}
|
||||
<div
|
||||
style={{
|
||||
width: 56,
|
||||
height: 10,
|
||||
borderRadius: 4,
|
||||
border: "1px solid rgba(255,255,255,0.15)",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingLeft: 4,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: 2,
|
||||
width: 22,
|
||||
background: "#fff",
|
||||
opacity: 0.25,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
background: "rgba(255,255,255,0.2)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Page tabs secondary bar */}
|
||||
<div
|
||||
style={{
|
||||
height: 14,
|
||||
background: "#1a1918",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.04)",
|
||||
padding: "0 10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
{["Overview", "Reports", "Goals", "Anomalies", "Custom"].map(
|
||||
(tab, idx) => (
|
||||
<span
|
||||
key={tab}
|
||||
style={{
|
||||
fontSize: 4.5,
|
||||
color: idx === 0 ? "#fff" : "rgba(255,255,255,0.4)",
|
||||
fontWeight: idx === 0 ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{tab}
|
||||
</span>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dark Dashboard below */}
|
||||
{renderDashboardMockup()}
|
||||
</div>
|
||||
);
|
||||
} else if (styleId === "rail") {
|
||||
// Icon rail + secondary vertical list panel — Complete Dark-mode Dashboard (Screen 1)
|
||||
content = (
|
||||
@@ -1934,22 +2240,28 @@ function LayoutPreview({ styleId }: { styleId: string }) {
|
||||
|
||||
const SAAS_STYLES = [
|
||||
{
|
||||
id: "sidebar",
|
||||
label: "Vertical Sidebar",
|
||||
desc: "Left-side collapsible menu, data-dense. Ideal for CRM/dashboards.",
|
||||
illustration: <LayoutPreview styleId="sidebar" />,
|
||||
id: "sidebar_light",
|
||||
label: "Vertical Sidebar — Light",
|
||||
desc: "Clean light sidebar + light dashboard layouts.",
|
||||
illustration: <LayoutPreview styleId="sidebar_light" />,
|
||||
},
|
||||
{
|
||||
id: "topbar",
|
||||
label: "Top Horizontal + ⌘K",
|
||||
desc: "Spacious top navigation with global command search bar.",
|
||||
illustration: <LayoutPreview styleId="topbar" />,
|
||||
id: "sidebar_dark",
|
||||
label: "Vertical Sidebar — Dark",
|
||||
desc: "Full dark sidebar + dark dashboard layouts.",
|
||||
illustration: <LayoutPreview styleId="sidebar_dark" />,
|
||||
},
|
||||
{
|
||||
id: "rail",
|
||||
label: "Slim Icon Rail",
|
||||
desc: "Minimalist vertical narrow icon bar, maximizes workspace area.",
|
||||
illustration: <LayoutPreview styleId="rail" />,
|
||||
id: "topbar_light",
|
||||
label: "Top Horizontal — Light",
|
||||
desc: "Sleek dark topbar + light dashboard layouts.",
|
||||
illustration: <LayoutPreview styleId="topbar_light" />,
|
||||
},
|
||||
{
|
||||
id: "topbar_dark",
|
||||
label: "Top Horizontal — Dark",
|
||||
desc: "Full dark topbar + dark dashboard layouts.",
|
||||
illustration: <LayoutPreview styleId="topbar_dark" />,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user