feat: created a HeaderView component and made App work with JavaFX

src/main/java/edu/group5/app/App.java

@@ -24,7 +24,7 @@ public void start(Stage stage) {
 
     showHomePage();
 
-    Scene scene = new Scene(root, 400, 300);
+    Scene scene = new Scene(root, 1280, 720);
     stage.setScene(scene);
     stage.show();
   }
@@ -33,6 +33,10 @@ public void showHomePage() {
     root.getChildren().setAll(new HomePageView(this));
   }
 
+  public void showBrowseOrganizationsPage() {
+    root.getChildren().removeAll();
+  }
+
   static void main(String[] args) throws InterruptedException {
     OrgAPIWrapper orgWrap = new OrgAPIWrapper("https://app.innsamlingskontrollen.no/api/public/v1/all");
     System.out.println();

src/main/java/edu/group5/app/control/HeaderController.java

@@ -0,0 +1,4 @@
+package edu.group5.app.control;
+
+public class HomePageController {
+}

src/main/java/edu/group5/app/view/homepage/HeaderView.java

@@ -1,4 +1,78 @@
 package edu.group5.app.view.homepage;
 
-public class HeaderView {
+import edu.group5.app.App;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.*;
+
+public class HeaderView extends BorderPane {
+  private final App app;
+
+  public HeaderView(App app) {
+    this.app = app;
+    getStylesheets().add(getClass().getResource("/homepage/header.css").toExternalForm());
+    setId("header");
+
+    setLeft(getLogoSection());
+    setCenter(getNavBar());
+    setRight(getProfileSection());
+  }
+
+  private StackPane getLogoSection() {
+    StackPane logoSection = new StackPane();
+    logoSection.setId("logo-section");
+    logoSection.setAlignment(Pos.CENTER);
+    logoSection.setOnMouseClicked(e -> System.out.println("logoSection"));
+    logoSection.setStyle("-fx-cursor: hand;");
+
+    ImageView logo = new ImageView(
+        new Image(getClass().getResource("/homepage/hmh-logo.png").toExternalForm())
+    );
+    logo.setFitHeight(60);
+    logo.setPreserveRatio(true);
+
+    logoSection.getChildren().add(logo);
+    return logoSection;
+  }
+
+  private HBox getNavBar() {
+    HBox navbar = new HBox();
+    navbar.setId("navbar");
+    navbar.setAlignment(Pos.CENTER);
+    navbar.setSpacing(10);
+
+    Button home = new Button("Home");
+    home.setOnAction(e -> System.out.println("Home"));
+    home.setStyle("-fx-cursor: hand;");
+
+    Button causes = new Button("Causes");
+    causes.setOnAction(e -> System.out.println("Causes"));
+    causes.setStyle("-fx-cursor: hand;");
+
+    Button about = new Button("About us");
+    about.setOnAction(e -> System.out.println("About us"));
+    about.setStyle("-fx-cursor: hand;");
+
+    navbar.getChildren().addAll(home, causes, about);
+    return navbar;
+  }
+
+  private StackPane getProfileSection() {
+    StackPane profileSection = new StackPane();
+    profileSection.setId("profile-section");
+    profileSection.setAlignment(Pos.CENTER);
+    profileSection.setOnMouseClicked(e -> System.out.println("profileSection"));
+    profileSection.setStyle("-fx-cursor: hand;");
+
+    ImageView avatar = new ImageView(
+        new Image(getClass().getResource("/homepage/avatar.png").toExternalForm())
+    );
+    avatar.setFitHeight(60);
+    avatar.setPreserveRatio(true);
+
+    profileSection.getChildren().add(avatar);
+    return profileSection;
+  }
 }

src/main/java/edu/group5/app/view/homepage/HomePageView.java

@@ -1,4 +1,11 @@
 package edu.group5.app.view.homepage;
 
-public class HomePageView {
+import edu.group5.app.App;
+import javafx.scene.layout.BorderPane;
+
+public class HomePageView extends BorderPane {
+  public HomePageView(App app) {
+    HeaderView headerView = new HeaderView(app);
+    setTop(headerView);
+  }
 }

src/main/resources/homepage/header.css

@@ -0,0 +1,19 @@
+#header {
+    -fx-background-color: #A6CDF2;
+    -fx-padding: 10px;
+}
+
+#logo-section {
+    -fx-border-color: black;
+    -fx-border-width: 2px;
+}
+
+#navbar {
+    -fx-border-color: black;
+    -fx-border-width: 2px;
+}
+
+#profile-section {
+    -fx-border-color: black;
+    -fx-border-width: 2px;
+}