add initial layout for sidebar

ikaryss · Nov 20, 2022 · 9ad3aa3 · 9ad3aa3
1 parent ec8151c
commit 9ad3aa3
Showing 1 changed file with 86 additions and 4 deletions.
diff --git a/pyquac/components/sidebar.py b/pyquac/components/sidebar.py
@@ -56,21 +56,103 @@
     "padding": "2rem 1rem",
 }
 
+# items
+items = [
+    dbc.DropdownMenuItem("First"),
+    dbc.DropdownMenuItem(divider=True),
+    dbc.DropdownMenuItem("Second"),
+]
+
 ########################## Sidebar ##########################
 sidebar = html.Div(
     [
         html.H5("Spectroscopy"),
+        html.P("control panel", className="summary"),
+        html.Hr(),
+        dbc.Nav(
+            [
+                dbc.DropdownMenu(
+                    label="Select data",
+                    children=items,
+                    direction="end",
+                    className="mt-2",
+                ),
+            ],
+            vertical=True,
+            pills=True,
+        ),
         html.Hr(),
-        html.P("A simple sidebar for data settings"),
         dbc.Nav(
             [
-                dbc.NavLink("btn 1", href="/", active="exact"),
-                dbc.NavLink("btn 2", href="/page-1", active="exact"),
-                dbc.NavLink("btn 3", href="/page-2", active="exact"),
+                dbc.NavItem(html.P("Data saving"), class_name="mt-3"),
+                dbc.NavItem(
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button("CSV file", title="save current"),
+                            dbc.Button(class_name="fa fa-server", title="save all"),
+                        ],
+                        size="md",
+                        # className="my-3",
+                    )
+                ),
+                dbc.NavItem(
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button("raw CSV file", title="save current"),
+                            dbc.Button(class_name="fa fa-server", title="save all"),
+                        ],
+                        size="md",
+                        className="my-3",
+                    )
+                ),
             ],
             vertical=True,
             pills=True,
         ),
+        dbc.Nav(
+            [
+                dbc.NavItem(
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button("PDF file", title="save current"),
+                            dbc.Button(class_name="fa fa-server", title="save all"),
+                        ],
+                        size="md",
+                        # className="my-3",
+                    )
+                ),
+                dbc.NavItem(
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button("SVG file", title="save current"),
+                            dbc.Button(class_name="fa fa-server", title="save all"),
+                        ],
+                        size="md",
+                        className="my-3",
+                    )
+                ),
+                dbc.NavItem(
+                    dbc.ButtonGroup(
+                        [
+                            dbc.Button("HTML file", title="save current"),
+                            dbc.Button(class_name="fa fa-server", title="save all"),
+                        ],
+                        size="md",
+                        # className="my-3",
+                    )
+                ),
+            ],
+            vertical=True,
+            pills=True,
+        ),
+        html.Hr(),
+        dbc.Button(
+            class_name="fa fa-gear",
+            size="lg",
+            outline=True,
+            color="#f8f9fa",
+            title="project settings",
+        ),
     ],
     id="sidebar",
     style=SIDEBAR_STYLE,