Saving of nodes

static/css/main.css

@@ -8,7 +8,7 @@ html {
 body {
   margin: 0px;
   padding: 0px;
-  background-color: #333;
+  background-color: #444 !important;
 }
 *,
 *:before,
@@ -21,13 +21,80 @@ body {
 [onClick] {
   cursor: pointer;
 }
-#nodes {
+.section {
   background-color: #fff;
   padding: 32px;
   border-radius: 8px;
-  margin: 32px;
+  display: none;
+}
+.section.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;
+}
+#menu.section {
+  display: grid;
+  padding: 16px 32px;
+}
+#menu .item {
+  cursor: pointer;
+}
+#menu .item.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;
+}
+#types .group {
+  font-weight: bold;
+  white-space: nowrap;
+  margin-top: 32px;
+  margin-bottom: 8px;
+}
+#types .group:first-child {
+  margin-top: 0px;
+}
+#types .type {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+#types .type .img img {
+  height: 24px;
+  display: inline;
+}
+#types .type .title {
+  white-space: nowrap;
+  line-height: 24px;
+}
+#editor-type-schema {
+  grid-area: details;
+}
 .node {
   display: grid;
   grid-template-columns: min-content min-content 100%;
@@ -44,7 +111,7 @@ body {
   padding-right: 8px;
 }
 .node .expand-status.leaf {
-  width: 36px;
+  width: 40px;
 }
 .node .expand-status.leaf img {
   display: none;
@@ -52,15 +119,16 @@ body {
 .node .expand-status img {
   cursor: pointer;
 }
-.node .icon {
-  padding-right: 8px;
+.node .type-icon {
+  padding-right: 4px;
 }
-.node .icon img {
-  filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
+.node .type-icon img {
+  filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85) !important;
 }
 .node .name {
   margin-bottom: 8px;
   line-height: 24px;
+  cursor: pointer;
 }
 .node .children {
   display: none;