make links accessible

client/components/Nav.js

@@ -6,20 +6,20 @@ function Nav(props) {
     <nav className="nav">
       <ul className="nav__items-left">
         <li className="nav__item">
-          <p
+          <a
             className="nav__new"
             onClick={props.createProject}
           >
             New
-          </p>
+          </a>
         </li>
         <li className="nav__item">
-          <p
+          <a
             className="nav__save"
             onClick={props.saveProject}
           >
             Save
-          </p>
+          </a>
         </li>
         <li className="nav__item">
           <p className="nav__open">

client/modules/IDE/components/Sidebar.js

@@ -11,11 +11,13 @@ function Sidebar(props) {
             'sidebar__file-item--selected': file.id === props.selectedFile.id
           });
           return (
-            <li
-              className={itemClass}
-              key={file.id}
-              onClick={() => props.setSelectedFile(file.id)}
-            >{file.name}</li>
+            <li className={itemClass}>
+              <a
+                key={file.id}
+                onClick={() => props.setSelectedFile(file.id)}
+              >{file.name}
+              </a>
+            </li>
           );
         })}
       </ul>

client/styles/components/_sidebar.scss

@@ -5,8 +5,8 @@
 .sidebar__file-item {
   padding: #{8 / $base-font-size}rem #{20 / $base-font-size}rem;
   color: $light-inactive-text-color;
-}
-
-.sidebar__file-item--selected {
-  background-color: $ide-border-color;
+  cursor: pointer;
+  &--selected {
+    background-color: $ide-border-color;
+  }
 }