Add responsive menubar to complement current togglable sidebar. (#535)

* Add responsive menubar to complement the togglable sidebar. * Move the burger back to the left, and 'information' part of the menu - to the right
astrolabsoftware · Dec 7, 2023 · d0f6244 · d0f6244
1 parent 3a09ea9
commit d0f6244
Showing 1 changed file with 112 additions and 3 deletions.
diff --git a/index.py b/index.py
@@ -1132,17 +1132,126 @@ def drawer_switch(n_clicks, pathname):
     zIndex=1000,
     p=0,
     m=0,
+    className="shadow-sm",
     children=[
         dmc.Space(h=10),
         dmc.Container(
             fluid=True,
             children=dmc.Group(
                 position="apart",
-                align="flex-start",
+                align="flex-end",
                 children=[
-                    dmc.ActionIcon(
-                        DashIconify(icon="dashicons:menu", width=30), id="drawer-button", n_clicks=0
+                    # Right menu
+                    dmc.Group(
+                        position="left",
+                        align="flex-start",
+                        children=[
+                            # Burger
+                            dmc.ActionIcon(
+                                DashIconify(icon="dashicons:menu", width=30), id="drawer-button", n_clicks=0
+                            ),
+                            dmc.Anchor(
+                                dmc.Group([
+                                    dmc.ThemeIcon(
+                                        DashIconify(
+                                            icon="ion:search-outline",
+                                            width=22,
+                                        ),
+                                        radius=30,
+                                        size=32,
+                                        variant="outline",
+                                        color="gray",
+                                    ),
+                                    dmc.MediaQuery(
+                                        "Search",
+                                        smallerThan="sm",
+                                        styles={"display": "none"},
+                                    ),
+                                ], spacing='xs'),
+                                href='/',
+                                variant='text',
+                                style={"textTransform": "capitalize", "textDecoration": "none"},
+                                color="gray",
+                            ),
+                            dmc.Anchor(
+                                dmc.Group([
+                                    dmc.ThemeIcon(
+                                        DashIconify(
+                                            icon="ion:cloud-download-outline",
+                                            width=22,
+                                        ),
+                                        radius=30,
+                                        size=32,
+                                        variant="outline",
+                                        color="gray",
+                                    ),
+                                    dmc.MediaQuery(
+                                        "Data Transfer",
+                                        smallerThan="sm",
+                                        styles={"display": "none"},
+                                    ),
+                                ], spacing='xs'),
+                                href='/download',
+                                variant='text',
+                                style={"textTransform": "capitalize", "textDecoration": "none"},
+                                color="gray",
+                            ),
+                            dmc.Anchor(
+                                dmc.Group([
+                                    dmc.ThemeIcon(
+                                        DashIconify(
+                                            icon="ion:infinite-outline",
+                                            width=22,
+                                        ),
+                                        radius=30,
+                                        size=32,
+                                        variant="outline",
+                                        color="gray",
+                                    ),
+                                    dmc.MediaQuery(
+                                        "Gravitational Waves",
+                                        smallerThan="sm",
+                                        styles={"display": "none"},
+                                    ),
+                                ], spacing='xs'),
+                                href='/gw',
+                                variant='text',
+                                style={"textTransform": "capitalize", "textDecoration": "none"},
+                                color="gray",
+                            ),
+                        ],
+                    ),
+                    # Left menu
+                    dmc.Group(
+                        position="right",
+                        align="flex-end",
+                        children=[
+                            dmc.Anchor(
+                                dmc.Group([
+                                    dmc.ThemeIcon(
+                                        DashIconify(
+                                            icon="ion:stats-chart-outline",
+                                            width=22,
+                                        ),
+                                        radius=30,
+                                        size=32,
+                                        variant="outline",
+                                        color="gray",
+                                    ),
+                                    dmc.MediaQuery(
+                                        "Statistics",
+                                        smallerThan="sm",
+                                        styles={"display": "none"},
+                                    ),
+                                ], spacing='xs'),
+                                href='/stats',
+                                variant='text',
+                                style={"textTransform": "capitalize", "textDecoration": "none"},
+                                color="gray",
+                            ),
+                        ]
                     ),
+                    # Sidebar
                     dmc.Drawer(
                         children=[
                             dmc.Divider(