Adjustements for sidebar

[tanguilp]

Hi,

Regarding Sidebar:

• Looks like the :position attribute is required, but it is not documented as such
• I fail to understand how to have the sidebar hidden by default

[shahryarjb]

Hi @tanguilp, I hope you are well,
Are you using master or last beta version?

Because it is not required and its default is start
https://github.com/mishka-group/mishka_chelekom/blob/master/priv/templates/components/sidebar.eex#L68

And inside Website prop is

Name	Type	Required	Description
position	string	No	Determines the element position. Default is start.

If you mean somewhere else, please tell me.

[tanguilp]

I'm using latest version from your repository.

Here is the stacktrace:

[error] ** (KeyError) key :hide_position not found in: %{
  id: "sidebar",
  position: "start",
  size: "large",
  color: "natural",
  rest: %{},
  __changed__: nil,
  inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<6.144774/2 in VoyageeWeb.Layouts.app/1>
    }
  ],
  class: nil,
  variant: "default",
  __given__: %{
    id: "sidebar",
    __changed__: nil,
    inner_block: [
      %{
        __slot__: :inner_block,
        inner_block: #Function<6.144774/2 in VoyageeWeb.Layouts.app/1>
      }
    ]
  },
  border: "extra_small",
  on_hide: %Phoenix.LiveView.JS{ops: []},
  on_show: %Phoenix.LiveView.JS{ops: []},
  on_hide_away: %Phoenix.LiveView.JS{ops: []}
}
    lib/voyagee_web/components/sidebar.ex:90: anonymous fn/2 in VoyageeWeb.Components.Sidebar."sidebar (overridable 1)"/1
    (voyagee 0.1.0) /home/tanguilp/coding/voyagee/lib/voyagee_web/components/layouts/app.html.heex:3: VoyageeWeb.Layouts.app/1
    (elixir 1.18.0) lib/enum.ex:2546: Enum."-reduce/3-lists^foldl/2-0-"/3
    (phoenix_live_view 1.0.1) lib/phoenix_live_view/diff.ex:412: Phoenix.LiveView.Diff.traverse/7
    (phoenix_live_view 1.0.1) lib/phoenix_live_view/diff.ex:136: Phoenix.LiveView.Diff.render/3
    (phoenix_live_view 1.0.1) lib/phoenix_live_view/static.ex:288: Phoenix.LiveView.Static.to_rendered_content_tag/4
    (phoenix_live_view 1.0.1) lib/phoenix_live_view/static.ex:171: Phoenix.LiveView.Static.do_render/4
    (phoenix_live_view 1.0.1) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
    (phoenix 1.7.18) lib/phoenix/router.ex:484: Phoenix.Router.__call__/5
    (voyagee 0.1.0) lib/voyagee_web/endpoint.ex:1: VoyageeWeb.Endpoint.plug_builder_call/2
    (voyagee 0.1.0) deps/plug/lib/plug/debugger.ex:136: VoyageeWeb.Endpoint."call (overridable 3)"/2
    (voyagee 0.1.0) lib/voyagee_web/endpoint.ex:1: VoyageeWeb.Endpoint.call/2
    (phoenix 1.7.18) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
    (bandit 1.6.1) lib/bandit/pipeline.ex:127: Bandit.Pipeline.call_plug!/2
    (bandit 1.6.1) lib/bandit/pipeline.ex:36: Bandit.Pipeline.run/4
    (bandit 1.6.1) lib/bandit/http1/handler.ex:12: Bandit.HTTP1.Handler.handle_data/3
    (bandit 1.6.1) lib/bandit/delegating_handler.ex:18: Bandit.DelegatingHandler.handle_data/3
    (bandit 1.6.1) /home/tanguilp/coding/voyagee/deps/thousand_island/lib/thousand_island/handler.ex:385: Bandit.DelegatingHandler.handle_info/2

Turns out it hide_position and not position I was talking about 😅

[MonaAghili]

Hi @tanguilp

• I fail to understand how to have the sidebar hidden by default

based on this,
I think you should use the Drawer component. You can find more details here: https://mishka.tools/chelekom/docs/drawer
check it out to see if this is what you need and feel free to ask any questions

[shahryarjb]

@tanguilp Aha you are saying about hide_position, could you give me the html code you are using?
And as you see @MonaAghili comment if you want to have open and close sidebar you should use Drawer
By the way, this option is just for mobile, because sidebar always is shown in desktop

[tanguilp]

Ah thanks for the explanation. I missed the Drawer component by not RTFM 😅

Gonna try it, however what I want is:

• sidebar for mobile + main page of desktop app
• drawer otherwise

Closing for now.

[MonaAghili]

