Styling changes to match Figma

components/OrganizedContent.module.css

@@ -2,19 +2,19 @@
   display: flex;
 }
 
-.wrapper h1 {
-  margin: 1rem 0;
-  font-size: calc(24rem / 16);
-  font-weight: 600;
-  color: var(--blue-2);
-}
-
 .content {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
+.content h1 {
+  margin: 1rem 0;
+  font-size: calc(24rem / 16);
+  font-weight: 600;
+  color: var(--blue-2);
+}
+
 .nav {
   margin: calc(8rem / 16) calc(32rem / 16) 0 0;
   color: var(--purple-2);
@@ -112,79 +112,48 @@
 
 .burger {
   position: fixed;
-  margin: 0px;
+  margin: 0;
   top: auto;
   right: auto;
-  bottom: 20px;
-  left: 20px;
+  bottom: calc(32rem / 16);
+  left: calc(16rem / 16);
   display: none;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 2rem;
-  height: 2rem;
-  background: transparent;
+  width: calc(62rem / 16);
+  height: calc(57rem / 16);
   border: none;
   cursor: pointer;
-  padding: 0;
   z-index: 10;
   background: var(--light-blue-2);
+  border-radius: calc(5rem / 16);
   transition: bottom 0.6s;
 }
 
 .hiddenBurger {
-  bottom: -50px;
-}
-
-.burger:focus {
-  outline: none;
+  bottom: calc(-94rem / 16);
 }
 
 .burger > div {
-  width: 2rem;
-  height: 0.25rem;
-  background: var(--blue-2);
-  border-radius: 10px;
-  transition: all 0.2s linear;
-  position: relative;
-  transform-origin: 1px;
-}
-
-.burgerLineOpen1 {
-  transform: rotate(45deg);
-}
-
-.burgerLineClosed1 {
-  transform: rotate(0);
-}
-
-.burgerLineOpen2 {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-.burgerLineClosed2 {
-  transform: translateX(0px);
-  opacity: 1;
-}
-
-.burgerLineOpen3 {
-  transform: rotate(-45deg);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: calc(11rem / 16) calc(9rem / 16);
 }
 
-.burgerLineClosed3 {
-  transform: rotate(0);
+.burger > div > div {
+  border-radius: calc(5rem / 16);
+  border: calc(2.5rem / 16) solid var(--blue-2);
+  position: relative;
 }
 
 .mobileNav {
   position: fixed;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   background: var(--light-blue-1);
-  width: 80%;
+  width: 90%;
   height: 100%;
   text-align: left;
-  padding: 2rem;
   top: 0;
   left: 0;
   transition: transform 0.3s ease-in-out;
@@ -198,17 +167,24 @@
 
 
 .mobileNav > a {
-  font-size: 2rem;
+  font-size: calc(14rem / 16);
   text-transform: uppercase;
-  padding: 2rem 0;
+  padding: calc(32rem / 16) 0;
   font-weight: bold;
-  letter-spacing: 0.5rem;
+  letter-spacing: calc(7rem / 16);
   color: var(--blue-2);
   text-decoration: none;
   transition: color 0.3s linear;
   
 }
 
+.mobileNavTitle {
+  font-size: calc(24rem / 16);
+  font-weight: 700;
+  margin: calc(14rem / 16);
+  margin-top: calc(39rem / 16);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .burger {
     display: flex;
@@ -216,6 +192,13 @@
   .wrapper > .nav {
     display: none;
   }
+  .navItem {
+    width: auto;
+    padding: 0 calc(16rem / 16);
+  }
+  .nav {
+    margin: 0;
+  }
   
 }
 

components/OrganizedContent.tsx

@@ -27,6 +27,7 @@ export const READ_ALL_ID = "read-all";
 interface Props {
   sections: Section[];
   currentId: string;
+  pageTitle: string;
   link: Link;
 }
 
@@ -74,6 +75,7 @@ export function OrganizedContent(props: Props) {
         sections={sections}
         currentIndex={currentIndex}
         link={props.link}
+        pageTitle={props.pageTitle}
       />
     </div>
   );
@@ -83,11 +85,13 @@ interface NavProps {
   sections: Section[];
   currentIndex: number;
   link: Link;
+  pageTitle?: string;
 }
 
-function Nav({ sections, currentIndex, link: Link }: NavProps) {
+function Nav({ sections, currentIndex, link: Link, pageTitle }: NavProps) {
   return (
     <div className={styles.nav}>
+      {pageTitle && <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>}
       {sections.map((section, index) => {
         const classNames = [styles.navItem];
 
@@ -161,6 +165,7 @@ interface MobileProps {
   sections: Section[];
   currentIndex: number;
   link: Link;
+  pageTitle: string;
 }
 
 function MobileWrapper(mobileProps: MobileProps) {
@@ -205,17 +210,16 @@ const Burger = ({ open, setOpen }: BurgerProps) => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, [debouncedPrevScrollPos, visible]);
 
-  const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
-  const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
-  const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3; //BUG!!
   return (
     <div
       className={styles.burger + " " + (visible ? "" : styles.hiddenBurger)}
       onClick={() => setOpen(!open)}
     >
-      <div className={line1} />
-      <div className={line2} />
-      <div className={line3} />
+      <div>
+        <div />
+        <div />
+        <div />
+      </div>
     </div>
   );
 };
@@ -225,15 +229,21 @@ interface MenuProps {
   sections: Section[];
   currentIndex: number;
   link: Link;
+  pageTitle: string;
 }
 
-const Menu = ({ open, sections, currentIndex, link }: MenuProps) => {
+const Menu = ({ open, sections, currentIndex, link, pageTitle }: MenuProps) => {
   const mobileNav = open
     ? styles.mobileNav
     : styles.mobileNav + " " + styles.mobileNavClosed;
   return (
     <div className={mobileNav}>
-      <Nav sections={sections} currentIndex={currentIndex} link={link} />
+      <Nav
+        sections={sections}
+        currentIndex={currentIndex}
+        link={link}
+        pageTitle={pageTitle}
+      />
     </div>
   );
 };

components/playground.tsx

@@ -214,6 +214,11 @@ export function OrganizedContentDemo() {
   }
 
   return (
-    <OrganizedContent sections={sections} currentId={id} link={FakeLink} />
+    <OrganizedContent
+      sections={sections}
+      currentId={id}
+      link={FakeLink}
+      pageTitle="Constitution"
+    />
   );
 }