src/main/java/com/primefactorsolutions/views/MainLayout.java

@@ -1,13 +1,18 @@
 package com.primefactorsolutions.views;
 
 import com.primefactorsolutions.model.Employee;
+import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.applayout.AppLayout;
 import com.vaadin.flow.component.applayout.DrawerToggle;
-import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.avatar.Avatar;
-import com.vaadin.flow.component.html.Footer;
+import com.vaadin.flow.component.contextmenu.HasMenuItems;
-import com.vaadin.flow.component.html.H1;
+import com.vaadin.flow.component.contextmenu.MenuItem;
-import com.vaadin.flow.component.html.Header;
+import com.vaadin.flow.component.contextmenu.SubMenu;
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.*;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import com.vaadin.flow.component.menubar.MenuBar;
+import com.vaadin.flow.component.menubar.MenuBarVariant;
 import com.vaadin.flow.component.orderedlayout.FlexComponent;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.Scroller;
@@ -38,18 +43,26 @@ public class MainLayout extends AppLayout {
     }
 
     private void addHeaderContent() {
-        DrawerToggle toggle = new DrawerToggle();
+        final DrawerToggle toggle = new DrawerToggle();
         toggle.setAriaLabel("Menu toggle");
 
         viewTitle = new H1();
         viewTitle.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE);
 
-        HorizontalLayout
+        final HorizontalLayout header = authContext.getAuthenticatedUser(UserDetails.class)
-                header =
-                authContext.getAuthenticatedUser(UserDetails.class)
                 .map(user -> {
-                            final Button logout = new Button("Logout", click -> this.authContext.logout());
+                    final Avatar loggedUser = new Avatar(user.getUsername());
-                            final Span loggedUser = new Span("Welcome " + user.getUsername());
+                    loggedUser.getStyle().set("display", "block");
+                    loggedUser.getElement().setAttribute("tabindex", "-1");
+                    final MenuBar menuBar = new MenuBar();
+                    menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON);
+                    final MenuItem actions = createIconItem(menuBar, VaadinIcon.ELLIPSIS_V, null, "",
+                            false);
+                    final SubMenu actionsSubMenu = actions.getSubMenu();
+                    final MenuItem signOutMenuItem = createIconItem(actionsSubMenu, VaadinIcon.EXIT, "Sign-out",
+                            null, true);
+                    signOutMenuItem.addClickListener(c -> this.authContext.logout());
+
                     String employeeId = "N/A";
 
                     if (user instanceof Employee) {
@@ -64,7 +77,7 @@ public class MainLayout extends AppLayout {
                             .withText("Employee id: " + employeeId)
                             .withPosition(Tooltip.TooltipPosition.TOP_START);
 
-                            final HorizontalLayout hl = new HorizontalLayout(loggedUser, logout);
+                    final HorizontalLayout hl = new HorizontalLayout(loggedUser, menuBar);
                     hl.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
 
                     return hl;
@@ -75,18 +88,40 @@ public class MainLayout extends AppLayout {
         addToNavbar(true, toggle, viewTitle, header);
     }
 
+    private MenuItem createIconItem(final HasMenuItems menu, final VaadinIcon iconName,
+                                    final String label, final String ariaLabel, final boolean isChild) {
+        final Icon icon = new Icon(iconName);
+
+        if (isChild) {
+            icon.getStyle().set("width", "var(--lumo-icon-size-s)");
+            icon.getStyle().set("height", "var(--lumo-icon-size-s)");
+            icon.getStyle().set("marginRight", "var(--lumo-space-s)");
+        }
+
+        final MenuItem item = menu.addItem(icon, e -> {
+        });
+
+        if (ariaLabel != null) {
+            item.setAriaLabel(ariaLabel);
+        }
+
+        if (label != null) {
+            item.add(new Text(label));
+        }
+
+        return item;
+    }
+
     private void addDrawerContent() {
-        Span appName = new Span("pfs-intra");
+        final Span appName = new Span("pfs-intra");
         appName.addClassNames(LumoUtility.FontWeight.SEMIBOLD, LumoUtility.FontSize.LARGE);
-        Header header = new Header(appName);
+        final Header header = new Header(appName);
-
+        final Scroller scroller = new Scroller(createNavigation());
-        Scroller scroller = new Scroller(createNavigation());
-
         addToDrawer(header, scroller, createFooter());
     }
 
     private SideNav createNavigation() {
-        SideNav nav = new SideNav();
+        final SideNav nav = new SideNav();
 
         authContext.getAuthenticatedUser(UserDetails.class).ifPresent(u -> {
             SideNavItem recruiting = new SideNavItem("Recruiting", MainView.class,
@@ -99,7 +134,7 @@ public class MainLayout extends AppLayout {
                     LineAwesomeIcon.QUESTION_SOLID.create()));
 
             SideNavItem admin = new SideNavItem("Admin", MainView.class,
-                    LineAwesomeIcon.SUPERSCRIPT_SOLID.create());
+                    LineAwesomeIcon.BUILDING.create());
             admin.addItem(new SideNavItem("Employees", EmployeesListView.class,
                     LineAwesomeIcon.USER_EDIT_SOLID.create()));
             admin.addItem(new SideNavItem("Documents", DocumentsListView.class,
@@ -129,9 +164,7 @@ public class MainLayout extends AppLayout {
     }
 
     private Footer createFooter() {
-        Footer layout = new Footer();
+        return new Footer();
-
-        return layout;
     }
 
     @Override