got react working

src/App.scss

@@ -5,8 +5,7 @@
 
 
 // Google Fonts
-@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
 
 // VARS/////////////////////////////////////////////////////////
 // Text
@@ -41,11 +40,13 @@ header {
 }
 
 nav {
+  width: 100%;
   ul {
     text-align: center;
     display: flex;
     flex-flow: row wrap;
-    justify-content: center;
+    // flex-grow: 1;
+    justify-content: space-evenly;
 
     li {
       list-style-type: none;
@@ -56,7 +57,7 @@ nav {
         border: none;
         padding: 2em;
         height: 100%;
-        width: 10em;
+        width: 100%;
       }
       button:hover {
         background-color: white;
@@ -68,15 +69,19 @@ nav {
 
 section {
   font-family: 'Barlow', sans-serif;
+  margin-left: 20%;
+  margin-right: 20%;
+  margin: 1em;
 
   h2 {
-    font-size: 16pt;
+    font-size: 25pt;
+    font-weight: bolder;
+    margin-left: 25%;
   }
 
   p {
     font-size: 14pt;
   }
-  margin: 1em;
 }
 
 // IMPORTS////////////////////////////////////////////////

src/App.tsx

@@ -6,97 +6,73 @@
 // Imports
 import React from 'react';
 import './App.scss';
+import * as content from './content/content.jsx';
 
 // Header JSX
-class Header extends React.Component{
-  render(){
+function Header(){
     return (
       <header>
         <h1>The Importance of Universal Design</h1>
       </header>
-    )}
-}
+)}
+
+class Content extends React.Component<{}, { content: string }> {
+  constructor(props:any){
+    super(props);
+    this.state = {
+      content: 'why',
+    }
+  }
 
-// Navigation Menu
-class Navbar extends React.Component{
-  renderLink(text:string) {
+  renderLink(text:string, contentKey:string) {
     return (
-      <li><button>{text}</button></li>
+      <li><button onClick={() => this.setState({content:contentKey})}>{text}</button></li>
     )
   }
 
+  renderContent(key:string) {
+    switch (key) {
+      case 'why':
+        return (<content.Why />);
+
+      case 'tenets':
+        return (<content.Tenets />);
+
+      case 'practices':
+        return (<content.Practices />);
+
+      default:
+        return (<content.Why />);
+    }
+  }
+
   render() {
     return (
+      <>
       <nav>
         <ul>
-          {this.renderLink('Why Universal Design?')}
-          {this.renderLink('Tenets')}
-          {this.renderLink('Practices')}
+          {this.renderLink('Why Universal Design?', 'why')}
+          {this.renderLink('Tenets', 'tenets')}
+          {this.renderLink('Practices', 'practices')}
         </ul>
       </nav>
+      {this.renderContent(this.state.content)}
+      </>
     );
   }
+
 }
 
-class Content extends React.Component {
-  // constructor(props){
-  //   super(props);
-  //   this.state = {
-  //     content: 'why',
-  //   }
-  // }
 
-  handleClick() {
-    console.log('hi');
-  }
 
-  render() {
-    return (
-      <Navbar />
-    );
-  }
-
-}
-
-// Content Section: Why Universal Design
-function Why() {
-  return(
-    <section id="why">
-      <h2>Why Universal Design?</h2>
-      <p>
-          Universal Design is a philosophy of design whose goals are to make something that works for the largest number of people. By incorporating inclusive design methods and implementing standards designed to help impaired users, a web designer can easily create accessible websites with only a few new tools.
-      </p>
-    </section>
-
-  )
-}
 
-// Content Section: Tenets of Universal Design
-function Tenets() {
-  return (
-    <section>
-      <h2>Tenets of Universal Design</h2>
-      <p></p>
-    </section>
-  )
-}
 
-// Content Section: Practices of Universal Design
-function Practices() {
-  return (
-    <section>
-      <h2>Practices of Universal Design</h2>
-      <p></p>
-    </section>
-  )
-}
 
 function App() {
   return (
     <>
       <Header />
-      <Navbar />
-      <Why />
+      <Content />
     </>
   );
 }

src/content/content.jsx

@@ -0,0 +1,46 @@
+// Andrew Barlow
+// Universal Design Spring 2021 Final
+
+// WEBSITE CONTENT////////////////////////////////////////////////////////
+
+// Content Section: Why Universal Design
+export function Why() {
+  return(
+    <section id="why">
+      <h2>Why Universal Design?</h2>
+      <p>
+          Universal Design is a philosophy of design whose goals are to make something that works for the largest number of people. By incorporating inclusive design methods and implementing standards designed to help impaired users, a web designer can easily create accessible websites with only a few new tools.
+      </p>
+    </section>
+
+  );
+}
+
+// Content Section: Tenets of Universal Design
+export function Tenets() {
+  return (
+    <section>
+      <h2>Tenets of Universal Design</h2>
+      <p>
+        Universal Design posits that the idea of "accessible design" falls short of the goalpost. Accessibility should not be an afterthought or specialty role of a developer, but should be a goal from the starting point of a website's design. It's main point being that accessible design is <em>good</em> design.
+      </p>
+    </section>
+  )
+}
+
+// Content Section: Practices of Universal Design
+export function Practices() {
+  return (
+    <section>
+      <h2>Practices of Universal Design</h2>
+      <h3>Semantic HTML</h3>
+      <p>
+        One of the most important ways to make a website universal is also the most straightforward. The HTML5 standard includes accessibility features baked into the default. By following the rules of semantic web design, a designer is already ahead of the curve. By properly tagging content, accessibility tools like screenreaders can display content in a friendly way to impaired users.
+      </p>
+      <h4>Images</h4>
+      <code>
+        &lt;img src="img/cute-dog.jpg" alt="A very cute puppy"&gt;
+      </code>
+    </section>
+  )
+}