Saving of nodes

static/less/main.less

@@ -9,7 +9,7 @@ html {
 body {
 	margin: 0px;
 	padding: 0px;
-	background-color: #333;
+	background-color: #444 !important;
 }
 
 *,
@@ -26,14 +26,105 @@ body {
 	cursor: pointer;
 }
 
-#nodes {
+.section {
 	background-color: #fff;
 	padding: 32px;
 	border-radius: 8px;
-	margin: 32px;
+	display: none;
+
+	&.show {
+		display: block;
+	}
+}
+
+#layout {
+	display: grid;
+	grid-template-areas:
+	     "menu       menu"
+	     "navigation details"
+	;
+	grid-template-columns: min-content 1fr;
+	grid-gap: 32px;
+	padding: 32px;
+}
+
+#menu {
+	grid-area: menu;
+	grid-template-columns: repeat(100, min-content);
+	grid-gap: 16px;
+	align-items: center;
+
+	&.section {
+		display: grid;
+		padding: 16px 32px;
+	}
+
+	.item {
+		cursor: pointer;
+
+		&.selected {
+			font-weight: bold;
+		}
+	}
+}
+
+#logo {
+	img {
+		height: 96px;
+		margin-right: 32px;
+	}
+}
+
+
+#nodes {
+	grid-area: navigation;
 	width: min-content;
 }
 
+#editor-node {
+	grid-area: details;
+}
+
+#types {
+	grid-area: navigation;
+
+	.group {
+		font-weight: bold;
+		white-space: nowrap;
+		margin-top: 32px;
+		margin-bottom: 8px;
+
+		&:first-child {
+			margin-top: 0px;
+		}
+	}
+
+	.type {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 8px;
+		align-items: center;
+		cursor: pointer;
+		margin-bottom: 8px;
+
+		.img {
+			img {
+				height: 24px;
+				display: inline;
+			}
+		}
+
+		.title {
+			white-space: nowrap;
+			line-height: 24px;
+		}
+	}
+}
+
+#editor-type-schema {
+	grid-area: details;
+}
+
 .node {
 	display: grid;
 	grid-template-columns: min-content min-content 100%;
@@ -54,7 +145,7 @@ body {
 		padding-right: 8px;
 
 		&.leaf {
-			width: 36px;
+			width: 40px;
 			img {
 				display: none;
 			}
@@ -65,17 +156,18 @@ body {
 		}
 	}
 
-	.icon {
-		padding-right: 8px;
+	.type-icon {
+		padding-right: 4px;
 
 		img {
-			filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
+			filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85) !important;
 		}
 	}
 
 	.name {
 		margin-bottom: 8px;
 		line-height: 24px;
+		cursor: pointer;
 	}
 
 	.children {