Skip to content

Commit

Permalink
fix: update sidebar positioning based on header height
Browse files Browse the repository at this point in the history
zstix committed Sep 8, 2020
1 parent 5b78418 commit 4837e8f
Showing 1 changed file with 11 additions and 3 deletions.
14 changes: 11 additions & 3 deletions src/layouts/MainLayout.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/core';

@@ -36,6 +36,8 @@ const MainLayout = ({ children }) => {

const location = useLocation();
const { fileRelativePath } = usePageContext();
const headerRef = useRef(null);
const [headerHeight, setHeaderHeight] = useState(0);
const [cookieConsent, setCookieConsent] = useState(false);
const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
const isComponentDoc = fileRelativePath.includes(
@@ -54,10 +56,14 @@ const MainLayout = ({ children }) => {
setIsMobileNavOpen(false);
}, [location.pathname]);

useLayoutEffect(() => {
setHeaderHeight(headerRef?.current?.clientHeight || 0);
});

return (
<div
css={css`
--global-header-height: 30px;
--global-header-height: ${headerHeight}px;
--sidebar-width: 300px;
min-height: 100vh;
@@ -79,7 +85,9 @@ const MainLayout = ({ children }) => {
</script>
) : null}
</Helmet>
<GlobalHeader editUrl={editUrl} />
<div ref={headerRef}>
<GlobalHeader editUrl={editUrl} />
</div>
<MobileHeader
css={css`
@media (min-width: 761px) {

0 comments on commit 4837e8f

Please sign in to comment.