1.0.2 • Published 4 years ago
Sidebars
Sidebars provide site navigation and can be permanent or called on-screen.
HTML
Make sure to put this as high in your <body> element as possible.
<div class="mdf-sidebar-container" aria-hidden="true">
<aside class="mdf-sidebar mdf-sidebar--left" aria-labelledby="sidebar-title">
<header class="mdf-sidebar__header">
<h2 id="sidebar-title" class="mdf-sidebar__title">Sidebar</h2>
<button class="mdf-sidebar__close" aria-label="Close sidebar">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#clear"></use>
</svg>
</button>
</header>
<div class="mdf-sidebar__content">
<nav role="navigation" aria-label="Site navigation">
<a class="mdf-sidebar__link" href="#1">
Link #1
</a>
<a class="mdf-sidebar__link" href="#2">
Link #2
</a>
<a class="mdf-sidebar__link" href="#3">
Link #3
</a>
</nav>
</div>
<footer class="mdf-sidebar__footer">
<p>Sidebar footer text</p>
</footer>
</aside>
<div class="mdf-sidebar-backdrop"></div>
</div>
Sass
// Include default styles without configuration
@forward '@miraidesigns/sidebar/styles';
// Configure appearance
@use '@miraidesigns/sidebar' with (
$variable: value
);
@include sidebar.styles();
TypeScript
import { MDFSidebar } from '@miraidesigns/sidebar';
new MDFSidebar(document.querySelector('.mdf-sidebar'), {
anchor: document.getElementById('sidebar-anchor')
});
Implementation
Classes
| Name | Type | Description |
|---|
mdf-sidebar-container | Parent | Contains the sidebar and backdrop. Used for off-screen sidebars |
mdf-sidebar-container--active | Modifier | 1. Prepares the sidebar to be visible. Used for off-screen sidebars |
mdf-sidebar-container--move-in | Modifier | 2. Fades-in the sidebar and allows for interaction. Used for off-screen sidebars |
mdf-sidebar | Parent | Contains the header, content and footer |
mdf-sidebar--left | Modifier | Moves the sidebar to the left of the screen. Used for off-screen sidebars |
mdf-sidebar--right | Modifier | Moves the sidebar to the right of the screen. Used for off-screen sidebars |
mdf-sidebar__header | Parent / Child | Contains the title and close button. Child to .mdf-sidebar |
mdf-sidebar__title | Child | Title element. Child to .mdf-sidebar__header |
mdf-sidebar__close | Child | Closes the sidebar. Child to .mdf-sidebar__header |
mdf-sidebar__content | Parent / Child | Contains the navigation links or other content. Child to .mdf-sidebar |
mdf-sidebar__link | Child | Navigation link element. Child to .mdf-sidebar__content |
mdf-sidebar__footer | Parent / Child | Footer element. Child to .mdf-sidebar |
mdf-sidebar-backdrop | Child | Sidebar backdrop. Child to .mdf-sidebar-container |
Events
| Name | Data | Description |
|---|
MDFSidebar:opened | null | Fires when the sidebar opens |
MDFSidebar:closed | null | Fires when the sidebar closes |
Properties
| Name | Type | Description |
|---|
.anchor | HTMLElement | Returns the anchor element |
.container | HTMLElement | Returns the sidebar container element |
.content | HTMLElement | Returns the sidebar main content element |
.sidebar | HTMLElement | Returns the sidebar element |
.isActive() | (): boolean | Returns wether or not the sidebar is active |
.openSidebar(setFocus?) | (boolean): void | Open the sidebar (optionally set focus on the first item) |
.closeSidebar() | (): void | Close the sidebar |
Options
| Name | Type | Default | Description |
|---|
anchor | Element | null | The anchor element that will call the sidebar |
onOpen | () => void | null | Function will run when the sidebar is opened |
onClose | () => void | null | Function will run when the sidebar is closed |
hideOnClick | boolean | true | Close the sidebar when a click is registered outside of it |