fix: left aligned sub-headings for grouping menu items

Author: vlad-ed-git

app/core/views.py

@@ -869,6 +869,73 @@ def __init__(
         )
 
 
+class TNavigationMenuNoLeading(UserControl):
+    """
+    Returns a navigation menu for the application without a leading content.
+
+    :param title: Title of the navigation menu.
+    :param on_change: Callable function to be called when the selected item in the menu changes.
+    :param selected_index: The index of the selected item in the menu.
+    :param destinations: List of destinations in the menu.
+    :param menu_height: The height of the menu.
+    :return: A NavigationRail widget containing the navigation menu.
+    """
+
+    def __init__(
+        self,
+        title: str,
+        on_change,
+        selected_index: Optional[int] = 0,
+        destinations=[],
+        menu_height: int = 300,
+        width: int = int(dimens.MIN_WINDOW_WIDTH * 0.3),
+        left_padding: int = dimens.SPACE_STD,
+        top_margin: int = dimens.SPACE_STD,
+    ):
+
+        super().__init__()
+        self.titleContainer = Container(
+            content=TSubHeading(
+                subtitle=title,
+                align=utils.TXT_ALIGN_LEFT,
+                expand=True,
+                color=colors.GRAY_DARK_COLOR,
+            ),
+            expand=False,
+            width=width,
+            alignment=alignment.center_left,
+            margin=margin.only(top=top_margin),
+            padding=padding.only(left=left_padding),
+        )
+        self.navigationRail = NavigationRail(
+            selected_index=selected_index,
+            min_width=utils.COMPACT_RAIL_WIDTH,
+            extended=True,
+            height=menu_height,
+            min_extended_width=width,
+            destinations=destinations,
+            on_change=on_change,
+        )
+
+    def setBgColor(self, side_bar_bg_color):
+        # set the background color of the navigation menu
+        self.navigationRail.bgcolor = side_bar_bg_color
+        self.titleContainer.bgcolor = side_bar_bg_color
+        self.update()
+
+    def build(self):
+        return Column(
+            controls=[
+                self.titleContainer,
+                self.navigationRail,
+            ],
+            alignment=utils.START_ALIGNMENT,
+            horizontal_alignment=utils.START_ALIGNMENT,
+            spacing=0,
+            run_spacing=0,
+        )
+
+
 class THomeGrid(GridView):
     """Returns a grid view used in the home screen"""
 

app/home/view.py

@@ -241,15 +241,17 @@ def __init__(
         )
         self.selected_tab = 0
 
-        self.main_menu = views.TNavigationMenu(
+        self.main_menu = views.TNavigationMenuNoLeading(
             title=self.main_menu_handler.menu_title,
             destinations=self.get_menu_destinations(),
             on_change=lambda e: self.on_menu_destination_change(e),
+            
         )
-        self.secondary_menu = views.TNavigationMenu(
+        self.secondary_menu = views.TNavigationMenuNoLeading(
             title=self.secondary_menu_handler.menu_title,
             destinations=self.get_menu_destinations(menu_level=1),
             on_change=lambda e: self.on_menu_destination_change(e, menu_level=1),
+    
         )
         self.current_menu_handler = self.main_menu_handler
         self.destination_view = self.current_menu_handler.items[0].destination
@@ -362,7 +364,10 @@ def build(self):
         )
         self.side_bar = Container(
             width=SIDEBAR_WIDTH,
-            padding=padding.only(top=dimens.SPACE_XL),
+            padding=padding.only(
+            top=dimens.SPACE_XL,
+            left=0,
+            ),
             content=Column(
                 controls=[
                     self.main_menu,
@@ -419,18 +424,14 @@ def load_preferred_theme(self):
             self.show_snack(result.error_msg, is_error=True)
             return
         self.preferred_theme = result.data
-        side_bar_components = [
-            self.side_bar,
-            self.main_menu,
-            self.secondary_menu,
-        ]
         side_bar_bg_color = colors.SIDEBAR_DARK_COLOR  # default is dark mode
         self.action_bar.bgcolor = colors.ACTION_BAR_DARK_COLOR
         if self.preferred_theme == theme.THEME_MODES.light.value:
             side_bar_bg_color = colors.SIDEBAR_LIGHT_COLOR
             self.action_bar.bgcolor = colors.ACTION_BAR_LIGHT_COLOR
-        for component in side_bar_components:
-            component.bgcolor = side_bar_bg_color
+        self.side_bar.bgcolor = side_bar_bg_color
+        self.main_menu.setBgColor(side_bar_bg_color)
+        self.secondary_menu.setBgColor(side_bar_bg_color)
         self.footer.bgcolor = side_bar_bg_color  # footer and side bar have same bgcolor
         self.update_self()