Building a responsive sidebar application layout

I wanted to share a CSS and webcomponent layout that I’ve been pretty happy with in a few projects. With webcomponents now widely supported, I was able to remove one of the last bit of inline scripts I had left in docket converting it to a webcomponent. The layout offers a layout with a 250px sidebar and content area. In smaller viewports the menu collapses to the side, but can be opened with a full height narrow button that toggles the sidebar to its normal width. I wanted to try out more of the newer feature in CSS that I’ve not had a chance to play with much having been working on backend code in my day job for the last couple years.

Our application layout is going to require a small amount of structural HTML:

Show Plain Text
  1. <div class="layout-three-quarter">
  2.   <side-bar data-expanded="false">
  3.     <div class="menu">
  4.       <ul>
  5.         <li>Projects</li>
  6.         <li>People</li>
  7.         <li>Settings</li>
  8.       </ul>
  9.     </div>
  10.     <button class="expander" title="Show menu" data-expander="1">
  11.       =
  12.       =
  13.       =
  14.     </button>
  15.   </side-bar>
  16.   <section class="content">
  17.     application content goes here
  18.   </section>
  19. </div>

This HTML gives us a minimal skeleton to gets us a sidebar container, a menu that can scroll and collapse, and a toggle button that we’ll add some interaction to. Don’t worry too much about the side-bar element, we’ll be defining that with a webcomponent later. Our layout skeleton contains the application body, and the styling for this structural HTML looks like:

Show Plain Text
  1. :root {
  2.   /* I really like using CSS custom properties for layout and design variables.
  3.      Custom properties replace magic numbers and let you get one of the most
  4.      useful features of CSS preprocessors with no tooling.
  5.   */
  6.   --sidebar-width: 250px;
  7.   --space: 8px;
  8.  
  9.   /* Separate our palette from use cases.
  10.      Makes restyling simpler in the future, and helps build design language on your team.
  11.      Having variables for colors also makes adding alternate palettes and themes very easy
  12.      as you can redefine the variables with more specific selectors to retheme almost everything.
  13.   */
  14.   --color-gray-100: #f0ecea;
  15.   --color-bg-low: var(--color-gray-100);
  16. }
  17.  
  18. .layout-three-quarter {
  19.   height: 100%;
  20.   padding-left: var(--sidebar-width);
  21. }
  22.  
  23. side-bar,
  24. .content {
  25.     /* Math in CSS replaces a bunch of scenarios I would use sass for */
  26.     padding-bottom: calc(var(--space) * 5);
  27. }
  28.  
  29. side-bar {
  30.     position: fixed;
  31.     top: 0;
  32.     left: 0;
  33.     height: 100%;
  34.     width: var(--sidebar-width);
  35.  
  36.     padding-top: calc(var(--space) * 3);
  37.     background: var(--color-bg-low);
  38.     transition: left 0.26s ease-in-out;
  39. }
  40.  
  41. .content {
  42.     padding-top: calc(var(--space) * 5);
  43.     padding-right: calc(var(--space) * 5);
  44.     padding-left: calc(var(--space) * 5);
  45. }

This is the basic structure of the layout of the application. We have a fixed width sidebar. The interior of the menu is styled with some padding.

Show Plain Text
  1. .menu {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: space-between;
  5.     gap: calc(var(--space) * 3);
  6.     padding-left: calc(var(--space) * 5);
  7.  
  8.     height: 100%;
  9.     overflow-y: auto;
  10. }
  11. .expander {
  12.     display: none;
  13. }

When we’re in a mobile viewport we hide the menu:

Show Plain Text
  1. :root {
  2.     --z-active-ui: 100;
  3.     --color-darken: #333;
  4. }
  5.  
  6. @media (max-width: 600px) {
  7.     .layout-three-quarter {
  8.         padding-left: 10px;
  9.     }
  10.  
  11.     .content {
  12.         padding-top: calc(var(--space) * 3);
  13.         padding-left: calc(var(--space) * 4);
  14.         padding-right: calc(var(--space) * 2);
  15.     }
  16.  
  17.     side-bar {
  18.         transition: transform 0.25s ease-in;
  19.         transform: translateX(calc(var(--sidebar-width) * -1 + 10px));
  20.         z-index: var(--z-active-ui);
  21.     }
  22.  
  23.     .expander {
  24.         cursor: pointer;
  25.         display: block;
  26.         justify-content: center;
  27.         position: absolute;
  28.         top: 0;
  29.         right: 0;
  30.         bottom: 0;
  31.         width: 10px;
  32.         height: 100%;
  33.         background: color-mix(in srgb, var(--color-bg-low), var(--color-darken) 20%);
  34.         padding: 0;
  35.         border: none;
  36.         border-radius: 0;
  37.     }
  38.  
  39.     .expander:focus,
  40.     .expander:hover {
  41.         box-shadow: none;
  42.     }
  43.     side-bar[data-expanded="true"] {
  44.         transform: translateX(0px);
  45.     }
  46. }

If you’ve not written CSS in a while, I’m using CSS custom properties and calc() here. These are well supported features that help simplify maintenance of CSS and reduce reliance on pre-processors.

Toggle Behavior

For our mobile menu toggle behavior, we’ll use a webcomponent. While Shadow DOM is a marquee feature of webcomponents, shadow DOM has a few sharp edges when it comes to CSS, so I’ve been avoiding it. Instead I use template fragments in my view rendering to compose complex elements all in ‘light DOM’. Our webcomponent for this sidebar is quite simple:

Show Plain Text
  1. class SideBar extends HTMLElement {
  2.   connectedCallback() {
  3.     const button = this.querySelector('[data-expander]');
  4.     if (!button) {
  5.       console.error('Could not find expander for side-bar');
  6.       return;
  7.     }
  8.     const sidebar = this;
  9.     button.addEventListener('click', function (evt) {
  10.       evt.preventDefault();
  11.       const current = sidebar.dataset.expanded;
  12.       sidebar.dataset.expanded = current === 'false' ? 'true' : 'false';
  13.     });
  14.   }
  15. }
  16.  
  17. customElements.define('side-bar', SideBar);

This can be added to a script module tag on the page, or as a separate file and included in an asset bundler you’re using. Webcomponents can be great if you need to maintain organization specific components. Whether you make your components with react or with server rendered HTML, webcomponents can provide a decent complexity off-ramp for some applications. So there we have it, a simple reusable layout component. I’ve put a demo of this code together in codepen .

Comments

There are no comments, be the first!

Have your say: