Fixed bits of menu, added styles

src/menu.js

@@ -21,17 +21,17 @@ $("#importUpload").change(function(){ //when a file is selected
   reader.readAsText(this.files[0]); //read the file as text, this will call the above function when complete
 });
 
-$("#header>a#projectName").click(function(){
+$("#header a#projectName").click(function(){
   do{
     diagram.name = prompt("Please enter a name for the diagram", diagram.name);
   }
   while(!diagram.name); //keep asking for a new name until a valid one is entered
-  $("#header>a#projectName").html(diagram.name);
+  $("#header a#projectName").html(diagram.name);
 });
 
 events.subscribe("diagramImport", function(){
   //update displayed name when new diagram imported
-  $("#header>a#projectName").html(diagram.name);
+  $("#header a#projectName").html(diagram.name);
 });
 
 $("#header a#addSnapshot").click(function(){
@@ -41,7 +41,7 @@ $("#header a#addSnapshot").click(function(){
 
 events.subscribe(["snapshotsChanged", "diagramImport"], function(){
   $("#snapshots>.snapshot").remove();
-  diagram.snapshots.sort((a, b)=>(b.date - a.date));
+  diagram.snapshots.sort((a, b)=>(b.date - a.date)); //sort with newest first
   for(var i in diagram.snapshots){
     var date = new Date(diagram.snapshots[i].date);
     $("#snapshots").append(

src/styles.scss

@@ -86,3 +86,64 @@ body{
     pointer-events: none;
   }
 }
+
+#header, #header ul{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#header{
+  $headerColour: rgba(0, 0, 0, 0.7);
+
+  display: flex;
+  flex-direction: row;
+  background-color: $headerColour;
+  >li{
+    text-align: center;
+    display: flex;
+    flex-grow: 1;
+    max-width: 150px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-right: solid 1px rgba(255, 255, 255, 0.8);
+    >a{
+      margin: auto;
+      color: white;
+      text-decoration: none;
+    }
+  }
+
+  >li:last-child{
+    position: relative;
+    min-width: 150px;
+    ul#snapshots{
+      display: none;
+    }
+    &:hover{
+      ul#snapshots{
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background-color: white;
+        width: 100%;
+        border: 1px solid $headerColour;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        li{
+          padding-top: 5px;
+          padding-bottom: 5px;
+          border-bottom: 1px solid $headerColour;
+          &:last-child{
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+  ul#snapshots{
+    display: none;
+  }
+}