Change navigation to Hello and World

Author: dargaCode

src/components/navigation/NavigationBar.module.scss

@@ -35,28 +35,14 @@
 
 .container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 0;
 
   @include break.under(medium) {
     flex-direction: column;
   }
 }
 
-.about {
-  color: config.$nav-bar-logo-text-color;
-  font-weight: 700;
-  padding: 15px 0;
-
-  @include break.under(medium) {
-    padding: 8px 0 0;
-  }
-
-  &:hover {
-    color: config.$nav-bar-logo-hover-text-color;
-  }
-}
-
 .button {
   a {
     color: inherit;

src/components/navigation/NavigationBar.test.tsx

@@ -4,17 +4,13 @@ import NavigationBar from "./NavigationBar";
 
 describe("`NavigationBar`", () => {
   describe("render", () => {
-    it("should include NavLinks for all 5 sections", () => {
+    it("should include NavLinks for all 2 sections", () => {
       const wrapper = shallow(<NavigationBar />);
-
       const navLinks = wrapper.find("NavLink");
 
-      expect(navLinks).toHaveLength(5);
-      expect(navLinks.at(0).prop("to")).toBe("/about");
-      expect(navLinks.at(1).prop("to")).toBe("/skills");
-      expect(navLinks.at(2).prop("to")).toBe("/projects");
-      expect(navLinks.at(3).prop("to")).toBe("/resume");
-      expect(navLinks.at(4).prop("to")).toBe("/contact");
+      expect(navLinks).toHaveLength(2);
+      expect(navLinks.at(0).prop("to")).toBe("/hello");
+      expect(navLinks.at(1).prop("to")).toBe("/world");
     });
   });
 });

src/components/navigation/NavigationBar.tsx

@@ -11,32 +11,16 @@ export default function NavigationBar(): JSX.Element {
         <h2 className={styles.invisibleButOutlineReadable}>Navigation</h2>
       </div>
       <div className={styles.container}>
-        <NavLink to="/about" activeClassName="activeNavSection">
-          <div className={styles.about}>Hi, I&apos;m Darga.</div>
-        </NavLink>
-
         <ul>
           <li className={styles.button}>
-            <NavLink to="/skills" activeClassName="activeNavSection">
-              Skills
-            </NavLink>
-          </li>
-
-          <li className={styles.button}>
-            <NavLink to="/projects" activeClassName="activeNavSection">
-              Projects
-            </NavLink>
-          </li>
-
-          <li className={styles.button}>
-            <NavLink to="/resume" activeClassName="activeNavSection">
-              Resume
+            <NavLink to="/hello" activeClassName="activeNavSection">
+              Hello
             </NavLink>
           </li>
 
           <li className={styles.button}>
-            <NavLink to="/contact" activeClassName="activeNavSection">
-              Contact
+            <NavLink to="/world" activeClassName="activeNavSection">
+              World
             </NavLink>
           </li>
         </ul>

src/index.tsx

@@ -29,10 +29,10 @@ function App(): JSX.Element {
         </header>
 
         <Switch>
-          <Route path="/about" component={AboutSection} />
-          <Route path="/skills" component={SkillsSectionContainer} />
+          <Route path="/hello" component={AboutSection} />
+          <Route path="/world" component={SkillsSectionContainer} />
 
-          <Redirect from="/" to="about" />
+          <Redirect from="/" to="hello" />
         </Switch>
       </div>
     </Router>