Add MenuSeparator component

Author: javier-godoy

src/main/java/com/flowingcode/addons/applayout/AppDrawer.java

@@ -67,8 +67,7 @@ public AppDrawer(Component headerComponent) {
     		pm.getElement().executeJs("this.style.height='calc(100% - '+($0.scrollHeight+16)+'px)'", header);
     		r[0].remove();
     	});
-    	
-    	getElement().getStyle().set("--fc-separator-background-color", "var(--app-drawer-content-container_-_background-color)");
+    	    	
     	removeAll();
     }
 
@@ -105,7 +104,7 @@ public void removeAll() {
     	this.add(pm);
     }
 
-	public void setMenuItems(Collection<MenuItem> menuItems) {
+	public void setMenuItems(Collection<? extends Component> menuItems) {
 		pm.removeAll();
     	menuItems.stream().forEach(pm::add);
     }

src/main/java/com/flowingcode/addons/applayout/AppLayout.java

@@ -85,7 +85,7 @@ public void setHeight(String height) {
 		header.setHeight(height);
 	}
 
-	public void setMenuItems(MenuItem... menuitems) {
+	public void setMenuItems(Component... menuitems) {
 		drawer.setMenuItems(Arrays.asList(menuitems));
 	}
 

src/main/java/com/flowingcode/addons/applayout/MenuSeparator.java

@@ -0,0 +1,13 @@
+package com.flowingcode.addons.applayout;
+
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+
+@JsModule("./fc-applayout/fc-separator.js")
+@Tag("fc-separator")
+public class MenuSeparator extends Component {
+
+	private static final long serialVersionUID = 1L;
+
+}

src/main/resources/META-INF/frontend/fc-applayout/fc-separator.js

@@ -0,0 +1,55 @@
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/*
+Styles: 
+	--fc-separator-border-color	
+	--fc-separator-text-padding
+ */
+class MenuSeparator extends ThemableMixin(PolymerElement) {
+	static get is() { return 'fc-separator'; }
+	
+	static get template() {
+		//Based on https://stackoverflow.com/a/28434792/1297272
+		//(C) 2015 CC-BY-SA https://stackoverflow.com/users/677418/sleek-geek
+		return html`
+		<style>
+			:host {
+			    display: flex;
+    			justify-content: center;
+    			opacity: 0.6;
+    		}
+			:host div {
+				width: 100%;
+				text-align: center;
+				position: relative;
+			}
+			
+			:host div:after {
+				content: '';
+				width: 100%;
+				position: absolute;
+				border-bottom: solid 1px var(--fc-separator-border-color, rgba(0,0,0, 0.6));
+				left: 0;
+				top: 50%;
+				z-index: 1;
+			}
+			
+			:host span {
+				width: auto;
+				display: inline-block;
+				z-index: 3;
+				padding: 0 var(--fc-separator-text-padding, 8px) 0 var(--fc-separator-text-padding, 8px);
+				position: relative;
+			}
+		</style>
+		<div>
+			<span><slot></slot></span>
+		</div>
+	`;}
+
+}	
+	
+customElements.define(MenuSeparator.is, MenuSeparator);

src/main/resources/META-INF/frontend/styles/applayout-styles.css

@@ -38,6 +38,10 @@ app-drawer {
     z-index: 1000;
 }
 
+fc-separator {
+  --fc-separator-border-color: rgba(0,0,20,0.6);
+}
+
 app-drawer paper-listbox {
     overflow-y: auto;
 }

src/test/java/com/flowingcode/addons/applayout/DemoView.java

@@ -68,7 +68,7 @@ public DemoView() {
 		this.setMargin(false);
 
 		app.setMenuItems(createMenuItems());
-
+		
 		app.setToolbarIconButtons(miSettings);
 		this.add(app, container);
 
@@ -175,15 +175,15 @@ private void toggleSettings(MenuItem toggleSettings) {
 		}		
 	}
 
-	private MenuItem[] createMenuItems() {
+	private Component[] createMenuItems() {
 
 		MenuItem mi = new MenuItem("Say hello", () -> showContent("Hello!")).setIcon("settings");
 
 		MenuItem miToggleSettings = new MenuItem().setIcon("settings");
 		miToggleSettings.setCommand(() -> toggleSettings(miToggleSettings));
 		toggleSettings(miToggleSettings);
 
-		return new MenuItem[] {
+		return new Component[] {
 				//icon as VaadinIcon enum
 				new MenuItem("Content", VaadinIcon.BOOK, () -> showHamletContent())
 					.setCommand(MouseButton.MIDDLE, ()->{
@@ -212,7 +212,7 @@ private MenuItem[] createMenuItems() {
 							.add(new MenuItem("And Again",()->showContent("And Again!")))
 						),
 
-				new MenuItem("------"),
+				new MenuSeparator(),
 
 				new MenuItem("Item 1"),
 				new MenuItem("Item 2"),