From a365f81de8a34182cac9fe2f2a22f7f536b9d352 Mon Sep 17 00:00:00 2001
From: AdrianBalunan <adrianbalunan63@gmail.com>
Date: Wed, 15 Apr 2026 18:03:35 +0200
Subject: [PATCH] Feat: Tried to split navbar into a component with dedicated
 controller, also other compontens fall under compoennts

---
 .../src/main/resources/fxml/aboutPage.fxml    | 72 +-------------
 .../fxml/available_organizations.fxml         | 95 +------------------
 .../resources/fxml/components/navbar.fxml     | 89 +++++++++++++++++
 .../{ => components}/organizationCard.fxml    |  2 +-
 4 files changed, 94 insertions(+), 164 deletions(-)
 create mode 100644 helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
 rename helpmehelpapplication/src/main/resources/fxml/{ => components}/organizationCard.fxml (97%)

diff --git a/helpmehelpapplication/src/main/resources/fxml/aboutPage.fxml b/helpmehelpapplication/src/main/resources/fxml/aboutPage.fxml
index 8e995428..26dfe910 100644
--- a/helpmehelpapplication/src/main/resources/fxml/aboutPage.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/aboutPage.fxml
@@ -32,76 +32,8 @@
 
     <children>
 
-        <!-- NAVBAR -->
-        <GridPane style="-fx-background-color: #2f8f8b;" GridPane.rowIndex="0">
-            <columnConstraints>
-                <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
-                <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
-                <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
-            </columnConstraints>
-
-            <children>
-
-                <!-- Venstre: logo + navn -->
-                <HBox alignment="CENTER_LEFT" spacing="12.0">
-                    <padding>
-                        <Insets left="14.0" />
-                    </padding>
-                    <children>
-                        <Button mnemonicParsing="false" onAction="#switchToFrontPage" style="-fx-background-color: transparent; -fx-padding: 0;">
-                            <graphic>
-                                <ImageView fitHeight="42.0" fitWidth="56.0" preserveRatio="true">
-                                    <image>
-                                        <Image url="@../images/Logo.png" />
-                                    </image>
-                                </ImageView>
-                            </graphic>
-                        </Button>
-
-                        <HBox alignment="CENTER_LEFT" spacing="0.0">
-                            <children>
-                                <Label style="-fx-text-fill: #FFFFFF;" text="Help" textFill="WHITE">
-                                    <font>
-                                        <Font name="System Bold" size="19.0" />
-                                    </font>
-                                </Label>
-                                <Label style="-fx-text-fill: #C8E6C9;" text="Me" textFill="#c8e6c9">
-                                    <font>
-                                        <Font name="System Bold" size="19.0" />
-                                    </font>
-                                </Label>
-                                <Label style="-fx-text-fill: #FFFFFF;" text="Help" textFill="WHITE">
-                                    <font>
-                                        <Font name="System Bold" size="19.0" />
-                                    </font>
-                                </Label>
-                            </children>
-                        </HBox>
-                    </children>
-                </HBox>
-
-                <!-- Midten: search -->
-                <StackPane alignment="CENTER" GridPane.columnIndex="1">
-                    <children>
-                        <TextField fx:id="donationSearchField" onAction="#handleSearch" prefHeight="34.0" prefWidth="360.0" promptText="Search" style="-fx-background-color: white; -fx-background-radius: 17; -fx-border-radius: 17; -fx-padding: 0 12 0 12;" />
-                    </children>
-                </StackPane>
-
-                <!-- Høyre: login -->
-                <HBox alignment="CENTER_RIGHT" GridPane.columnIndex="2">
-                    <padding>
-                        <Insets right="20.0" />
-                    </padding>
-                    <children>
-                        <Button mnemonicParsing="false" onAction="#switchToLoginPage" prefHeight="34.0" prefWidth="120.0" style="-fx-background-color: #1F4FD8; -fx-text-fill: white; -fx-background-radius: 17; -fx-font-weight: bold;" text="Login" />
-                    </children>
-                </HBox>
-
-            </children>
-         <rowConstraints>
-            <RowConstraints />
-         </rowConstraints>
-        </GridPane>
+        <!-- This pulls in the navbar with its own controller -->
+        <fx:include fx:id="navbar" source="components/navbar.fxml"/>
 
         <!-- MAIN CONTENT -->
         <StackPane GridPane.rowIndex="1">
