Implement new pages dropdown design in sidebar

packages/builder/src/userInterface/PagesList.svelte

@@ -7,54 +7,70 @@ const getPage = (s, name) => {
     return ({name, props});
 }
 
+const pages = [{
+    title: 'Main',
+    id: 'main'
+}, {
+    title: 'Login',
+    id: 'unauthenticated'
+}]
+
+store.setCurrentPage('main')
+
 </script>
 
 <div class="root">
-    <div class="hierarchy-item component" class:selected={$store.currentFrontEndType === "page" && $store.currentPageName === "main"}
+    <select id="page" name="select" on:change={({target}) => store.setCurrentPage(target.value)}>
-            on:click|stopPropagation={() => store.setCurrentPage("main")}>
-        <span>{@html getIcon("circle", "7")}</span>
-        <span class="title">Main</span>
-    </div>
 
-    <div class="hierarchy-item component" class:selected={$store.currentFrontEndType === "page" && $store.currentPageName === "unauthenticated"}
+    {#each pages as {title, id}}
-            on:click|stopPropagation={() => store.setCurrentPage("unauthenticated")}>
+        <option value="{id}">Page: {title}</option>
-        <span>{@html getIcon("circle", "7")}</span>
+    {/each}
-        <span class="title">Login</span>
-    </div>
 
+    </select>
+    <span class="arrow">{@html getIcon("chevron-down","24")}</span>
 </div>
 
 <style>
 
 .root {
     padding-bottom: 10px;
-    padding-left: 10px;
     font-size: .9rem;
     color: var(--secondary50);
     font-weight: bold;
+    position: relative;
 }
 
-.hierarchy-item {
+
-    cursor: pointer;
+select {
-    padding: 5px 0px;
+    display: block;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: 700;
+    color: #444;
+    line-height: 1.3;
+    padding: 1em 2.6em 0.9em 1.4em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border: none;
+    border-radius: .5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fafafa;
 }
 
-.hierarchy-item:hover {
+.arrow {
-    color: var(--secondary100);
+    position: absolute;
-}
+    right: 10px;
-
+    top: 0;
-.component {
+    bottom: 0;
-    margin-left: 5px;
+    margin: auto;
-}
+    width: 30px;
-
+    height: 30px;
-.selected {
+    pointer-events: none;
     color: var(--primary100);
-    font-weight: bold;
 }
 
-
+</style>
-.title {
-    margin-left: 10px;
-}
-
-</style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -29,6 +29,16 @@ const settings = () => {
 
     <div class="ui-nav">
 
+        <div class="pages-list-container">
+            <div class="nav-group-header">
+
+                <span class="navigator-title">Navigator</span>
+            </div>
+            <div class="nav-items-container">
+                <PagesList />
+            </div>
+        </div>
+
         <div class="components-list-container">
             <div class="nav-group-header">
                 <div>{@html getIcon("sidebar","18")}</div>
@@ -46,16 +56,6 @@ const settings = () => {
             </div>
         </div>
 
-        <div class="pages-list-container">
-            <div class="nav-group-header">
-                <div>{@html getIcon("grid","18")}</div>
-                <span>Pages</span>
-            </div>
-            <div class="nav-items-container">
-                <PagesList />
-            </div>
-        </div>
-
     </div>
 
     <div class="preview-pane">
@@ -111,10 +111,6 @@ const settings = () => {
     overflow-y: hidden;
 }
 
-.pages-list-container {
-    padding-top: 2rem;
-}
-
 .components-nav-header {
     font-size: .9rem;
 }
@@ -125,7 +121,7 @@ const settings = () => {
 }
 
 .nav-items-container {
-    padding: 1rem 1rem 0rem 1rem;
+    padding: 1rem 0rem 0rem 0rem;
 }
 
 .nav-group-header {
@@ -161,4 +157,10 @@ const settings = () => {
     color: var(--primary75);
 }
 
+.navigator-title {
+    text-transform: uppercase;
+    font-weight: 400;
+    color: #999;
+}
+
 </style>