Responsive updates.

components/layout/NavBar.js

@@ -10,6 +10,7 @@ import styles from './NavBar.module.css';
 import useConfig from 'hooks/useConfig';
 import useMessages from 'hooks/useMessages';
 import { useRouter } from 'next/router';
+import HamburgerButton from '../common/HamburgerButton';
 
 export default function NavBar() {
   const { pathname } = useRouter();
@@ -52,6 +53,9 @@ export default function NavBar() {
             <LanguageButton />
             <ProfileButton />
           </div>
+          <div className={styles.mobile}>
+            <HamburgerButton />
+          </div>
         </Column>
       </Row>
     </div>

components/layout/NavBar.module.css

@@ -59,7 +59,8 @@
   border-bottom: 2px solid var(--primary400);
 }
 
-.actions {
+.actions,
+.mobile {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -67,9 +68,17 @@
   min-width: 0;
 }
 
+.mobile {
+  display: none;
+}
+
 @media only screen and (max-width: 768px) {
   .links,
   .actions {
     display: none;
   }
+
+  .mobile {
+    display: flex;
+  }
 }

components/layout/Page.module.css

@@ -6,3 +6,9 @@
   position: relative;
   padding: 30px;
 }
+
+@media only screen and (max-width: 768px) {
+  .page {
+    padding: 10px 0;
+  }
+}

components/layout/PageHeader.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useBreakpoint } from 'react-basics';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ title, children, className, style }) {
+export default function PageHeader({ title, children }) {
+  const breakPoint = useBreakpoint();
+
   return (
-    <div className={classNames(styles.header, className)} style={style}>
+    <div className={classNames(styles.header, { [styles[breakPoint]]: true })}>
       <div className={styles.title}>{title}</div>
-      {children}
+      <div className={styles.actions}>{children}</div>
     </div>
   );
 }

components/layout/PageHeader.module.css

@@ -5,7 +5,7 @@
   align-content: center;
   align-self: stretch;
   margin-bottom: 40px;
-  height: 50px;
+  flex-wrap: wrap;
 }
 
 .header a {
@@ -22,4 +22,10 @@
   font-size: 24px;
   font-weight: 700;
   gap: 20px;
+  line-height: 50px;
+}
+
+.xs .actions,
+.sm .actions {
+  flex-basis: 100%;
 }