Merge pull request #223 from tuttle-dev/214-ui-sidebar-layout

fix: home screen sidebar width is fixed

Author: clstaudt

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 = 200,
+        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

@@ -222,6 +222,8 @@ def __init__(self, params: TViewParams):
         ]
 
 
+
+SIDEBAR_WIDTH = 250 # width of the sidebar menu in home screen
 class HomeScreen(TView, UserControl):
     """The home screen"""
 
@@ -239,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
@@ -347,22 +351,23 @@ def build(self):
             ),
             height=dimens.FOOTER_HEIGHT,
         )
-        self.main_body = Column(
-            col={
-                "xs": 8,
-                "md": 9,
-                "lg": 10,
-            },
-            alignment=utils.START_ALIGNMENT,
-            horizontal_alignment=utils.START_ALIGNMENT,
-            controls=[
-                self.action_bar,
-                self.destination_content_container,
-            ],
+        self.main_body = Container(
+            width=dimens.MIN_WINDOW_WIDTH - SIDEBAR_WIDTH,
+            content=Column(
+                alignment=utils.START_ALIGNMENT,
+                horizontal_alignment=utils.START_ALIGNMENT,
+                controls=[
+                    self.action_bar,
+                    self.destination_content_container,
+                ],
+            ),
         )
         self.side_bar = Container(
-            col={"xs": 4, "md": 3, "lg": 2},
-            padding=padding.only(top=dimens.SPACE_XL),
+            width=SIDEBAR_WIDTH,
+            padding=padding.only(
+            top=dimens.SPACE_XL,
+            left=0,
+            ),
             content=Column(
                 controls=[
                     self.main_menu,
@@ -384,7 +389,7 @@ def build(self):
         self.home_screen_view = Container(
             Column(
                 [
-                    ResponsiveRow(
+                    Row(
                         controls=[
                             self.side_bar,
                             self.main_body,
@@ -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()
 
@@ -443,6 +444,7 @@ def on_window_resized_listener(self, width, height):
             self.action_bar.height + self.footer.height + 50
         )
         self.destination_content_container.height = DESTINATION_CONTENT_PERCENT_HEIGHT
+        self.main_body.width = self.page_width - SIDEBAR_WIDTH
         self.update_self()
 
     def will_unmount(self):