adjust home page to navbar height

calblueprint · May 20, 2024 · b1157e0 · b1157e0
1 parent 86ebe20
commit b1157e0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/app/styles.ts b/src/app/styles.ts
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import styled from 'styled-components';
+import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { sans } from '@/styles/fonts';
 
@@ -11,7 +12,7 @@ export const PageContainer = styled.div`
 export const TitleSection = styled.div`
   position: relative;
   width: 100%;
-  height: 100svh;
+  height: calc(100svh - ${CONFIG.navbarHeight}px);
   display: flex;
   flex-direction: column;
 `;
@@ -124,7 +125,7 @@ export const ImageBackground = styled.div`
 export const ImageContainer = styled.div`
   position: absolute;
   width: 100%;
-  height: 100svh;
+  height: calc(100svh - ${CONFIG.navbarHeight}px);
   top: 0;
   left: 0;
 `;

diff --git a/src/components/NavBar/style.ts b/src/components/NavBar/style.ts
@@ -1,12 +1,13 @@
 import styled from 'styled-components';
+import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { sans } from '@/styles/fonts';
 import { LinkColored } from '@/styles/text';
 
 export const NavBarContainer = styled.div`
   display: flex;
   width: 100%;
-  height: 78px;
+  height: ${CONFIG.navbarHeight}px;
   background: ${COLORS.blueMid};
   z-index: 1000;
   box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);

diff --git a/src/lib/configs.ts b/src/lib/configs.ts
@@ -1,5 +1,6 @@
 const CONFIG = {
   pageSize: 20,
+  navbarHeight: 78,
   homepage: '/',
   onboardingHome: '/onboarding/roles',
   settings: '/settings',