Sidebar Example

[JulesBlubb]

Hi,
I really like Stipple and I want to use it with StippleUI to create an app with a sidebar which includes different dashboards, but I am not sure which elements to use for a sidebar. I have tried to use drawer, but nothing showed up.
Which elements should I use to create a sidebar?

Thanks!

[essenciary]

Thank you - I'm not sure a sidebar would need to be a component, but rather just a section on the page (a div). What would it be its behaviour?

StippleUI uses Quasar - any of these components would match the sidebar? https://quasar.dev/vue-components

[hhaensel]

Would q-drawer come close to what you want?

[JulesBlubb]

I need something like this, where I can choose different contents on the left like in a sidebar. I tried drawer but could not receive a running example.

[JulesBlubb]

@hhaensel I try to get the q-drawer example on https://quasar.dev/layout/drawer#Example--Seamless-menu to work. My example code is showing a menu button but the sidebar is not shown when clicking on the button. I get the error:

[Vue warn]: Property or method "drawer" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

using Genie, Genie.Renderer.Html, Genie.Router

using Stipple, Stipple.Elements
using StippleUI, StippleUI.Table, StippleUI.Range, StippleUI.BigNumber, StippleUI.Heading, StippleUI.Dashboard,
StippleUI.Drawer, StippleUI.Layout
using StippleCharts, StippleCharts.Charts

import StippleUI.Range: range
import Genie.Renderer.Html: select

using DataFrames


data = DataFrame(Costs = [44, 55, 13, 43, 22])

Base.@kwdef mutable struct Dashboard <: ReactiveModel
    plot_options::PlotOptions = PlotOptions(chart_type=:bar, labels= ["Team A", "Team B", "Team C", "Team D", "Team E"])
    barchart::R{Vector{PlotSeries}} = [PlotSeries("name", PlotData(data.Costs))]
end

# UI
Stipple.register_components(Dashboard, StippleCharts.COMPONENTS)
const model = Stipple.init(Dashboard())

function ui()
    dashboard(vm(model), [
        StippleUI.Layout.layout([
            header([
                    btn("",icon="menu", @click("drawer = !drawer"))
                    title([
                        "Example App"
                    ])
            ])

            drawer(side="left", v_model="drawer", [
                item([
                    item_section([
                        "Inbox"
                    ])
                ])
            ])
            h3("Example Plot")
            row(cell(class="st-module", plot(@data(:barchart); options=:plot_options)))
        ])
    ])
end

route("/") do
    ui() |> html
end

up(rand((8000:9000)), open_browser=true)

What am I doing wrong?
Thank you! :)

[sgaseretto]

@JulesBlubb have you figured out how to implement the sidebar? I'm looking for this too.

[hhaensel]

This should do it:

using Stipple, StippleUI, StippleCharts

using DataFrames

data = DataFrame(Costs = [44, 55, 13, 43, 22])

@reactive! mutable struct Example <: ReactiveModel
    plot_options::R{PlotOptions} = PlotOptions(
        chart_type = :bar, 
        labels = ["Team A", "Team B", "Team C", "Team D", "Team E"],
        yaxis_max = 60,
        yaxis_min = 0,
        ), READONLY
    barchart::R{Vector{PlotSeries}} = [PlotSeries("name", PlotData(data.Costs))], READONLY

    drawer::R{Bool} = false
end

Stipple.register_components(Example, StippleCharts.COMPONENTS)
model = Stipple.init(Example)

function handlers(model)
    on(model.isready) do ready
        ready || return
        notify(model.plot_options)        
    end
    model
end

function ui(model)
    dashboard(model, [
        StippleUI.Layouts.layout([
            header([
                    btn("",icon="menu", @click("drawer = ! drawer"))
                    title("Example App")
            ])

            drawer(side="left", v__model="drawer", [
                list([
                    btn("", style = "width: 30px;",icon="menu", @click("drawer = ! drawer"))
                    item([
                        item_section(icon("inbox"), :avatar)
                        item_section("Inbox")
                    ], :clickable, :v__ripple)
                    item([
                        item_section(icon("outbox"), :avatar)
                        item_section("Outbox")
                    ])
                ])
            ])
            h3("Example Plot")
            row(StippleCharts.plot(:barchart, options = :plot_options))
        ])
    ])
end

route("/") do
    model |> handlers |> ui |> html
end

up(8000, open_browser = true)

[sgaseretto]

Thanks for the fast response @hhaensel ! I'll give it a try as soon as I finish some pending issues I have