Update Navigation Bar (#307)

* Update Navigation Bar

Updated the Navbar to follow the order
given by PageOrder in globalTypes.ts

* Update Sidebar.scss

Changed the dropdown-header to flex instead of block
allowed for all headings to be centered vertically

* Update Sidebar.scss

Fixed the lint error, i didn't alphabetically
order the css

src/components/Sidebar.tsx

@@ -148,15 +148,16 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       <div className="dropdown-header">
         <a href={PageURLs.POINTER_MOTIVATION}>Why Pointers?</a>
       </div>
-      <Dropdown title="Lessons" list={lessonList} />
-      <Dropdown title="Exercises" list={exerciseList} />
       {/* TODO: delete Demo and Error links before production! */}
       <div className="dropdown-header">
         <a href={PageURLs.DEMO}>Demo</a>
       </div>
-      <div className="dropdown-header">
+      <Dropdown title="Lessons" list={lessonList} />
+      <Dropdown title="Exercises" list={exerciseList} />
+      {/* TODO: delete Demo and Error links before production! */}
+      {/* <div className="dropdown-header">
         <a href="/error">Error</a>
-      </div>
+      </div> */}
     </div>
   );
 }

src/styles/Sidebar.scss

@@ -35,9 +35,10 @@ $sidebar-width: 357px;
 }
 
 .dropdown-header {
+  align-items: center;
   color: $text-color;
   cursor: pointer;
-  display: block;
+  display: flex;
   font-family: $play;
   font-size: 24px;
   height: 47px;