diff --git a/helpmehelpapplication/src/main/resources/fxml/available_organizations.fxml b/helpmehelpapplication/src/main/resources/fxml/available_organizations.fxml
index 3f0c81d0..373a4888 100644
--- a/helpmehelpapplication/src/main/resources/fxml/available_organizations.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/available_organizations.fxml
@@ -29,99 +29,8 @@
 
     <!-- NAVBAR -->
     <top>
-        <HBox alignment="CENTER"
-              maxHeight="70.0"
-              minHeight="70.0"
-              prefHeight="70.0"
-              style="-fx-background-color: #2f8f8b;">
-            <children>
-                <GridPane HBox.hgrow="ALWAYS">
-                    <columnConstraints>
-                        <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
-                        <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
-                        <ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
-                    </columnConstraints>
-                    <rowConstraints>
-                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-                    </rowConstraints>
-
-                    <children>
-                        <Label text="Help" textFill="WHITE" translateX="100.0">
-                            <font>
-                                <Font name="System Bold" size="20.0" />
-                            </font>
-                        </Label>
-
-                        <Label text="Me" textFill="#c8e6c9" translateX="145.0">
-                            <font>
-                                <Font name="System Bold" size="20.0" />
-                            </font>
-                        </Label>
-
-                        <Label text="Help" textFill="WHITE" translateX="176.0">
-                            <font>
-                                <Font name="System Bold" size="20.0" />
-                            </font>
-                        </Label>
-
-                        <StackPane prefHeight="150.0" prefWidth="200.0" GridPane.columnIndex="1">
-                            <children>
-                                <TextField fx:id="donationSearchField"
-                                           minHeight="-Infinity"
-                                           onAction="#handleSearch"
-                                           prefWidth="200.0"
-                                           promptText="Search"
-                                           style="-fx-background-radius: 15;" />
-
-                                <Rectangle arcHeight="40.0"
-                                           arcWidth="40.0"
-                                           fill="#1f4fd8"
-                                           height="34.0"
-                                           stroke="TRANSPARENT"
-                                           strokeType="INSIDE"
-                                           translateX="132.0"
-                                           width="120.0"
-                                           StackPane.alignment="CENTER_RIGHT">
-                                    <cursor>
-                                        <Cursor fx:constant="HAND" />
-                                    </cursor>
-                                </Rectangle>
-
-                                <Label text="Login"
-                                       textAlignment="CENTER"
-                                       textFill="WHITE"
-                                       translateX="87.0"
-                                       StackPane.alignment="CENTER_RIGHT">
-                                    <font>
-                                        <Font name="System Bold" size="14.0" />
-                                    </font>
-                                    <cursor>
-                                        <Cursor fx:constant="HAND" />
-                                    </cursor>
-                                </Label>
-                            </children>
-                        </StackPane>
-
-                        <Button mnemonicParsing="false"
-                                onAction="#switchToFrontPage"
-                                prefHeight="0.0"
-                                prefWidth="0.0"
-                                style="-fx-background-color: #2f8f8b">
-                            <graphic>
-                                <ImageView fitHeight="54.0" fitWidth="67.0" pickOnBounds="true" preserveRatio="true">
-                                    <image>
-                                        <Image url="@../images/Logo.png" />
-                                    </image>
-                                    <cursor>
-                                        <Cursor fx:constant="HAND" />
-                                    </cursor>
-                                </ImageView>
-                            </graphic>
-                        </Button>
-                    </children>
-                </GridPane>
-            </children>
-        </HBox>
+        <!-- This pulls in the navbar with its own controller -->
+        <fx:include fx:id="navbar" source="components/navbar.fxml" />
     </top>
 
     <!-- MAIN CONTENT -->
