Working on sidebar menu UI.

src/main/java/org/to/telegramfinalproject/UI/SidebarMenuController.java

@@ -0,0 +1,31 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.fxml.FXML;
+import javafx.scene.control.*;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+
+public class  SidebarMenuController {
+    @FXML private ImageView profileImage;
+    @FXML private Label usernameLabel;
+
+    @FXML private Button myProfileButton;
+    @FXML private Button newGroupButton;
+    @FXML private Button newChannelButton;
+    @FXML private Button contactsButton;
+    @FXML private Button savedMessagesButton;
+    @FXML private Button settingsButton;
+    @FXML private Button telegramFeaturesButton;
+    @FXML private Button telegramQnAButton;
+
+    @FXML private ToggleButton nightModeToggle;
+
+    @FXML
+    public void initialize() {
+        Image image = new Image(getClass().getResource("/org/to/telegramfinalproject/Images/profile.png").toExternalForm());
+        profileImage.setImage(image);
+
+        // Called automatically after FXML is loaded
+        usernameLabel.setText("Asal");
+    }
+}

src/main/java/org/to/telegramfinalproject/UI/TelegramApplication.java

@@ -14,6 +14,9 @@ public class TelegramApplication extends Application {
     public void start(Stage stage) throws IOException {
         FXMLLoader fxmlLoader = new FXMLLoader(TelegramApplication.class.getResource("/org/to/telegramfinalproject/sidebar_menu.fxml"));
         Scene scene = new Scene(fxmlLoader.load(), 1480, 820);
+
+        scene.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/sidebar_menu.css").toExternalForm());
+
         stage.setTitle("Telegram");
         stage.setScene(scene);
         stage.show();

src/main/resources/org/to/telegramfinalproject/CSS/sidebar_menu.css

@@ -1,11 +1,14 @@
-.menu-button {
+.sidebar-btn {
     -fx-background-color: transparent;
     -fx-text-fill: white;
-    -fx-font-size: 13px;
+    -fx-font-size: 14px;
+    -fx-pref-width: 230;
     -fx-alignment: CENTER_LEFT;
-    -fx-padding: 6 10 6 10;
+    -fx-padding: 8 0 8 16;
 }
 
-.menu-button:hover {
+.sidebar-btn:hover {
-    -fx-background-color: #2c3e50;
+    -fx-background-color: #2f3e50;
+    -fx-cursor: hand;
+    -fx-text-fill: white;
 }

src/main/resources/org/to/telegramfinalproject/sidebar_menu.fxml

@@ -4,47 +4,45 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.*?>
+<?import javafx.scene.control.Separator?>
 
-<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:controller="org.to.telegramfinalproject.UI.SidebarController"
+<VBox fx:id="sidebar" spacing="20" alignment="TOP_LEFT"
-            prefWidth="260" style="-fx-background-color: #1f2a36;">
+      prefWidth="250.0"
-    <VBox spacing="10" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0">
+      style="-fx-background-color: #1b2735;"
+      xmlns="http://javafx.com/javafx/17"
+      xmlns:fx="http://javafx.com/fxml"
+      fx:controller="org.to.telegramfinalproject.UI.SidebarMenuController">
 
-        <!-- Top Profile Section -->
+    <padding>
-        <VBox alignment="CENTER_LEFT" spacing="5" padding="10">
+        <Insets top="20" left="10" right="10" bottom="10"/>
-            <HBox spacing="10" alignment="CENTER_LEFT">
+    </padding>
-                <ImageView fx:id="profileImage" fitWidth="40" fitHeight="40"/>
-                <VBox>
-                    <Label fx:id="usernameLabel" text="Asal" textFill="white" style="-fx-font-size: 14px; -fx-font-weight: bold;" />
-                    <Hyperlink fx:id="setEmojiStatus" text="Set Emoji Status" textFill="#5FA6F9" />
-                </VBox>
-            </HBox>
-        </VBox>
 
-        <!-- Menu Buttons -->
+    <!-- Profile Section -->
-        <VBox spacing="8" padding="10">
+    <VBox alignment="TOP_LEFT" spacing="10">
-            <Button fx:id="myProfileButton" text="My Profile" styleClass="menu-button"/>
+        <padding>
-            <Button fx:id="newGroupButton" text="New Group" styleClass="menu-button"/>
+            <Insets top="10" left="10" bottom="0" right="0"/>
-            <Button fx:id="newChannelButton" text="New Channel" styleClass="menu-button"/>
+        </padding>
-            <Button fx:id="contactsButton" text="Contacts" styleClass="menu-button"/>
+        <ImageView fx:id="profileImage" fitWidth="80" fitHeight="80" pickOnBounds="true" preserveRatio="true"/>
-            <Button fx:id="savedMessagesButton" text="Saved Messages" styleClass="menu-button"/>
+        <Label fx:id="usernameLabel" text="Asal Lotfi" textFill="white" style="-fx-font-size: 14px; -fx-font-weight: bold;"/>
-            <Button fx:id="settingsButton" text="Settings" styleClass="menu-button"/>
-            <Button fx:id="telegramFeaturesButton" text="Telegram Features" styleClass="menu-button"/>
-            <Button fx:id="telegramQnAButton" text="Telegram Q&amp;A" styleClass="menu-button"/>
-        </VBox>
-
-        <!-- Spacer -->
-        <VBox VBox.vgrow="ALWAYS"/>
-
-        <!-- Bottom Section: Night Mode & Version -->
-        <VBox spacing="8" padding="10">
-            <HBox spacing="10" alignment="CENTER_LEFT">
-                <Label text="Night Mode" textFill="white" />
-                <ToggleButton fx:id="nightModeToggle"/>
-            </HBox>
-            <VBox spacing="2" alignment="CENTER_LEFT">
-                <Label text="Telegram Desktop" textFill="#5FA6F9" style="-fx-font-size: 11px;"/>
-                <Label text="Version 5.16.6 x64 – About" textFill="#5FA6F9" style="-fx-font-size: 11px;"/>
-            </VBox>
-        </VBox>
     </VBox>
-</AnchorPane>
+
+    <Separator prefWidth="200"/>
+
+    <!-- Menu Buttons -->
+    <VBox spacing="8" alignment="TOP_LEFT">
+        <Button fx:id="btnMyProfile" text="  My Profile" styleClass="sidebar-btn"/>
+        <Button fx:id="btnNewGroup" text="  New Group" styleClass="sidebar-btn"/>
+        <Button fx:id="btnNewChannel" text="  New Channel" styleClass="sidebar-btn"/>
+        <Button fx:id="btnContacts" text="  Contacts" styleClass="sidebar-btn"/>
+        <Button fx:id="btnCalls" text="  Calls" styleClass="sidebar-btn"/>
+        <Button fx:id="btnSavedMessages" text="  Saved Messages" styleClass="sidebar-btn"/>
+        <Button fx:id="btnSettings" text="  Settings" styleClass="sidebar-btn"/>
+
+        <!-- Night Mode Toggle -->
+        <HBox spacing="10" alignment="CENTER_LEFT">
+            <Label text="Night Mode" textFill="white" style="-fx-font-size: 13px;"/>
+            <ToggleButton fx:id="nightModeToggle"/>
+        </HBox>
+    </VBox>
+
+</VBox>