new nav

src/components/Nav.svelte

@@ -6,6 +6,8 @@
 <nav>
   <NavItem {segment} href="." matchingSegment={undefined} humanName="home" />
 
+  <NavItem {segment} href="./faq" matchingSegment="faq" humanName="faq" />
+
   <NavItem
     {segment}
     href="./about-contact"
@@ -14,9 +16,28 @@
   />
 
   <div class="dropdown">
-    <div class="dropdown-name">drop</div>
+    <div class="dropdown-name">more</div>
     <div class="dropdown-content">
-      <p>Hello World!</p>
+      <NavItem
+        {segment}
+        href="./global-open-infrastructure"
+        matchingSegment="global-open-infrastructure"
+        humanName="global open infrastructure"
+      />
+
+      <NavItem
+        {segment}
+        href="./privacy-by-design"
+        matchingSegment="privacy-by-design"
+        humanName="privacy by design"
+      />
+
+      <NavItem
+        {segment}
+        href="./free-open-source"
+        matchingSegment="free-open-source"
+        humanName="free and open-source"
+      />
     </div>
   </div>
 </nav>
@@ -35,8 +56,7 @@
 
   .dropdown {
     height: 100%;
-    padding-left: 0.5em;
+    width: 49px;
-    padding-right: 0.5em;
   }
 
   .dropdown-name {
@@ -48,16 +68,22 @@
 
   .dropdown-content {
     display: none;
-    position: absolute;
+    position: relative;
+    right: 181px;
+    box-sizing: border-box;
     background-color: #f9f9f9;
     color: black;
-    min-width: 160px;
+    width: 230px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    padding: 12px 16px;
     z-index: 1;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 1em;
+    padding-bottom: 1em;
   }
 
   .dropdown:hover .dropdown-content {
     display: block;
+    box-sizing: border-box;
   }
 </style>