Fix navbar at the top of the page (#2128)

This commit is contained in:
Florian Scholdei
2022-10-11 16:01:22 +02:00
committed by GitHub
parent ca047b7953
commit 33f7dd994a
7 changed files with 46 additions and 40 deletions

View File

@@ -71458,7 +71458,7 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
>
<div>
<p
@@ -71520,7 +71520,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
>
<div>
<p
@@ -71582,7 +71582,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
>
<div>
<p
@@ -71670,7 +71670,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 NSEld menu"
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 cZyrQa menu"
>
<div>
<p

View File

@@ -28,10 +28,6 @@ type Props = {
authenticated?: boolean;
};
const SmallHeader: FC = ({ children }) => {
return <div className="has-scm-background">{children}</div>;
};
const LargeHeader: FC = () => {
return (
<div className="hero has-scm-background is-small">
@@ -50,7 +46,7 @@ const LargeHeader: FC = () => {
const Header: FC<Props> = ({ authenticated, children }) => {
if (authenticated) {
return <SmallHeader>{children}</SmallHeader>;
return <>{children}</>;
} else {
return <LargeHeader />;
}

View File

@@ -40,7 +40,7 @@ type CollapsedProps = {
const SectionContainer = styled.aside`
position: sticky;
position: -webkit-sticky; /* Safari */
top: 2rem;
top: 5rem;
width: 100%;
@media (max-height: 900px) {