✨ Add children attribute to Navbar

GusFurtado · Jun 14, 2022 · 9764cf2 · 9764cf2
1 parent 0390452
commit 9764cf2
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/dash_charlotte/components/navbar.py b/dash_charlotte/components/navbar.py
@@ -10,6 +10,7 @@ class Navbar(html.Nav):
     def __init__(
             self,
             title: Union[str, Component],
+            children: Optional[Component] = None,
             id: Optional[str] = None
         ):
         """Navbar components.
@@ -18,11 +19,22 @@ def __init__(
         ----------
         title : str | Dash Component
             Text displayed inside the navbar.
+        children : Dash Component, optional
+            Content in the right of the navbar.
         id : str, optional
             Component's ID.
+
+        Components IDs
+        --------------
+        {id}--title
+            Navbar title.
+        {id}--children
+            Content in the right of the navbar.
         
         """
 
+        id = id or str(uuid.uuid4())
+
         super().__init__(
             className = 'home-content shade7',
             children = [
@@ -31,9 +43,23 @@ def __init__(
                     id = 'open-drawer'
                 ),
                 html.Span(
-                    className = 'text',
-                    children = title,
-                    id = id or str(uuid.uuid4())
+                    children = [
+                        html.Span(
+                            className = 'text',
+                            children = title,
+                            id = f'{id}--title'
+                        ),
+                        html.Span(
+                            className = 'text',
+                            children = children,
+                            id = f'{id}--children'
+                        )
+                    ],
+                    style = {
+                        'width': '100%',
+                        'display': 'flex',
+                        'justify-content': 'space-between'
+                    }
                 )
             ]
         )