@tanguilp The sidebar component is designed to hide on smaller devices and works like a drawer. However, the documentation for this feature currently has some issues, and I’ll work on fixing it.

To use this component effectively, you need to specify a value for the hide_position. For example, setting it to "left" will hide the sidebar by sliding it to the left. Additionally, you should include a button to allow users to open the sidebar on mobile devices, like this:

<.button 
  class="sm:hidden" 
  phx-click={MishkaChelekom.Sidebar.show_sidebar("id_of_sidebar", "left")} 
>
  Open Left
</.button>

While adding a button isn’t strictly necessary (since the sidebar is hidden by default on smaller screens), specifying the hide_position value is essential to avoid errors. We’ll address these documentation issues soon to make the process clearer.

[tanguilp]

Thanks for the detailed explanation!

BTW in your example it's not clear how to handle show/hide. Probably through a Live Component having the current show/hide state, but maybe there is a simple way?

[shahryarjb]

hanks for the detailed explanation!

BTW in your example it's not clear how to handle show/hide. Probably through a Live Component having the current show/hide state, but maybe there is a simple way?

@tanguilp No, a Live Component is not necessary. The drawer toggles in a hybrid manner using the JS module provided by LiveView itself.

<.drawer id="unique_id" color="natural"></.drawer>

Now, you need a button on your website

<.button size="small" phx-click={Drawer.show_drawer("unique_id", "bottom")}>Open</.button>
<.button size="small" phx-click={Drawer.show_drawer("unique_id", "top")}>Open</.button>
<.button size="small" phx-click={Drawer.show_drawer("unique_id", "left")}>Open</.button>
<.button size="small" phx-click={Drawer.show_drawer("unique_id", "right")}>Open</.button>

If you want to show sidebar from first server render , you can use show attr

We will soon include this button section in the documentation as well. I'll keep this issue open for now and will submit a pull request for it shortly.

By the way, we noticed an issue with the sidebar on the mobile version, where it requires an overlay similar to the drawer. This will be fixed soon, but I believe your issue can be fully resolved with the drawer.

---

@MonaAghili We need to document the toggle button copy code inside drawer and sidebar

[tanguilp]

Ha yeah but I was thinking about UI like reddit where you can open & close the sidebar/drawer by clicking on the same icon:

BTW another need: to have the position to absolute and not fixed, so that I can do like reddit, that is have the top bar remain visible. WDYT?

[tanguilp]

BTW another need: to have the position to absolute and not fixed, so that I can do like reddit, that is have the top bar remain visible. WDYT?

Same for sidebar actually.

[shahryarjb]

@tanguilp
The layout's control on Reddit is entirely in its hands, and because it uses JS, it can close it anytime.
The best and fastest solution is to use phx-hook in JavaScript to toggle it open and closed, or the same live component you mentioned.

Alternatively, you can create a dedicated button for the layout above the navbar, and use a JS module to toggle the class dynamically.

Or you can create both "show" and "hide" buttons. Each time one is clicked, use a JS module to hide the other. Although this adds extra work, it’s a workaround that can get the job done effectively.

[shahryarjb]

Regarding JavaScript, we have recently added a parser version for integrating JS, which is still in the development phase. It won't be included in this version. However, by version 0.0.4, we might have more client-side components, along with the addition of the JS parser to the generator.

[shahryarjb]

For this subject I will test a simple example tomorrow. 😊

[MonaAghili]

Hi @tanguilp
Modifying the sidebar will take some time, and I’m unable to focus on it at the moment. However, your requirements will be incorporated into it in future updates.

If it’s urgent to have a component that shows or hides on smaller devices, I suggest using the Drawer component for now.

You can create a custom layout for desktops based on your requirements (like Reddit) and hide it on mobile. Then, add a button in the navbar that’s visible only on small devices and use the Drawer component to implement the functionality you have in mind.

This is just a suggestion that I think would work well for now.

[shahryarjb]

As my colleague explained, the best approach for now is to have a drawer that is only active on mobile and a sidebar exclusively for desktop. This might involve some duplicate code, but it's currently the simplest and most practical option.

If you look at most JS frameworks, they often don't enable any specific actions for sidebars. We’ve added these actions and functionalities, but they require proper structuring and may even need JavaScript. For this reason, we’ve postponed it to the next two versions to work on it comprehensively.

Thank you.

[tanguilp]

I did it a bit differently: I now have 2 templates

• one for the main page using a drawer
• another one for other pages that use the Sidebar component

Works pretty well, except that I need to hide the button on the second template on desktop :)

Thanks for your reply!

[shahryarjb]

@tanguilp Well, thats cool, Please Use master, we added base variant and color, if you do not want to use our colors, it is a clear design