adds navigation bar block component

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

@@ -123,9 +123,10 @@ export default {
           children: []
         },
         {
-          name: 'Navbar',
-          description: 'A component for handling the navigation within your app.',
-          icon: 'ri-navigation-fill',
+          name: "Navigation Bar",
+          _component: "@budibase/standard-components/Navigation",
+          description: "A component for handling the navigation within your app.",
+          icon: "ri-navigation-fill",
           commonProps: {},
           children: []
         }

packages/standard-components/components.json

@@ -6,11 +6,27 @@
 			"component": "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,7 +38,9 @@
 			"hoverBackground": "string",
 			"hoverBorder": "string"
 		},
-		"tags": ["layout"],
+		"tags": [
+			"layout"
+		],
 		"presets": {
 			"primary": {
 				"contentText": "Primary Button Preset",
@@ -51,13 +69,27 @@
 		"props": {
 			"logo": "asset",
 			"loginRedirect": "string",
-			"usernameLabel": {"type":"string", "default": "Username"},
-			"passwordLabel": {"type":"string", "default": "Password"},
-			"loginButtonLabel": {"type":"string", "default": "Login"},
+			"usernameLabel": {
+				"type": "string",
+				"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": {
 		"name": "Input",
@@ -67,17 +99,35 @@
 			"type": {
 				"type": "options",
 				"options": [
-					"text", "password", "checkbox", "color", 
-					"date", "datetime-local", "email", 
-					"file", "hidden", "image", "month", "number",
-					"radio", "range", "reset", "search", "submit",
-					"tel", "time", "week"],
+					"text",
+					"password",
+					"checkbox",
+					"color",
+					"date",
+					"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": {
 		"name": "Select",
@@ -109,14 +159,18 @@
 				"type": "options",
 				"default": "inline",
 				"options": [
-					"left", "center", "right"
+					"left",
+					"center",
+					"right"
 				]
 			},
 			"verticalAlign": {
 				"type": "options",
 				"default": "inline",
 				"options": [
-					"top", "middle", "bottom"
+					"top",
+					"middle",
+					"bottom"
 				]
 			},
 			"formattingTag": {
@@ -137,7 +191,10 @@
 				]
 			}
 		},
-		"tags": ["div", "container"]
+		"tags": [
+			"div",
+			"container"
+		]
 	},
 	"textfield": {
 		"name": "Textfield",
@@ -241,10 +298,13 @@
 				],
 				"default": "none"
 			}
-
 		},
 		"container": true,
-		"tags": ["div", "container", "layout"]
+		"tags": [
+			"div",
+			"container",
+			"layout"
+		]
 	},
 	"heading": {
 		"name": "Heading",
@@ -255,7 +315,14 @@
 			"type": {
 				"type": "options",
 				"default": "h1",
-				"options": ["h1","h2","h3","h4","h5","h6"]
+				"options": [
+					"h1",
+					"h2",
+					"h3",
+					"h4",
+					"h5",
+					"h6"
+				]
 			}
 		},
 		"tags": []

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"