Skip to content

Header footer refactor #6568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pablonoel wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Header footer refactor #6568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ecc8f6e
Refactor header to Emotion and add theme tokens
pablonoel Jul 31, 2026
ab2c06b
Add menu typography variants and adjust menu styles
pablonoel Jul 31, 2026
76a8d83
Use menu typography in header components
pablonoel Aug 3, 2026
a3f5739
Use Emotion theme in footer; adjust header menus
pablonoel Aug 6, 2026
7d064d8
Merge branch 'master' into header-footer-refactor
pablonoel Aug 6, 2026
2de9493
Make mobile menu responsive; fix CSS lint
pablonoel Aug 6, 2026
8d55ce7
Add xl header size and conditional header heights
pablonoel Aug 6, 2026
eaaeb66
Merge branch 'master' into header-footer-refactor
pablonoel Aug 6, 2026
607cec3
Merge branch 'master' into header-footer-refactor
pablonoel Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions server/config/base/header.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,31 @@
"url": "{browser.browser_main}",
"description": "Explore what data is available and understand the graph structure"
},
{
"title": "Map Explorer",
"url": "{tools.visualization}#visType=map",
"description": "Study how a selected statistical variable can vary across geographic regions"
},
{
"title": "Statistical Variable Explorer",
"url": "{tools.stat_var}",
"description": "Explore statistical variable details including metadata and observations"
},
{
"title": "Data Download Tool",
"url": "{tools.download}",
"description": "Download data for selected statistical variables"
}
]
},
{
"id": "tools-1",
"items": [
{
"title": "Map Explorer",
"url": "{tools.visualization}#visType=map",
"description": "Study how a selected statistical variable can vary across geographic regions"
},
{
"title": "Scatter Plot Explorer",
"url": "{tools.visualization}#visType=scatter",
"description": "Visualize the correlation between two statistical variables"
},
{
"title": "Data Download Tool",
"url": "{tools.download}",
"description": "Download data for selected statistical variables"
},
{
"title": "Timelines Explorer",
"url": "{tools.visualization}#visType=timeline",
Expand All @@ -66,19 +66,19 @@
"description": "Learn how to access and visualize Data Commons data: docs for the website, APIs, and more, for all users and needs"
},
{
"title": "API",
"url": "https://docs.datacommons.org/api",
"description": "Access Data Commons data programmatically, using REST and Python APIs"
"title": "Tutorials",
"url": "https://docs.datacommons.org/tutorials",
"description": "Get familiar with the Data Commons Knowledge Graph and APIs using analysis examples in Google Colab notebooks written in Python"
}
]
},
{
"id": "docs-1",
"items": [
{
"title": "Tutorials",
"url": "https://docs.datacommons.org/tutorials",
"description": "Get familiar with the Data Commons Knowledge Graph and APIs using analysis examples in Google Colab notebooks written in Python"
"title": "API",
"url": "https://docs.datacommons.org/api",
"description": "Access Data Commons data programmatically, using REST and Python APIs"
},
{
"title": "Contributions",
Expand Down Expand Up @@ -106,19 +106,19 @@
"description": "Discover why Data Commons is revolutionizing data access and analysis. Learn how its unified Knowledge Graph empowers you to explore diverse, standardized data"
},
{
"title": "Data Sources",
"url": "{static.data}",
"description": "Get familiar with the data available in Data Commons"
"title": "FAQ",
"url": "{static.faq}",
"description": "Find quick answers to common questions about Data Commons, its usage, data sources, and available resources"
}
]
},
{
"id": "about-1",
"items": [
{
"title": "FAQ",
"url": "{static.faq}",
"description": "Find quick answers to common questions about Data Commons, its usage, data sources, and available resources"
"title": "Data Sources",
"url": "{static.data}",
"description": "Get familiar with the data available in Data Commons"
},
{
"title": "Blog",
Expand Down
115 changes: 98 additions & 17 deletions static/js/apps/base/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,13 @@
* A component that renders the footer on all pages via the base template.
*/

/** @jsxImportSource @emotion/react */

import { css, SerializedStyles, useTheme } from "@emotion/react";
import React, { ReactElement } from "react";

import { Labels } from "../../../shared/types/base";
import { Theme } from "../../../theme/types";

interface FooterProps {
//if true, will display an alternate, lighter version of the logo.
Expand All @@ -29,36 +33,113 @@ interface FooterProps {
labels: Labels;
}

const FOOTER_LINKS = [
{ label: "Terms and Conditions", href: "https://policies.google.com/terms" },
{
label: "Privacy Policy",
href: "https://policies.google.com/privacy?hl=en-US",
},
];

const footerLinks = (theme: Theme): SerializedStyles => css`
display: flex;
flex-wrap: wrap;
font-size: 14px;
margin: 0;
padding: 0;

li {
display: block;
margin: 0;
padding: 0;
}

a {
${theme.typography.family.text};
color: ${theme.colors.text?.tertiary?.dark};
font-weight: 100;
&:hover {
text-decoration: underline;
}
}
`;

const Footer = ({ brandLogoLight, labels }: FooterProps): ReactElement => {
const theme = useTheme();

return (
<div id="main-footer-container">
<div className="brand-byline">
<span className="brand-text">{labels["An initiative from"]}</span>
<footer
// id="main-footer-container"
css={css`
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: ${theme.spacing.lg}px 0;
margin: auto;
max-width: ${theme.width.xl}px;
@media (max-width: ${theme.breakpoints.lg}px) {
max-width: 100%;
padding: ${theme.spacing.lg}px ${theme.spacing.lg}px;
}
@media (max-width: 580px) {
justify-content: center;
gap: ${theme.spacing.sm}px;
}
`}
>
<div
css={css`
display: flex;
align-items: center;
gap: ${theme.spacing.sm}px;
`}
>
<p
css={css`
${theme.typography.family.text};
${theme.typography.text.xs};
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
color: ${theme.colors.text?.tertiary?.dark};
margin: 0;
`}
>
{labels["An initiative from"]}
</p>
<img
className="brand-logo"
width="74"
height="25"
src={
brandLogoLight
? "/images/google-logo-reverse.svg"
: "/images/google-logo.svg"
}
alt="Google logo"
alt="Google Logo"
css={css`
transform: translateY(-1px);
`}
/>
</div>
<ul className="footer-links">
<li>
<a href="https://policies.google.com/terms">
{labels["Terms and Conditions"]}
</a>
</li>
<li>
<a href="https://policies.google.com/privacy?hl=en-US">
{labels["Privacy Policy"]}
</a>
</li>
<ul
css={[
footerLinks(theme),
css`
gap: ${theme.spacing.md}px;
@media (max-width: ${theme.breakpoints.sm}px) {
justify-content: center;
}
`,
]}
>
{FOOTER_LINKS.map(({ label, href }) => (
<li key={href}>
<a href={href}>{labels[label]}</a>
</li>
))}
</ul>
</div>
</footer>
);
};

Expand Down
83 changes: 79 additions & 4 deletions static/js/apps/base/components/header_bar/header_bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
* A component that renders the header on all pages via the base template.
*/

/** @jsxImportSource @emotion/react */

import { css, useTheme } from "@emotion/react";
import React, { ReactElement } from "react";

import { useBreakpoints } from "../../../../shared/hooks/breakpoints";
Expand Down Expand Up @@ -60,12 +63,48 @@ const HeaderBar = ({
labels,
routes,
}: HeaderBarProps): ReactElement => {
const theme = useTheme();
const { up, down } = useBreakpoints();

return (
<div id="main-header-container">
<nav id="main-navbar-container">
<div className="navbar-menu-large">
<div
id="main-header-container"
css={css`
${theme.elevation.header.primary};
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
background-color: ${theme.colors.background.primary.base};
`}
>
<nav
css={css`
position: relative;
width: 100vw;
height: fit-content;
`}
>
<div
css={css`
display: flex;
justify-content: space-between;
gap: ${theme.spacing.xl}px;
width: 100%;
max-width: ${theme.header.width}px;
height: ${theme.header.lg}px;
padding: 0 ${theme.spacing.lg}px;
margin: auto;
background: ${theme.colors.background.primary.base};
@media (max-width: ${theme.breakpoints.xl}px) {
gap: ${theme.spacing.md}px;
}
@media (max-width: ${theme.breakpoints.lg}px) {
display: none;
}
`}
>
<HeaderLogo
name={name}
logoPath={logoPath}
Expand All @@ -81,7 +120,43 @@ const HeaderBar = ({
)}
<MenuDesktop menu={menu} labels={labels} routes={routes} />
</div>
<div className="navbar-menu-mobile">
<div
css={css`
display: flex;
flex-grow: 1;
justify-content: space-between;
padding: 0 ${theme.spacing.lg}px;
height: ${hideHeaderSearchBar
? theme.header.xl
: theme.header.lg}px;
gap: ${theme.spacing.md}px;
@media (min-width: ${theme.breakpoints.lg}px) {
display: none;
}
@media (max-width: 620px) {
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: ${hideHeaderSearchBar
? "min-content"
: "min-content min-content"};
height: ${hideHeaderSearchBar
? theme.header.xl
: theme.header.sm}px;
gap: ${theme.spacing.md}px;
padding: ${theme.spacing.md}px ${theme.spacing.lg}px;
.header-search {
order: 3;
grid-column: 1 / span 2;
}
}
@media (max-width: 340px) {
gap: ${theme.spacing.sm}px;
height: ${hideHeaderSearchBar
? theme.header.xl
: theme.header.md}px;
}
`}
>
<HeaderLogo
name={name}
logoPath={logoPath}
Expand Down
Loading
Loading