fix: navbar bolding spacing issues addressed

calblueprint · May 19, 2024 · ab38854 · ab38854
1 parent 4e1bcb8
commit ab38854
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -80,6 +80,9 @@ export default function NavBar() {
           $color="white"
           $isActive={link.active}
         >
+          <Styles.DisplayText $isActive={link.active}>
+            {link.name}
+          </Styles.DisplayText>
           {link.name}
         </Styles.NoUnderlineLink>
       </Flex>
@@ -93,6 +96,7 @@ export default function NavBar() {
   }
 
   return (
+
     <Styles.NavBarContainer>
       <Styles.NavBarSectionDiv>
         <Link href="/">

diff --git a/src/components/NavBar/style.ts b/src/components/NavBar/style.ts
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 import { sans } from '@/styles/fonts';
 import { LinkColored } from '@/styles/text';
+import { boolean } from 'zod';
 
 export const NavBarContainer = styled.div`
   display: flex;
@@ -33,10 +34,21 @@ export const NoUnderlineLink = styled(LinkColored)<{ $isActive: boolean }>`
   ${sans.style}
   text-decoration: none;
   margin: 10px;
-  font-weight: ${({ $isActive }) => ($isActive ? '600' : '400')};
+  font-weight: 600;
+  color: transparent;
+  position: relative;
   cursor: pointer;
 `;
 
+export const DisplayText = styled.span<{$isActive: boolean}>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: ${({ $isActive }) => ($isActive ? '600' : '400')}; /* Conditional bolding */
+  color: white;
+`
+
 export const ActiveUnderline = styled.hr<{ $isActive: boolean }>`
   visibility: ${({ $isActive }) => ($isActive ? 'visible' : 'hidden')};
   position: absolute;
@@ -57,4 +69,5 @@ export const LinkContainer = styled.div`
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
+  white-space: nowrap;
 `;