✨ Make website responsive (#44)

* make the home page responsive * make the header navbar responsive * update for all the rest of the pages * Fix hydration * hamburger menu to the center * lab page update * css update, fix css naming, update css labels
aweandreverence · Nov 14, 2023 · 5770a3a · 5770a3a
1 parent 98bab1a
commit 5770a3a
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 120 deletions.
diff --git a/components/header.js b/components/header.js
@@ -2,21 +2,22 @@ import classNames from 'classnames';
 
 import Nav from 'react-bootstrap/Nav';
 
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import css from '../styles/header.module.scss';
+import { Container, Navbar } from 'react-bootstrap';
 import { NAV_LINKS } from '../constants/nav_links.js';
+import css from '../styles/header.module.scss';
 
 export function Header({ children }) {
     const router = useRouter();
     const navItemsJSX = NAV_LINKS.map((link, index) => {
         const classes = classNames({
             [css.active]: link.url === router.pathname,
+            ...{ 'text-dark': true },
         });
         const target = link.url.substring(0, 4) === 'http' ? '_blank' : null;
         return (
-            <Nav.Item key={`link-${index}`}>
+            <Nav.Item className={css.headerItems} key={`link-${index}`}>
                 <Nav.Link href={link.url} className={classes} target={target}>
                     {link.name}
                 </Nav.Link>
@@ -25,7 +26,14 @@ export function Header({ children }) {
     });
     return (
         <div className={css.header}>
-            <Nav>{navItemsJSX}</Nav>
+            <Navbar className={css.mobileHeadersWidth} expand="sm navbar-light">
+                <Container>
+                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                    <Navbar.Collapse id="basic-navbar-nav">
+                        <Nav>{navItemsJSX}</Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar>
         </div>
     );
 }
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     "popper.js": "^1.16.1",
     "postcss": "8.4.31",
     "react": "^18.2.0",
-    "react-bootstrap": "^1.3.0",
+    "react-bootstrap": "^2.9.0-beta.1",
     "react-dom": "^18.2.0",
     "react-obfuscate": "^3.6.8",
     "react-safe": "^1.3.0",

diff --git a/pages/about.js b/pages/about.js
@@ -11,7 +11,7 @@ export default function About() {
 
             <br />
 
-            <Row>
+            <Row className={css.imgText}>
                 <Col>
                     <div className={css.textleft}>
                         <div className={css.card}>
@@ -60,7 +60,7 @@ export default function About() {
                 <Col>
                     <img
                         src="https://images.unsplash.com/photo-1476041026529-411f6ae1de3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1300&q=80"
-                        className={css.right}
+                        className={css.imgright}
                     />
                 </Col>
             </Row>

diff --git a/pages/index.js b/pages/index.js
@@ -21,7 +21,7 @@ export default function Home() {
             </div>
 
             <br />
-            <Row>
+            <Row className={css.imgText}>
                 <Col>
                     <img
                         src="https://images.unsplash.com/photo-1511162862207-a0857d04c7b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"

diff --git a/pages/labs.js b/pages/labs.js
@@ -11,7 +11,7 @@ export default function Labs() {
 
             <br />
 
-            <Row>
+            <Row className={css.imgText}>
                 <Col>
                     <div className={css.textleft}>
                         <div className={css.card}>
@@ -28,45 +28,44 @@ export default function Labs() {
                                 The following are some of the products that are
                                 currently under various stages (prototype,
                                 alpha, or beta) of development:
-                                <ul>
-                                    <li>
-                                        <a href="https://john316.aweandreverence.com">
-                                            The Gospel
-                                        </a>{' '}
-                                        (React Native app for sharing the
-                                        gospel)
-                                    </li>
-                                    <li>
-                                        <a href="http://treasuredword.aweandreverence.com">
-                                            Treasured Word
-                                        </a>{' '}
-                                        (social "playlists" for the Bible)
-                                    </li>
-                                    <li>
-                                        <a href="http://imdbible.aweandreverence.com">
-                                            IMDBible
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="https://slackin.church">
-                                            Slackin.Church
-                                        </a>{' '}
-                                        (Slack bot for churches)
-                                    </li>
-                                    <li>
-                                        <a href="http://neighbornear.me">
-                                            NeighborNear.Me
-                                        </a>
-                                    </li>
-                                </ul>
                             </p>
+                            <ul>
+                                <li>
+                                    <a href="https://john316.aweandreverence.com">
+                                        The Gospel
+                                    </a>{' '}
+                                    (React Native app for sharing the gospel)
+                                </li>
+                                <li>
+                                    <a href="http://treasuredword.aweandreverence.com">
+                                        Treasured Word
+                                    </a>{' '}
+                                    (social "playlists" for the Bible)
+                                </li>
+                                <li>
+                                    <a href="http://imdbible.aweandreverence.com">
+                                        IMDBible
+                                    </a>
+                                </li>
+                                <li>
+                                    <a href="https://slackin.church">
+                                        Slackin.Church
+                                    </a>{' '}
+                                    (Slack bot for churches)
+                                </li>
+                                <li>
+                                    <a href="http://neighbornear.me">
+                                        NeighborNear.Me
+                                    </a>
+                                </li>
+                            </ul>
                         </div>
                     </div>
                 </Col>
                 <Col>
                     <img
                         src="https://images.unsplash.com/photo-1531771686035-25f47595c87a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80"
-                        className={css.right}
+                        className={css.imgright}
                     />
                 </Col>
             </Row>

diff --git a/styles/common.module.scss b/styles/common.module.scss
@@ -47,6 +47,7 @@
     line-height: 1.15;
     font-size: 3rem;
     margin-top: 1.5rem;
+    margin-bottom: 1rem;
     font-family: timesnewroman;
 
     a {
@@ -135,11 +136,35 @@
     margin: auto;
 }
 
-.right {
+.imgright {
     position: relative;
     top: 50%;
     left: 40%;
     transform: translate(-50%, -50%);
     width: 80%;
     margin: auto;
 }
+
+@media (max-width: 600px) {
+    .imgText {
+        display: flex;
+        flex-direction: column;
+        width: 95%;
+    }
+
+    .imgright {
+        left: 50%;
+    }
+
+    .imgleft {
+        left: 50%;
+    }
+
+    .textleft {
+        left: 50%;
+    }
+
+    .card {
+        width: 95%;
+    }
+}
diff --git a/styles/header.module.scss b/styles/header.module.scss
@@ -1,11 +1,10 @@
 .header {
     width: 100%;
-    height: 75px;
     border-bottom: 1px solid #eaeaea;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-family: "Times New Roman";
+    font-family: 'Times New Roman';
     font-size: 1.125rem;
 
     img {
@@ -22,3 +21,20 @@
         font-weight: bold;
     }
 }
+
+@media (min-width: 960px) {
+    .headerItems {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
+
+@media (max-width: 600px) {
+    .header {
+        justify-content: flex-start;
+    }
+
+    .mobileHeadersWidth {
+        width: 100%;
+    }
+}