#4 Sidebar Mockup

app.py

@@ -14,6 +14,68 @@ class App(customtkinter.CTk):
         self.title("BudgetPy")
         self.geometry(f"{1100}x{580}")
 
+        # configure grid layout (4x4)
+        self.grid_columnconfigure(1, weight=1)
+        self.grid_columnconfigure((2, 3), weight=0)
+        self.grid_rowconfigure((0, 1, 2), weight=1)
+
+        # create sidebar frame with widgets
+        self.sidebar_frame = customtkinter.CTkFrame(self, width=140, corner_radius=0)
+        self.sidebar_frame.grid(row=0, column=0, rowspan=4, sticky="nsew")
+        self.sidebar_frame.grid_rowconfigure(9, weight=1)
+        # Logo
+        self.logo_label = customtkinter.CTkLabel(self.sidebar_frame, text="BudgetPy", font=customtkinter.CTkFont(size=20, weight="bold"))
+        self.logo_label.grid(row=0, column=0, padx=20, pady=(20, 10))
+        
+        # Button Personen
+        self.sidebar_button_1 = customtkinter.CTkButton(self.sidebar_frame, text="Personen", command=self.sidebar_button_event)
+        self.sidebar_button_1.grid(row=1, column=0, padx=20, pady=10)
+        # Button Vermögen
+        self.sidebar_button_2 = customtkinter.CTkButton(self.sidebar_frame, text="Vermögen", command=self.sidebar_button_event)
+        self.sidebar_button_2.grid(row=2, column=0, padx=20, pady=10)
+        # Button Projekte
+        self.sidebar_button_3 = customtkinter.CTkButton(self.sidebar_frame, text="Projekte", command=self.sidebar_button_event)
+        self.sidebar_button_3.grid(row=3, column=0, padx=20, pady=10)
+        # Button Kategorien
+        self.sidebar_button_4 = customtkinter.CTkButton(self.sidebar_frame, text="Kategorien", command=self.sidebar_button_event)
+        self.sidebar_button_4.grid(row=4, column=0, padx=20, pady=10)
+        # Button Einträge
+        self.sidebar_button_4 = customtkinter.CTkButton(self.sidebar_frame, text="Einträge", command=self.sidebar_button_event)
+        self.sidebar_button_4.grid(row=6, column=0, padx=20, pady=10)
+        # Button Übersicht
+        self.sidebar_button_5 = customtkinter.CTkButton(self.sidebar_frame, text="Übersicht", command=self.sidebar_button_event)
+        self.sidebar_button_5.grid(row=7, column=0, padx=20, pady=10)
+        # Button Export
+        self.sidebar_button_6 = customtkinter.CTkButton(self.sidebar_frame, text="Export", command=self.sidebar_button_event)
+        self.sidebar_button_6.grid(row=8, column=0, padx=20, pady=10)
+
+        # Apperance Mode Label
+        self.appearance_mode_label = customtkinter.CTkLabel(self.sidebar_frame, text="Appearance Mode:", anchor="w")
+        self.appearance_mode_label.grid(row=10, column=0, padx=20, pady=(10, 0))
+        # Apperance Mode Option Menu
+        self.appearance_mode_optionemenu = customtkinter.CTkOptionMenu(self.sidebar_frame, values=["System", "Dark", "Light"],
+                                                                       command=self.change_appearance_mode_event)
+        self.appearance_mode_optionemenu.grid(row=11, column=0, padx=20, pady=(10, 10))
+        
+        # UI Scaling Label
+        self.scaling_label = customtkinter.CTkLabel(self.sidebar_frame, text="UI Scaling:", anchor="w")
+        self.scaling_label.grid(row=12, column=0, padx=20, pady=(10, 0))
+        # UI Scaling Option Menu
+        self.scaling_optionemenu = customtkinter.CTkOptionMenu(self.sidebar_frame, values=["80%", "90%", "100%", "110%", "120%"],
+                                                               command=self.change_scaling_event)
+        self.scaling_optionemenu.grid(row=13, column=0, padx=20, pady=(10, 20))
+
+
+    def change_appearance_mode_event(self, new_appearance_mode: str):
+        customtkinter.set_appearance_mode(new_appearance_mode)
+
+    def change_scaling_event(self, new_scaling: str):
+        new_scaling_float = int(new_scaling.replace("%", "")) / 100
+        customtkinter.set_widget_scaling(new_scaling_float)
+
+    def sidebar_button_event(self):
+        print("sidebar_button click")
+
 
 if __name__ == "__main__":
     app = App()