PR: Toolbar samples

src/main/java/com/webforj/samples/views/toolbar/ToolbarCompactView.java

@@ -0,0 +1,78 @@
+package com.webforj.samples.views.toolbar;
+
+import com.webforj.Interval;
+import com.webforj.dispatcher.EventListener;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+import com.webforj.component.html.elements.H1;
+import com.webforj.component.html.elements.Img;
+import com.webforj.component.Composite;
+import com.webforj.component.Theme;
+import com.webforj.component.Expanse;
+import com.webforj.component.button.Button;
+import com.webforj.component.progressbar.ProgressBar;
+import com.webforj.component.toast.Toast;
+import com.webforj.component.layout.applayout.AppDrawerToggle;
+import com.webforj.component.layout.applayout.AppLayout;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.component.layout.toolbar.Toolbar;
+
+@Route
+@FrameTitle("Toolbar Compact")
+public class ToolbarCompactView extends Composite<AppLayout> {
+
+  AppLayout appLayout = getBoundComponent();
+  Button analyzeButton = new Button("Analyze data");
+  ProgressBar bar = new ProgressBar();
+  Toast toast = new Toast("No data to analyze!", Theme.WARNING);
+  Toolbar mainToolbar = new Toolbar();
+  Toolbar progressToolbar = new Toolbar();
+  int delayStart = -2;
+
+  public ToolbarCompactView() {
+
+    mainToolbar.addToStart(new AppDrawerToggle());
+    mainToolbar.addToTitle(new H1("webforJ App"));
+
+    bar.setHeight("clamp(3px, calc(-0.01 * 100vw + 15px), 12px)");
+
+    progressToolbar.addToContent(bar);
+    progressToolbar.setCompact(true);
+
+    Interval interval = new Interval(0.1f, new EventListener<Interval.ElapsedEvent>() {
+      @Override
+      public void onEvent(Interval.ElapsedEvent event) {
+
+        Integer progress = bar.getValue() + ++delayStart;
+        bar.setValue(progress);
+
+        if (progress >= bar.getMax()) {
+          event.getInterval().stop();
+          bar.setAnimated(false);
+          analyzeButton.setEnabled(true);
+          toast.open();
+        }
+      }
+    });
+
+    analyzeButton.setDisableOnClick(true);
+    analyzeButton.setExpanse(Expanse.XLARGE);
+
+    analyzeButton.onClick(e -> {
+      bar.setValue(0);
+      delayStart = -2;
+      interval.restart();
+    });
+
+    FlexLayout flexLayout = FlexLayout.create(analyzeButton)
+        .justify().center()
+        .build();
+
+    appLayout.setDrawerHeaderVisible(true)
+        .addToDrawerTitle(new Img("https://documentation.webforj.com/img/webforj_icon.svg"))
+        .addToHeader(mainToolbar, progressToolbar)
+        .addToContent(flexLayout)
+        .setDrawerOpened(false);
+
+  }
+}

src/main/java/com/webforj/samples/views/toolbar/ToolbarMobileAppView.java

