Author's Note: In this tutorial, we'll create a responsive admin panel layout using CSS and some JavaScript. To create it, we will borrow some ideas from the WordPress dashboard, such as its side menu. During the creation process, we will face many challenges, but they will give us good practice to improve our skills.
Without further ado, let's take a look at the final demo of the admin panel (click the Collapse button at the bottom of the sidebar to see the dropdown menu in action, and watch the full screen version to experiment with responsiveness):
1. Start with page layout
First we need SVG, header and section:
SVG sprites
As you can imagine, we'll need a bunch of icons. Luckily, Envato Elements provides an ever-expanding collection of useful vector icons, so let's take advantage of this library and download these Trade and Dashboard Icons .
Instead of including them directly on the page with an img or svg tag, let's create an SVG sprite. To do this, we will wrap all the icons in an SVG container. The container needs to be hidden, so we'll apply display: none to it. If we don't hide it, a large empty area will appear at the top of the page.
Each icon will be placed inside a symbol element with a unique id and a viewBox attribute that will depend on the size of the icon. We can then render the target icon at any time by calling the use element (I'll show you how to do this in a moment).
For now, let's just take a look at the markup required for an SVG sprite:
And that's all we need to create an inline SVG sprite.
Header
Moving on to the admin panel layout, let's look at the header of the page. In it, we will define the nav element, which will act as a wrapper for the following elements:
Logo
A Collapse button that toggles menus on mobile device screens.
The menu itself, which will contain menu links, two titles, and a collapse/expand button. It might be more semantically correct to create two separate menus and place the titles outside of them, but you can use the approach you like.
Here's how it will look on wide screens (>767 pixels):
Header structure:
Pay attention to two things:
How we use the use element to refer to target icons.
The ARIA attributes (aria-expanded, aria-label, aria-hidden) that we add to the toggle buttons. These attributes will help us make the component a little more accessible. Later, we'll look at how their values will be updated depending on the state of the button.
Section
Section will contain two nested sections.
Section 1
Inside the first section, we will place a search form and some information (name, avatar and notifications) about the current logged in user. Here is its display on wide screens (> 767 pixels):
Section structure:
Again, notice that we are adding some ARIA attributes to the submit button.
Section 2
In the second section, just to populate the demo with some dummy content, we'll put in some article placeholders. Typically, they may contain tabular data, charts, or feeds of some kind.
“Use a maximum of 5-7 different widgets to create a view. Otherwise, it will be difficult for the user to focus and get a clear understanding.” — Taras Bakusevich
Here is how the panel is rendered on wide screens (>767 pixels):
Section structure:
2. Define the main styles
Once the markup for the admin panel is ready, we'll move on to the CSS. The first step, as always, is to specify some CSS variables and general reset styles:
Note: For the sake of simplicity, I won't cover all the CSS rules in the tutorial. There are almost 400 lines of CSS here. If you'd like, you can test them all by clicking on the demo project's CSS tab.
3. Define the main styles of the administration panel
For now, we're ready to focus on page styles.
header styles
Header will be a fixed position element. Its width will be 220px and its height is equal to the height of the viewport. If its content exceeds the height of the viewport, a vertical scroll bar will appear. The nav element will behave like a flex container with a minimum height of 100%. Remember that it has three children:
logo,
mobile menu switch button,
and menu.
The toggle button will only be visible on small screens (< 768 pixels). Here are the styles we need:
Tip: If you prefer an absolutely positioned heading that spans the full height of the page, add the following styles:
Menu styles
The menu will be a flex container, and we'll set it to flex: 1 so that it expands to span the entire height of the parent container.
For the last menu item, we'll set margin-top: auto because it should be at the very bottom of the menu. This behavior will be clearer when there is no header scrollbar. To test this, try deleting some menu items or watch a demo on a larger screen.
Links and a button within a menu will also act as flex containers, and their contents (text and icons) must be vertically aligned.
Menu titles will be slightly smaller compared to other menu items. In addition, we will increase the spacing between characters for them. Here is part of the menu styles:
Page content styles
Remember that the .page-content section contains two subsections. This section will be positioned 220px from the left edge of the viewport. Plus, we'll give it width: calc(100% - 220px). Note that the value of its left property is equal to the width of the heading. His styles:
Search and custom styles
Also remember that the .search-and-user section contains two elements: the search form and the .admin-profile. To place them, we will use CSS Grid. The search form will span all available space, and there will be a 50px gap between it and its adjacent element. Both elements will be aligned vertically.
The submit button inside the form will be positioned absolutely. It will only contain a decorative icon, so we'll need an ARIA attribute to allow screen readers to interpret it and thus make it accessible.
An .admin-profile object containing two elements will behave like a flex container with vertically centered content. The badge (counter) element will be absolutely positioned inside its parent with horizontally and vertically centered content. Here are some of the required styles for this section:
Grid styles
To place the admin panel articles, we will use a CSS grid. We will give all articles a fixed height of 300px. Other than the first and last articles, which will span the entire width of the parent element, all the others will be part of a two-column layout. Related styles:
4. Switch title
Each time we click the Collapse/Expand button, the header state will change.
Please note that this feature will only be available on screens over 767 pixels. For smaller screens, our header will have a different layout, which we'll cover shortly.
When the heading state is collapsed, the body gets the collapsed class. At this point, the following things happen:
The header is compressed. Its width is reduced from 220px to 40px.
In response, the .page-content section gets bigger. In particular, its width changes from width: calc(100% - 220px) to width: calc(100% - 40px). Also, the value of its left property becomes 40px instead of 220px.
The logo, menu titles, menu link text, and menu button text disappear.
The value of the aria-expanded and aria-label attributes of the radio button is updated. Also, its icon rotates 180 degrees so it looks like an extension icon.
Here is the JavaScript code that implements this behavior:
And all related styles:
5. Display tooltip in menu items
Now let's add another new feature to the header. As we discussed in the previous section, when the title is collapsed, the text of the menu links will disappear. This means that only the SVG icons will be visible at this point. So let's display a tooltip to help users better understand what each link does.
To do this, when hovering over a menu link (icon), we add a title attribute to it, the value of which is plain text. But again, this should only happen when the title is collapsed and the window is at least 768px wide.
Here is the relevant JavaScript:
6. Adaptability
On screens up to 767 pixels wide, our page will look like this:
That's a big difference from our sidebar, right? Let's highlight the most important differences compared to the desktop version:
Both the header and .page-content have position: static and width: 100%.
The flex direction for the nav element changes from column to row.
The mobile menu toggle button becomes visible.
The menu is absolutely positioned right below the heading and is initially hidden. It will be displayed every time we click on the toggle button.
The collapse/expand button and the .greeting element are hidden.
The .search-and-user section is absolutely positioned and placed next to the mobile menu toggle button.
Below you can see some of the responsive styles:
7. Switch mobile menu
Each time we click on the toggle button, the menu state will change. If you unfold it, it will move apart, and vice versa.
In the expanded state, the menu body receives the mob-menu-opened class. At this point, the following things happen:
The menu is displayed.
The radio button's aria-expanded and aria-label attribute values are updated. In addition, its icon rotates 180 degrees, and looks like an extension icon.
Here is the required JavaScript code:
And the related CSS:
Conclusion
That's it guys! We have successfully created a fully functional admin panel layout. You can extend this framework to create different kinds of interfaces. Hope you enjoyed this guide.
Just a last note. I'm certainly not an accessibility expert, but I tried to make this component more accessible by adding some common ARIA attributes. During this process, I took a look at the WordPress and Codepen dashboards for reference. We could include other ARIA attributes in the code as well. For example, I left out the aria-controls attribute, which is responsible for identifying related content, but that was because Aria-Controls is a Poop .
If I missed something or you think some things should have been done differently, let me know in the comments below. As always, thanks for reading!
No comments:
Post a Comment