Sidebar UI implemented.

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

@@ -0,0 +1,52 @@
+/* Sidebar buttons */
+.sidebar-btn {
+    -fx-background-color: transparent;
+    -fx-text-fill: white;
+    -fx-font-size: 14px;
+    -fx-pref-width: 230;
+    -fx-alignment: CENTER_LEFT;
+    -fx-padding: 8 0 8 16;
+}
+.sidebar-btn:hover {
+    -fx-background-color: #2f3e50;
+    -fx-cursor: hand;
+}
+
+/* Telegram-style toggle switch */
+.telegram-toggle {
+    -fx-background-color: #555;
+    -fx-background-radius: 15;
+    -fx-padding: 2;
+    -fx-pref-width: 40;
+    -fx-pref-height: 20;
+    -fx-alignment: center-left;
+    -fx-cursor: hand;
+}
+.telegram-toggle.on {
+    -fx-background-color: #4fa8f0;
+}
+.toggle-thumb {
+    -fx-background-color: white;
+    -fx-background-radius: 50%;
+    -fx-pref-width: 16;
+    -fx-pref-height: 16;
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 3, 0, 0, 1);
+}
+
+/* Separator */
+.thin-separator {
+    -fx-background-color: transparent;
+    -fx-padding: 0;
+}
+.thin-separator .line {
+    -fx-border-color: #2e3948; /* Telegram's subtle dark line */
+    -fx-border-width: 0.5px;
+}
+
+/* Theme background & text */
+#sidebarRoot {
+    -fx-background-color: #1b2735; /* dark theme */
+}
+.button, .label {
+    -fx-text-fill: white;
+}

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

@@ -0,0 +1,52 @@
+/* Sidebar buttons */
+.sidebar-btn {
+    -fx-background-color: transparent;
+    -fx-text-fill: black;
+    -fx-font-size: 14px;
+    -fx-pref-width: 230;
+    -fx-alignment: CENTER_LEFT;
+    -fx-padding: 8 0 8 16;
+}
+.sidebar-btn:hover {
+    -fx-background-color: #e6e6e6;
+    -fx-cursor: hand;
+}
+
+/* Telegram-style toggle switch */
+.telegram-toggle {
+    -fx-background-color: #aaa;
+    -fx-background-radius: 15;
+    -fx-padding: 2;
+    -fx-pref-width: 40;
+    -fx-pref-height: 20;
+    -fx-alignment: center-left;
+    -fx-cursor: hand;
+}
+.telegram-toggle.on {
+    -fx-background-color: #4fa8f0;
+}
+.toggle-thumb {
+    -fx-background-color: white;
+    -fx-background-radius: 50%;
+    -fx-pref-width: 16;
+    -fx-pref-height: 16;
+    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 3, 0, 0, 1);
+}
+
+/* Separator */
+.thin-separator {
+    -fx-background-color: transparent;
+    -fx-padding: 0;
+}
+.thin-separator .line {
+    -fx-border-color: #ccc;
+    -fx-border-width: 0.5px;
+}
+
+/* Theme background & text */
+#sidebarRoot {
+    -fx-background-color: white;
+}
+.button, .label {
+    -fx-text-fill: black;
+}

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

@@ -6,9 +6,8 @@
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.control.Separator?>
 
-<VBox fx:id="sidebar" spacing="20" alignment="TOP_LEFT"
+<VBox fx:id="sidebarRoot" spacing="20" alignment="TOP_LEFT"
       prefWidth="250.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">
@@ -17,32 +16,46 @@
         <Insets top="20" left="10" right="10" bottom="10"/>
     </padding>
 
+
     <!-- Profile Section -->
     <VBox alignment="TOP_LEFT" spacing="10">
         <padding>
             <Insets top="10" left="10" bottom="0" right="0"/>
         </padding>
         <ImageView fx:id="profileImage" fitWidth="80" fitHeight="80" pickOnBounds="true" preserveRatio="true"/>
-        <Label fx:id="usernameLabel" text="Asal Lotfi" textFill="white" style="-fx-font-size: 14px; -fx-font-weight: bold;"/>
+        <Label fx:id="usernameLabel" text="   Asal Lotfi" textFill="white" style="-fx-font-size: 14px; -fx-font-weight: bold;"/>
     </VBox>
 
-    <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"/>
+
+        <!-- Thin Telegram-style line -->
+        <Separator orientation="HORIZONTAL" styleClass="thin-separator" />
+
+        <Button fx:id="myProfileButton" text="  My Profile" styleClass="sidebar-btn"/>
+
+        <!-- Thin Telegram-style line -->
+        <Separator orientation="HORIZONTAL" styleClass="thin-separator" />
+
+        <Button fx:id="newGroupButton" text="  New Group" styleClass="sidebar-btn"/>
+        <Button fx:id="newChannelButton" text="  New Channel" styleClass="sidebar-btn"/>
+        <Button fx:id="contactsButton" text="  Contacts" styleClass="sidebar-btn"/>
+        <Button fx:id="savedMessagesButton" text="  Saved Messages" styleClass="sidebar-btn"/>
+        <Button fx:id="settingsButton" text="  Settings" styleClass="sidebar-btn"/>
+        <Button fx:id="telegramFeaturesButton" text="  Telegram Features" styleClass="sidebar-btn"/>
+        <Button fx:id="telegramQnAButton" text="  Telegram Q&amp;A" styleClass="sidebar-btn"/>
 
         <!-- Night Mode Toggle -->
         <HBox spacing="10" alignment="CENTER_LEFT">
+            <padding>
+                <!-- Match button's left padding -->
+                <Insets left="15"/>
+            </padding>
+            <ImageView fx:id="nightModeIcon" fitWidth="22" fitHeight="22" pickOnBounds="true" preserveRatio="true"/>
             <Label text="Night Mode" textFill="white" style="-fx-font-size: 13px;"/>
-            <ToggleButton fx:id="nightModeToggle"/>
+            <HBox fx:id="nightModeToggle" styleClass="telegram-toggle">
+                <Region fx:id="toggleThumb" styleClass="toggle-thumb"/>
+            </HBox>
         </HBox>
     </VBox>
-
-</VBox>
+</VBox>