diff --git a/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml b/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
new file mode 100644
index 00000000..f3cca80f
--- /dev/null
+++ b/helpmehelpapplication/src/main/resources/fxml/components/navbar.fxml
@@ -0,0 +1,89 @@
+<!-- NAVBAR -->
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.control.Button?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.layout.RowConstraints?>
+
+<GridPane style="-fx-background-color: #2f8f8b;" xmlns="http://javafx.com/javafx/25" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.components.NavbarFooterController">
+    <columnConstraints>
+        <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
+        <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
+        <ColumnConstraints hgrow="ALWAYS" percentWidth="33.3333" />
+    </columnConstraints>
+
+    <children>
+        <!-- Venstre: logo + navn -->
+        <HBox alignment="CENTER_LEFT" spacing="12.0">
+            <padding>
+                <Insets left="14.0" />
+            </padding>
+            <children>
+                <Button mnemonicParsing="false" onAction="#switchToFrontPage" style="-fx-background-color: transparent; -fx-padding: 0;">
+                    <graphic>
+                        <ImageView fitHeight="42.0" fitWidth="56.0" preserveRatio="true">
+                            <image>
+                                <Image url="@../../images/Logo.png" />
+                            </image>
+                        </ImageView>
+                    </graphic>
+                </Button>
+
+                <HBox alignment="CENTER_LEFT" spacing="0.0">
+                    <children>
+                        <Label style="-fx-text-fill: #FFFFFF;" text="Help" textFill="WHITE">
+                            <font>
+                                <Font name="System Bold" size="19.0" />
+                            </font>
+                        </Label>
+                        <Label style="-fx-text-fill: #C8E6C9;" text="Me" textFill="#c8e6c9">
+                            <font>
+                                <Font name="System Bold" size="19.0" />
+                            </font>
+                        </Label>
+                        <Label style="-fx-text-fill: #FFFFFF;" text="Help" textFill="WHITE">
+                            <font>
+                                <Font name="System Bold" size="19.0" />
+                            </font>
+                        </Label>
+                    </children>
+                </HBox>
+            </children>
+        </HBox>
+
+        <!-- Midten: search -->
+        <StackPane alignment="CENTER" GridPane.columnIndex="1">
+            <children>
+                <TextField fx:id="donationSearchField" onAction="#handleSearch" prefHeight="34.0" prefWidth="360.0" promptText="Search" style="-fx-background-color: white; -fx-background-radius: 17; -fx-border-radius: 17; -fx-padding: 0 12 0 12;" />
+            </children>
+        </StackPane>
+
+        <!-- Høyre: login -->
+        <HBox alignment="CENTER_RIGHT" GridPane.columnIndex="2">
+            <padding>
+                <Insets right="20.0" />
+            </padding>
+            <children>
+                <Button fx:id="loginButton" text="Login"
+                        onAction="#switchToLoginPage"
+                        prefHeight="34.0" prefWidth="120.0"
+                        style="-fx-background-color: #1F4FD8; -fx-text-fill: white; -fx-background-radius: 17; -fx-font-weight: bold;" />
+                <Button fx:id="profileButton" onAction="#switchToProfilePage"
+                        visible="false" managed="false"
+                        style="-fx-background-color: white;">
+                </Button>
+            </children>
+        </HBox>
+
+    </children>
+    <rowConstraints>
+        <RowConstraints />
+    </rowConstraints>
+</GridPane>
\ No newline at end of file
diff --git a/helpmehelpapplication/src/main/resources/fxml/organizationCard.fxml b/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
similarity index 97%
rename from helpmehelpapplication/src/main/resources/fxml/organizationCard.fxml
rename to helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
index 47ddc788..94cf11ff 100644
--- a/helpmehelpapplication/src/main/resources/fxml/organizationCard.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/components/organizationCard.fxml
@@ -6,7 +6,7 @@
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.*?>
 
-<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="240.0" prefWidth="380.0" spacing="12.0" style="-fx-background-color: white; -fx-background-radius: 20; -fx-border-radius: 20; -fx-border-color: #3b82f6; -fx-border-width: 2;" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.OrganizationCardController">
+<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="240.0" prefWidth="380.0" spacing="12.0" style="-fx-background-color: white; -fx-background-radius: 20; -fx-border-radius: 20; -fx-border-color: #3b82f6; -fx-border-width: 2;" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ntnu.systemutvikling.team6.controller.components.OrganizationCardController">
    <padding>
       <Insets bottom="12.0" left="12.0" right="12.0" top="12.0" />
    </padding>