adds navigation bar block component

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -52,28 +52,28 @@ export default {
               name: "Textfield",
               description: "A textfield component that allows the user to input text.",
               icon: 'ri-edit-box-line',
-              props: {}  
+              props: {}
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
               icon: 'ri-checkbox-line',
-              props: {}  
+              props: {}
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
               icon: 'ri-radio-button-line',
-              props: {}  
+              props: {}
             },
             {
               _component: "@budibase/standard-components/select",
               name: "Select",
               description: "A select component for choosing from different options",
               icon: 'ri-file-list-line',
-              props: {}  
+              props: {}
             }
           ]
         },
@@ -123,9 +123,10 @@ export default {
           children: []
         },
         {
-          name: 'Navbar',
+          name: "Navigation Bar",
-          description: 'A component for handling the navigation within your app.',
+          _component: "@budibase/standard-components/Navigation",
-          icon: 'ri-navigation-fill',
+          description: "A component for handling the navigation within your app.",
+          icon: "ri-navigation-fill",
           commonProps: {},
           children: []
         }

packages/standard-components/components.json

@@ -1,16 +1,32 @@
 {
 	"_lib": "./dist/index.js",
-	"_templates" : {
+	"_templates": {
-		"saveRecordButton" : {
+		"saveRecordButton": {
 			"description": "Save record button",
 			"component": "button"
 		}
 	},
-	"button" : {
+	"Navigation": {
+		"name": "Navigation",
+		"description": "A basic header navigation component",
+		"props": {
+			"logoUrl": "string",
+			"title": "string",
+			"backgroundColor": "string",
+			"color": "string",
+			"borderWidth": "string",
+			"borderColor": "string",
+			"borderStyle": "string"
+		}
+	},
+	"button": {
 		"name": "Button",
 		"description": "an html <button />",
 		"props": {
-			"contentText": { "type": "string", "default": "Button" },
+			"contentText": {
+				"type": "string",
+				"default": "Button"
+			},
 			"className": "string",
 			"disabled": "bool",
 			"onClick": "event",
@@ -22,76 +38,110 @@
 			"hoverBackground": "string",
 			"hoverBorder": "string"
 		},
-		"tags": ["layout"],
+		"tags": [
+			"layout"
+		],
 		"presets": {
 			"primary": {
 				"contentText": "Primary Button Preset",
-				"color": "papayawhip", 
+				"color": "papayawhip",
 				"padding": "20px",
 				"background": "blue"
 			},
 			"secondary": {
 				"contentText": "Secondary Button Preset",
-				"color": "rebeccapurple", 
+				"color": "rebeccapurple",
 				"padding": "10px",
 				"background": "#fff",
 				"border": "1px solid red"
 			},
 			"error": {
 				"contentText": "ERROR",
-				"color": "red", 
+				"color": "red",
 				"padding": "10px",
 				"border": "1px solid red"
 			}
-		} 
+		}
-	}, 
+	},
-	"login" : {
+	"login": {
 		"name": "Login Control",
 		"description": "A control that accepts username, password an also handles password resets",
-		"props" : {
+		"props": {
 			"logo": "asset",
 			"loginRedirect": "string",
-			"usernameLabel": {"type":"string", "default": "Username"},
+			"usernameLabel": {
-			"passwordLabel": {"type":"string", "default": "Password"},
+				"type": "string",
-			"loginButtonLabel": {"type":"string", "default": "Login"},
+				"default": "Username"
+			},
+			"passwordLabel": {
+				"type": "string",
+				"default": "Password"
+			},
+			"loginButtonLabel": {
+				"type": "string",
+				"default": "Login"
+			},
 			"buttonClass": "string",
 			"inputClass": "string"
 		},
-		"tags": ["login", "credentials", "password", "logon"]
+		"tags": [
+			"login",
+			"credentials",
+			"password",
+			"logon"
+		]
 	},
-	"input" : {
+	"input": {
 		"name": "Input",
 		"description": "An HTML input",
-		"props" : {
+		"props": {
 			"value": "string",
 			"type": {
-				"type":"options", 
+				"type": "options",
-				"options":[
+				"options": [
-					"text", "password", "checkbox", "color", 
+					"text",
-					"date", "datetime-local", "email", 
+					"password",
-					"file", "hidden", "image", "month", "number",
+					"checkbox",
-					"radio", "range", "reset", "search", "submit",
+					"color",
-					"tel", "time", "week"],
+					"date",
-				"default":"text"
+					"datetime-local",
+					"email",
+					"file",
+					"hidden",
+					"image",
+					"month",
+					"number",
+					"radio",
+					"range",
+					"reset",
+					"search",
+					"submit",
+					"tel",
+					"time",
+					"week"
+				],
+				"default": "text"
 			},
 			"onChange": "event",
 			"className": "string"
 		},
-		"tags": ["form"]
+		"tags": [
+			"form"
+		]
 	},
-	"select" : {
+	"select": {
 		"name": "Select",
 		"description": "An HTML <select> (dropdown)",
-		"props" : {
+		"props": {
 			"value": "string",
 			"className": "string"
 		}
 	},
-	"option" : {
+	"option": {
 		"name": "Option",
 		"description": "An HTML <option>, to be used with <select>",
 		"children": false,
-		"props" : {
+		"props": {
 			"value": "string",
 			"text": "string"
 		}
@@ -100,28 +150,32 @@
 		"name": "Text",
 		"description": "stylable block of text",
 		"children": false,
-		"props" : {
+		"props": {
 			"text": "string",
 			"font": "string",
 			"fontSize": "string",
 			"color": "string",
 			"textAlign": {
-				"type": "options", 
+				"type": "options",
-				"default":"inline", 
+				"default": "inline",
 				"options": [
-					"left", "center", "right"
+					"left",
+					"center",
+					"right"
 				]
 			},
 			"verticalAlign": {
-				"type": "options", 
+				"type": "options",
-				"default":"inline", 
+				"default": "inline",
 				"options": [
-					"top", "middle", "bottom"
+					"top",
+					"middle",
+					"bottom"
 				]
 			},
 			"formattingTag": {
-				"type": "options", 
+				"type": "options",
-				"default":"none", 
+				"default": "none",
 				"options": [
 					"none",
 					"<b> - bold",
@@ -137,7 +191,10 @@
 				]
 			}
 		},
-		"tags": ["div", "container"]
+		"tags": [
+			"div",
+			"container"
+		]
 	},
 	"textfield": {
 		"name": "Textfield",
@@ -166,13 +223,13 @@
 			"checked": "bool",
 			"value": "string",
 			"onchange": "event"
-		}	
+		}
 	},
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
 			"icon": "string",
-			"fontSize": "string" 
+			"fontSize": "string"
 		}
 	},
 	"link": {
@@ -200,11 +257,11 @@
 	"container": {
 		"name": "Container",
 		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
-		"props" : {
+		"props": {
-			"className":"string",
+			"className": "string",
 			"onLoad": "event",
 			"type": {
-				"type": "options", 
+				"type": "options",
 				"options": [
 					"article",
 					"aside",
@@ -227,7 +284,7 @@
 			"borderWidth": "string",
 			"borderColor": "string",
 			"borderStyle": {
-				"type":"options",
+				"type": "options",
 				"options": [
 					"none",
 					"solid",
@@ -241,21 +298,31 @@
 				],
 				"default": "none"
 			}
-
 		},
 		"container": true,
-		"tags": ["div", "container", "layout"]
+		"tags": [
+			"div",
+			"container",
+			"layout"
+		]
 	},
 	"heading": {
 		"name": "Heading",
 		"description": "An HTML H1 - H6 tag",
-		"props" : {
+		"props": {
-			"className":"string",
+			"className": "string",
 			"text": "string",
 			"type": {
 				"type": "options",
 				"default": "h1",
-				"options": ["h1","h2","h3","h4","h5","h6"]
+				"options": [
+					"h1",
+					"h2",
+					"h3",
+					"h4",
+					"h5",
+					"h6"
+				]
 			}
 		},
 		"tags": []
@@ -263,15 +330,15 @@
 	"thead": {
 		"name": "TableHead",
 		"description": "an HTML <thead> tab",
-		"props" : {
+		"props": {
-			"className":"string"
+			"className": "string"
 		}
 	},
 	"tbody": {
 		"name": "TableBody",
 		"description": "an HTML <tbody> tab",
-		"props" : {
+		"props": {
-			"className":"string"
+			"className": "string"
 		}
 	}
 }

packages/standard-components/src/Navigation.svelte

@@ -0,0 +1,75 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export let className = ""
+  export let onLoad
+  export let backgroundColor
+  export let color
+  export let borderWidth
+  export let borderColor
+  export let borderStyle
+  export let logoUrl
+  export let title
+  export let _bb
+
+  let itemContainer
+  let hasLoaded
+  let currentChildren
+
+  $: cssVariables = {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderStyle,
+  }
+
+  $: {
+    if (itemContainer) {
+      _bb.attachChildren(itemContainer)
+      if (!hasLoaded) {
+        _bb.call(onLoad)
+        hasLoaded = true
+      }
+    }
+  }
+</script>
+
+<nav use:cssVars={cssVariables}>
+  <a href="/">
+    <img class="logo" alt="logo" src={logoUrl} height="30" />
+    <span>{title}</span>
+  </a>
+  <div class="menu-items" bind:this={itemContainer} />
+</nav>
+
+<style>
+  nav {
+    color: var(--color);
+    background-color: var(--backgroundColor);
+    align-items: center;
+    display: flex;
+    font-weight: bold;
+    justify-content: space-between;
+    padding: 20px 0 20px 40px;
+  }
+
+  nav > a {
+    display: flex;
+    align-items: center;
+    font-size: 1.5em;
+    color: var(--color);
+    text-decoration: none;
+  }
+
+  nav a img {
+    border-radius: 15px;
+    margin-right: 15px;
+  }
+  .menu-items {
+    display: flex;
+  }
+  .menu-items > :global(*) {
+    margin: 0 10px;
+  }
+</style>

packages/standard-components/src/index.js

@@ -13,3 +13,4 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
 export { default as link } from "./Link.svelte"
 export { default as image } from "./Image.svelte"
 export { default as icon } from "./Icon.svelte"
+export { default as Navigation } from "./Navigation.svelte"