Fixed Headers zindex and top margin gap

jaltekruse · Mar 26, 2023 · 35fc95e · 35fc95e
1 parent a3201af
commit 35fc95e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/src/Tools/_framework/Paths/Portfolio.jsx b/src/Tools/_framework/Paths/Portfolio.jsx
@@ -88,6 +88,7 @@ const SecondHeader = styled.header`
   align-items: center;
   text-align: center;
   display: relative;
+  z-index: 100;
 `;
 
 const PublicActivitiesSection = styled.div`
@@ -243,7 +244,19 @@ export function Portfolio(){
 
   return <>
   <PortfolioGrid >
-  <SecondHeader>
+  <Box gridRow="1/2"
+  backgroundColor="#fff"
+  color="#000"
+  height="80px"
+  position="fixed"
+  width="100%"
+  display="flex"
+  flexDirection="column"
+  justifyContent="center"
+  alignItems="center"
+  textAlign="center"
+  zIndex="100"
+  >
   <h1 style={{
       lineHeight: '0.1em'
     }}>{data.fullName}</h1>
@@ -257,7 +270,7 @@ export function Portfolio(){
       </Form>
       </div>
 
-  </SecondHeader>
+  </Box>
   <PublicActivitiesSection>
     <h2>Public</h2>
     <CardsContainer>

diff --git a/src/Tools/_framework/Paths/PublicPortfolio.jsx b/src/Tools/_framework/Paths/PublicPortfolio.jsx
@@ -148,7 +148,21 @@ export function PublicPortfolio(){
 
   return <>
   <PortfolioGrid >
-  <Header>
+  <Box
+  as="header"
+  gridRow="1/2"
+  backgroundColor="#fff"
+  color="#000"
+  height="80px"
+  position="fixed"
+  width="100%"
+  display="flex"
+  flexDirection="column"
+  justifyContent="center"
+  alignItems="center"
+  textAlign="center"
+  zIndex="100"
+  >
   <h1 style={{
       lineHeight: '0.1em'
     }}>{data.fullName}</h1>
@@ -158,7 +172,7 @@ export function PublicPortfolio(){
     <div style={{position:"absolute", top:'48px',right:"10px"}}>
       </div>
 
-  </Header>
+  </Box>
   <PublicActivitiesSection>
     <CardsContainer>
       {data.publicActivities.length < 1 ? <div>No Public Activities</div>  :

diff --git a/src/Tools/_framework/Paths/SiteHeader.jsx b/src/Tools/_framework/Paths/SiteHeader.jsx
@@ -1,3 +1,4 @@
+import { Box } from '@chakra-ui/react';
 import React, { useRef, useState } from 'react';
 import { Outlet, useLoaderData, useNavigate } from 'react-router';
 import { NavLink } from 'react-router-dom';
@@ -79,6 +80,7 @@ const HeaderContainer = styled.header`
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid var(--mainGray);
+
 `;
 
 //Minimal container.  The idea is the Outlet should provide its own layout.
@@ -109,7 +111,21 @@ export function SiteHeader(props) {
 
   return (<>
   <TopContainer>
-    <HeaderContainer>
+    <Box 
+    as="header"
+    gridRow="1 / 2"
+    backgroundColor="#fff"
+    color="#000"
+    height="40px"
+    position="fixed"
+    top="0"
+    width="100%"
+    margin="0"
+    display="flex"
+    justifyContent="space-between"
+    borderBottom="1px solid var(--mainGray)"
+    zIndex="100"
+    >
     <Branding>
       <RouterLogo /><p>Doenet</p>
     </Branding>
@@ -119,7 +135,7 @@ export function SiteHeader(props) {
         {data.signedIn ? <MenuItem to={`portfolio/${data.portfolioCourseId}`}>Portfolio</MenuItem> : null}
       </BarMenu>
       <SignInButtonContainer>{signInButton}</SignInButtonContainer>
-    </HeaderContainer>
+    </Box>
 
     <ContentContainer>
       <Outlet context={{signedIn:data.signedIn}}/>