Sidebar integration in the pages

[Harikarthyk]

Hi,

Can the sidebar be included in the components?

I checked the layouts, and there is no option for a sidebar.

I need something like a header and footer; is that possible to achieve?

Sample Sidebar.

[paweljozwicki]

Hi, we don't have a sidebar in our components, and it's possible to achieve this, but only by preparing a dedicated component. There is no way to create one with the components we already have.

[paweljozwicki]

We can prepare something, but the question is if you use Howlite, Bulma, or your own components?

[Harikarthyk]

We are using our own components.

[Harikarthyk]

Hey
If possible, you can create a page with a header and sidebar using howlite, we will try to implement the same using our components.

Thanks in advance.

[paweljozwicki]

I assume that in this case sidebar should just be a static part of the page so it's a matter of the page structure. To deal with our grid system I added three dedicated containers, and prepared a new page template:

offsetcontainer.html

<div class="hl-grid hl-cols-9">
  <sly data-sly-repeat.paragraph="${resource.children}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
</div> 

sidebarcontainer.html

<div class="hl-grid hl-cols-3">
  <sly data-sly-repeat.paragraph="${resource.children}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
</div> 

sidebarpagecontainer.html

<div class="hl-grid hl-cols-12">
  <sly data-sly-repeat.paragraph="${resource.children}" data-sly-resource="${paragraph.path @ resourceType=paragraph.resourceType}"></sly>
</div> 

and templates/sidebarpage/initial/.content.json

{
  "jcr:primaryType": "ws:Page",
  "jcr:content": {
    "jcr:primaryType": "ws:PageContent",
    "sling:resourceType": "howlite/components/page",
    "rootcontainer": {
      "sling:resourceType": "howlite/components/maincontainer/sidebarpagecontainer",
      "sidebarcontainer": {
        "sling:resourceType": "howlite/components/maincontainer/sidebarcontainer",
        "title": {"sling:resourceType": "howlite/components/container"}
      },
      "maincontainer": {
        "sling:resourceType": "howlite/components/maincontainer/offsetcontainer",
        "header": {"sling:resourceType": "howlite/components/headerreference"},
        "pagesection": {"sling:resourceType": "howlite/components/pagesection"},
        "footer": {"sling:resourceType": "howlite/components/footerreference"}
      }
    }
  }
}

And the result page layout:

[rohitgupta274509]

Thanks for your suggestions, we also tried the same, using different containers we are able to get the required layouts.