@@ -0,0 +1,74 @@
+package com.webforj.samples.views.toolbar;
+
+import com.webforj.annotation.InlineStyleSheet;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+import com.webforj.component.html.elements.Div;
+import com.webforj.component.html.elements.H1;
+import com.webforj.component.html.elements.H2;
+import com.webforj.component.html.elements.Paragraph;
+import com.webforj.component.Composite;
+import com.webforj.component.button.Button;
+import com.webforj.component.icons.IconButton;
+import com.webforj.component.icons.TablerIcon;
+import com.webforj.component.layout.applayout.AppLayout;
+import com.webforj.component.layout.applayout.AppLayout.DrawerPlacement;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.component.layout.toolbar.Toolbar;
+
+@InlineStyleSheet("context://css/toolbar/toolbarMobile.css")
+@Route
+@FrameTitle("Toolbar Mobile App")
+public class ToolbarMobileAppView extends Composite<AppLayout> {
+
+  AppLayout appLayout = getBoundComponent();
+  Button analyzeButton = new Button("Analyze data");
+  Toolbar footerToolbar = new Toolbar();
+  Toolbar headerToolbar = new Toolbar();
+
+  public ToolbarMobileAppView() {
+
+    headerToolbar.add(new H1("webforJ App"));
+
+    FlexLayout flexLayout = FlexLayout.create(new H1("Aplication Title"))
+        .vertical()
+        .justify().center()
+        .build()
+        .setMargin("50px");
+
+    for (int i = 0; i < 5; i++) {
+      Div content = new Div().addClassName("card");
+      content.add(
+          new H2("What is Lorem Ipsum " + i + "?"),
+          new Paragraph("Lorem Ipsum is simply dummy text of the printing and typesetting " +
+              "industry. Lorem Ipsum has been the industry's standard dummy text " +
+              "ever since the 1500s when an unknown printer took a galley of type " +
+              "and scrambled it to make a type specimen book. It has survived not " +
+              "only five centuries, but also the leap into electronic " +
+              "typesetting, remaining essentially unchanged. It was popularized " +
+              "in the 1960s with the release of Letraset sheets containing Lorem " +
+              "Ipsum passages, and more recently with desktop publishing software " +
+              "like Aldus PageMaker including versions of Lorem Ipsum."));
+      flexLayout.add(content);
+    }
+
+    IconButton dashboard = new IconButton(TablerIcon.create("dashboard"));
+    IconButton orders = new IconButton(TablerIcon.create("shopping-cart"));
+    IconButton customers = new IconButton(TablerIcon.create("users"));
+    IconButton products = new IconButton(TablerIcon.create("box"));
+    IconButton documents = new IconButton(TablerIcon.create("files"));
+
+    FlexLayout iconLayout = FlexLayout.create(dashboard, orders, customers, products, documents)
+        .justify().evenly()
+        .build();
+
+    footerToolbar.addToContent(iconLayout);
+
+    appLayout.setDrawerHeaderVisible(true)
+        .addToHeader(headerToolbar)
+        .addToFooter(footerToolbar)
+        .addToContent(flexLayout)
+        .setDrawerPlacement(DrawerPlacement.HIDDEN);
+
+  }
+}

src/main/java/com/webforj/samples/views/toolbar/ToolbarSlotsView.java

@@ -0,0 +1,57 @@
+package com.webforj.samples.views.toolbar;
+
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+import com.webforj.component.html.elements.H1;
+import com.webforj.component.html.elements.Paragraph;
+import com.webforj.component.html.elements.Div;
+import com.webforj.component.Composite;
+import com.webforj.component.Theme;
+import com.webforj.component.button.Button;
+import com.webforj.component.field.TextField;
+import com.webforj.component.field.TextField.Type;
+import com.webforj.component.icons.Icon;
+import com.webforj.component.icons.IconButton;
+import com.webforj.component.icons.TablerIcon;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.component.layout.toolbar.Toolbar;
+
+@Route
+@FrameTitle("Toolbar Slots")
+public class ToolbarSlotsView extends Composite<Div> {
+
+  Div main = getBoundComponent();
+  Button analyzeButton = new Button("Analyze data");
+  Toolbar toolbar = new Toolbar();
+  H1 title = new H1("webforJ App");
+  H1 contentSlot = new H1("content");
+  H1 endSlot = new H1("end");
+  IconButton profile = new IconButton(TablerIcon.create("user-circle"));
+  IconButton home = new IconButton(TablerIcon.create("home"));
+  TextField textField = new TextField(TextField.Type.SEARCH);
+
+  public ToolbarSlotsView() {
+
+    toolbar.setTheme(Theme.PRIMARY);
+
+    home.setAttribute("title", "Start slot");
+    toolbar.addToStart(home);
+
+    toolbar.addToTitle(new H1("Title Slot"));
+
+    textField.setTooltipText("Content slot")
+        .setPrefixComponent(TablerIcon.create("search"))
+        .setWidth("45vw");
+    toolbar.addToContent(textField);
+
+    profile.setAttribute("title", "End slot");
+    toolbar.addToEnd(profile);
+
+    FlexLayout content = FlexLayout.create(new H1("Application Title"), new Paragraph("Content goes here"))
+        .vertical()
+        .build()
+        .setPadding("0px 20px");
+
+    main.add(toolbar, content);
+  }
+}

src/main/resources/css/toolbar/toolbarMobile.css

@@ -0,0 +1,6 @@
+.card {
+  padding: var(--dwc-space-m);
+  border: thin solid var(--dwc-color-default);
+  border-radius: var(--dwc-border-radius-m);
+  background-color: var(--dwc-surface-3);
+}