Update app3.py

app3.py

@@ -1,40 +1,51 @@
 import panel as pn
 
-# Create a Panel app with centered title
-title = pn.pane.HTML("<h1 style='text-align: center;'>My Panel App</h1>", width=300)
-
-# Create a toggleable sidebar with three horizontal lines icon
-toggle_sidebar = pn.widgets.Button(name='☰', button_type='primary', width=30, height=30)
-toggle_sidebar.js_on_click(args={'sidebar': toggle_sidebar}, code="""
-    if (sidebar.width == 0) {
-        sidebar.width = 200;
-        buttons.css_classes = ['visible'];
-    } else {
-        sidebar.width = 0;
-        buttons.css_classes = ['hidden'];
-    }
-""")
 
 # Create buttons for the toggleable sidebar
-button1 = pn.widgets.Button(name='Button 1')
-button2 = pn.widgets.Button(name='Button 2')
-button3 = pn.widgets.Button(name='Button 3')
+button1 = pn.widgets.Button(icon = 'home', name="Home", icon_size='2em', width=130)
+button2 = pn.widgets.Button(icon = 'file-analytics', name='My papers', icon_size='2em', width=130)
+button3 = pn.widgets.Button(icon = 'settings', icon_size='2em', name='Settings', width=130)
+
 
 # Create a column layout for the buttons inside the toggleable sidebar
-buttons = pn.Column(button1, button2, button3, sizing_mode='stretch_height', background='#f6f6f6', css_classes=['hidden'])
-
-# Combine the title, toggle button, and sidebar
-app = pn.Column(
-    pn.Row(toggle_sidebar),
-    pn.Row(
-        pn.Column(title, pn.layout.Spacer(height=10)),
-        pn.layout.Divider(),
-        pn.Row(buttons, sizing_mode='stretch_width'),
-        sizing_mode='stretch_both',
-        align='center',
-    ),
-    sizing_mode='stretch_both',
+buttons = pn.Column(button1, button2, button3, sizing_mode='stretch_width', css_classes=['hidden'])
+
+instructions = """
+# Teste
+Use the box-select and lasso-select tools to select a subset of penguins
+and reveal more information about the selected subgroup through the power
+of cross-filtering.
+"""
+
+# Add filter list row with spacing
+filter_list = pn.widgets.CheckButtonGroup(
+    name='Filter Options',
+    options=["option1", "option2", "option3"],
+    button_type='success',
+    sizing_mode='fixed', 
+    button_style = 'solid',
+    # button_type = 'default',
+    margin=(5, 10)
+)
+
+text = pn.pane.Markdown(instructions)
+
+# Layout using Template
+template = pn.template.FastListTemplate(
+    title="EasySciRead", 
+    sidebar=[buttons],
+    header=[filter_list],
+    main=[
+        pn.Row(filter_list, sizing_mode='stretch_width'),  # Filter list row before the text
+        pn.Column(text),
+    ],
+    accent_base_color="#88d8b0",
+    header_background="#FFFFFF",
+    header_color = "#000000",
+    text_align = 'center',
+    sidebar_width = 150
+    
 )
 
 # Run the app
-app.servable()
+template.servable()