Add a user menu

penguineer · Jul 19, 2024 · a1d0c7c · a1d0c7c
1 parent 955c540
commit a1d0c7c
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/frontend/themes/gartenplus/styles.css b/frontend/themes/gartenplus/styles.css
@@ -1 +1,13 @@
-/* GartenPlus theme */
+/* GartenPlus theme */
+
+vaadin-menu-bar-button[theme="icon"] {
+    background: unset;
+    color: var(--lumo-base-color) !important;
+    height: 100%;
+}
+
+vaadin-menu-bar-overlay[theme="icon"] {
+    z-index: 1000;
+    top: 64px !important;
+}
+
diff --git a/src/main/java/com/penguineering/gartenplus/ui/appframe/LoggedUserView.java b/src/main/java/com/penguineering/gartenplus/ui/appframe/LoggedUserView.java
@@ -1,9 +1,17 @@
 package com.penguineering.gartenplus.ui.appframe;
 
 import com.penguineering.gartenplus.auth.user.UserDTO;
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.avatar.Avatar;
 import com.vaadin.flow.component.avatar.AvatarVariant;
+import com.vaadin.flow.component.contextmenu.MenuItem;
+import com.vaadin.flow.component.contextmenu.SubMenu;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.IconFactory;
+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 org.slf4j.Logger;
@@ -17,21 +25,16 @@ public class LoggedUserView extends Div {
     Logger logger = LoggerFactory.getLogger(LoggedUserView.class);
 
     final Avatar avatar;
+    final MenuBar userMenu;
 
     public LoggedUserView(Supplier<UserDTO> currentUser) {
         Optional<UserDTO> optUser = Optional.ofNullable(currentUser.get());
 
-        HorizontalLayout avatarLayout = new HorizontalLayout();
-        avatarLayout.setAlignItems(FlexComponent.Alignment.CENTER);
-
         avatar = new Avatar();
         avatar.setId("logged-user-avatar");
         avatar.addThemeVariants(AvatarVariant.LUMO_LARGE);
         avatar.setTooltipEnabled(true);
 
-        avatarLayout.add(avatar);
-        add(avatarLayout);
-
         // Set the user's name
         optUser.
                 map(UserDTO::displayName)
@@ -42,5 +45,44 @@ public LoggedUserView(Supplier<UserDTO> currentUser) {
                 .map(UserDTO::avatarUrl)
                 .map(URI::toASCIIString)
                 .ifPresent(avatar::setImage);
+
+
+        // Set up the menu
+        userMenu = new MenuBar();
+        userMenu.addThemeVariants(MenuBarVariant.LUMO_ICON);
+        userMenu.setHeightFull();
+
+        MenuItem menuItem = userMenu.addItem(avatar);
+        SubMenu subMenu = menuItem.getSubMenu();
+
+        subMenu.addItem(createMenuItemWithIcon("Profil", VaadinIcon.USER),
+                e -> navigateTo("/admin/profile"));
+        //subMenu.addSeparator();
+        //subMenu.addSeparator();
+        subMenu.addItem(createMenuItemWithIcon("Abmelden", VaadinIcon.SIGN_OUT),
+                e -> navigateTo("/admin/logout"));
+
+        add(userMenu);
+
+    }
+
+    private Component createMenuItemWithIcon(String text, IconFactory icon) {
+        HorizontalLayout menuItem = new HorizontalLayout();
+
+        menuItem.setWidthFull();
+        menuItem.setPadding(false);
+        menuItem.setMargin(false);
+        // menuItem.setSpacing(false);
+
+        var iconComponent = icon.create();
+        iconComponent.setSize("var(--lumo-icon-size-s)");
+        menuItem.add(iconComponent);
+        menuItem.add(text);
+
+        return menuItem;
+    }
+
+    private void navigateTo(String path) {
+        getUI().ifPresent(ui -> ui.navigate(path));
     }
 }