Building a Dynamic Collapsible Sidenav with Resizable Split Screen in Angular
Enhance Your Angular Applications with Interactive Layouts and a Seamless User Experience
Imagine having a sleek and functional application with a side navigation menu that can not only collapse effortlessly but also allows users to resize it according to their preferences. Such dynamic navigation options can greatly enhance the user experience and provide a more flexible layout for your application.
In this article, we’ll explore a use case where we tackle the challenge of implementing a collapsible sidenav that can be resized by dragging a border, and seamlessly adjusting the screen layout. Below is an example (please note the presence of a play button, as the free GIF creator comes with some less-than-cool features).
Setting Up the Project
To get started with our sidenav and resizable split screen project, we’ll need to install two essential packages. Open your package.json file and add the following dependencies:
package.json
"angular-resizable-element": "⁷.0.2",
"angular-split": "¹⁵.0.0",Let’s dive into the details of the two packages:
- angular-resizable-element: This package provides Angular directives that enable resizable functionality for HTML elements. It allows you to make elements resizable by dragging their edges or corners. With this package, you can easily implement the resizable behavior for your sidenav or any other element in your application.
- angular-split: The angular-split package provides Angular components that facilitate the creation of split layouts. It allows you to divide the screen into multiple resizable panels or sections. You can adjust the size of the panels by dragging the splitter bar between them. This package is particularly useful when you want to achieve a split-screen effect and make the content within each section resizable.
These packages enable you to effortlessly implement a collapsible sidenav and resizable split screen in your Angular application.
HTML Structure for Sidenav:
<div style="height: 300px; border: 1px solid #eee">
<as-split [useTransition]="true" unit="percent" [gutterSize]="10">
<as-split-area [size]="40" [order]="1" [visible]="keepLeft">
<p>Some Data Sidenav</p>
</as-split-area>
<as-split-area [size]="40" [order]="2" [visible]="true">
<button
mat-button
class="collapse-btn"
(click)="keepLeft=!keepLeft"
></button>
Some Content
</as-split-area>
</as-split>
</div>The HTML structure mentioned above consists of a <div> element with a fixed height of 300px and a border. The "as-split" component from the "angular-split" package is used inside this <div>. By utilizing the "as-split" component, we can easily create resizable split areas.
Within the “as-split” component, we define two “as-split-area” components. The first “as-split-area” represents the sidenav area, which occupies 40% of the available space, has an order of 1, and its visibility is determined by the “keepLeft” variable. The second “as-split-area” represents the content area, also occupying 40% of the space, with an order of 2, and is always visible.
The sidenav area contains a <p> tag with the text "Some Data Sidenav". The content area includes a collapse button <button> that toggles the visibility of the sidenav when clicked, along with additional content.
This HTML structure provides the necessary foundation for creating a collapsible sidenav with resizable split screen functionality.
TS
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, ResizableModule, AngularSplitModule],
templateUrl: './main.html',
styleUrls: ['./main.css'],
})
export class App {
keepLeft: boolean = true;
}
bootstrapApplication(App);Import CommonModule, ResizableModule, and AngularSplitModule for functionality. Added keepLeft property which controls sidenav visibility.
CSS
.as-horizontal > .as-split-area {
position: relative;
}
.collapse-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: #7880c4;
border: none;
position: absolute;
top: 10%;
cursor: pointer;
left: -30px;
}The .as-horizontal > .as-split-area selector targets the split areas within the horizontal split layout. It sets the position property to relative, allowing the areas to be positioned relative to their normal flow.
I would assume the collapse-btn is self-explanatory.
In conclusion, we have explored the implementation of a collapsible sidenav with resizable split-screen functionality in Angular. As we wrap up, here are some best practices to consider when working with similar implementations:
- Component Modularity: Encapsulate the sidenav functionality within its own Angular component for better code organization and reusability.
💡 You could reuse this sidenav component across multiple projects using an open-source tool like Bit. With Bit you can “harvest” Angular components from your codebase and reuse across different projects with a simple
bit import your.username/sidenavComponentcommand.
Learn more here:
- Effective Use of Angular Directives: Leverage Angular directives like ngClass and event binding to handle dynamic styling and user interactions in a clean and efficient manner.
- CSS Organization: Maintain a structured and organized CSS codebase with descriptive class names and consistent naming conventions for improved readability and maintainability.
- Thoughtful CSS Positioning: Ensure proper positioning of elements within the sidenav and content areas using relative and absolute positioning as needed to achieve the desired layout and functionality.
- Accessibility Considerations: Pay attention to accessibility guidelines to ensure that the implemented features are easily navigable and usable for all users, including those relying on assistive technologies.
Give a try to the application yourself here.
If you like this article then please do clap your hearts out, share with your friends and follow me for more content like this.
Happy coding!
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
