Introduction
In a default Blazor app, you might have come across that annoying fixed navbar(sidebar) that occupies screen real estate at all times. Wouldn't it be great to have a sidebar that gracefully collapses when not needed, giving users more space to interact with the main content? Well, good news—you've stumbled upon the right article. We'll explore how to implement a auto-collapsible sidebar in Blazor.
Here's how it's gonna look; thank me later. => Check it live demo here [https://rikampalkar.github.io/portfolio]
![Autoclose Sidebar in Blazor]()
Gif 1: Auto collapsible Nav bar
Watch Detailed Video
Enough said, let's enhance the user experience.
We'll achieve this in three simple steps:
- Step 1: Add a New Razor Component - AutoHideSidebar
- Step 2: Implement Presentation Logic for Sidebar Toggle
- Step 3: Integrate Styles for Sidebar Collapse and Expansion
Step 1. Add a New Razor Component - AutoHideSidebar
Let us begin by introducing a new Razor component called AutoHideSidebar.razor.
This component comprises a container div housing a navigation menu. The @onmouseover and @onmouseout events are configured to trigger the ExpandNavMenu and CollapseNavMenu methods, respectively. These methods govern the visibility of the sidebar. Each item in the sidebar is represented by a <NavLink> component.
<div class="auto-hiding-nav-menu"
@onmouseover="ExpandNavMenu"
@onmouseout="CollapseNavMenu">
<nav class="nav-menu @(collapseNavMenu ? "collapsed" : "expand")">
<div>
<NavLink class="nav-link" href="https://rikampalkar.github.io/" Match="NavLinkMatch.All">
<span class="bi bi-house nav-item-icon" aria-hidden="true">
<span class="nav-item-text">Home</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-controller nav-item-icon">
<span class="nav-item-text">TicTacToe</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-joystick nav-item-icon">
<span class="nav-item-text">Snake</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-filetype-ppt nav-item-icon">
<span class="nav-item-text">PPT</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-journal-text nav-item-icon">
<span class="nav-item-text">Articles</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-award nav-item-icon">
<span class="nav-item-text">Awards</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-camera-reels nav-item-icon">
<span class="nav-item-text">Youtube</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-book nav-item-icon">
<span class="nav-item-text">Books</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-columns-gap nav-item-icon">
<span class="nav-item-text">Projects</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-discord nav-item-icon">
<span class="nav-item-text">Discord</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-info-circle nav-item-icon">
<span class="nav-item-text">About</span>
</span>
</NavLink>
<NavLink class="nav-link" href="/">
<span class="bi bi-person-lines-fill nav-item-icon">
<span class="nav-item-text">Contact</span>
</span>
</NavLink>
</div>
</nav>
</div>
<style>
.nav-link {
margin-bottom: 10px;
}
.expand .nav-link {
margin-bottom: 18px;
}
</style>
Listing 1: AutoHideSidebar.razor
Step 2. Implement Presentation Logic for Sidebar Toggle
The Code-Behind with C#, The code behind is responsible for handling the state of the sidebar. In this step, we will incorporate the essential presentation logic to manage the toggling of the sidebar.
The CollapseNavMenu variable keeps track of whether the menu is currently collapsed or expanded, while the isHovered variable monitors whether the mouse is currently over the menu. The ExpandNavMenu and CollapseNavMenu methods take charge of updating these states in response to user interactions.
@code {
private bool collapseNavMenu = true;
private bool isHovered = false;
private void ExpandNavMenu()
{
isHovered = true;
if (collapseNavMenu) collapseNavMenu = false;
}
private void CollapseNavMenu()
{
isHovered = false;
if (!collapseNavMenu) collapseNavMenu = true;
}
}
Listing 2: AutoHideSidebar.razor.cs
Step 3. Integrate Styles for Sidebar Collapse and Expansion
The CSS is responsible for styling the auto-hiding of sidebar. Let's delve into each class and a few of its important properties:
- .auto-hiding-nav-menu: This class styles the container for the navigation menu.
- Properties:
- display: flex: Utilizes flex display to align its children.
- flex-direction: column: Stacks child elements vertically.
- align-items: flex-start: Aligns items to the start of the cross-axis (top for a column layout).
- position: relative: Positions the container relative to its normal position.
- transition: max-width 0.3s ease: Implements a smooth transition effect for changing the maximum width.
- .nav-menu: Styles for the navigation menu itself.
- Properties:
- overflow: hidden: Hides any content that overflows the box.
- height: 100%: Sets the height of the navigation menu to 100%.
- .collapsed and .expand: These classes define the width of the navigation menu in its collapsed and expanded states.
- Properties:
- .collapsed { width: 25px; }: Collapsed state with a width of 25 pixels.
- .expand { width: 110px; }: Expanded state with a width of 110 pixels.
- .nav-item-text: Styles for the text within the navigation items.
- Properties:
- visibility: hidden: Initially hides the text.
- position: absolute: Takes the text out of the normal flow and positions it relative to the nearest positioned ancestor.
- transition: opacity 0.3s ease, transform 0.3s ease: Smooth transition for opacity and transform.
- transform-origin: left center: Specifies the origin for the transform.
- .expand .nav-item-text: Makes the text visible in the expanded state.
- Properties:
- visibility: visible: Makes the text visible.
- opacity: 0.5: Sets the initial opacity.
- .nav-link:hover .nav-item-text: Styles for the text when the navigation link is hovered.
- Properties:
- opacity: 1: Full opacity on hover.
- transform: scale(1.2): Enlarges the text on hover.
- color: #DAF7A6: Changes the text color on hover.
- .nav-item: Styles for the navigation items.
- Properties:
- display: flex: Uses flexbox for layout.
- align-items: center: Aligns items vertically centered.
- justify-content: flex-start: Aligns items to the start of the main axis.
- .nav-item-icon: Styles for icons within the navigation items.
- Properties:
- transition: opacity 0.3s ease, transform 0.3s ease: Smooth transition for opacity and transform.
- transform-origin: left center: Specifies the origin for the transform.
- .nav-link:hover .nav-item-icon: Styles for icons when the navigation link is hovered.
- Properties:
- color: #DAF7A6: Changes the icon color on hover.
- transform: scale(1.2): Enlarges the icon on hover.
- .nav-link > *: Styles for child elements of the navigation link.
- Properties:
- align-self: flex-start: Aligns child elements to the start of the cross-axis.
.auto-hiding-nav-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
transition: max-width 0.3s ease;
background-color: #253529;
color: #fff;
padding: 1rem;
border-radius: 15px;
margin-top: 5px;
}
.nav-menu {
overflow: hidden;
height: 100%;
}
.collapsed {
width: 25px;
}
.expand {
width: 110px;
}
.nav-item-text {
visibility: hidden;
position: absolute;
margin-left: 0.5rem;
font-size: 16px;
margin-top: 4px;
transition: opacity 0.3s ease, transform 0.3s ease;
transform-origin: left center;
}
.expand .nav-item-text {
visibility: visible;
opacity: 0.5;
}
.nav-link:hover .nav-item-text {
opacity: 1;
transform: scale(1.2);
color: #DAF7A6;
}
.nav-item {
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav-item-icon {
color: white;
font-size: 20px;
transition: opacity 0.3s ease, transform 0.3s ease;
transform-origin: left center;
margin-bottom: 5px;
}
.nav-link:hover .nav-item-icon {
color: #DAF7A6;
transform: scale(1.2);
}
.nav-link > * {
align-self: flex-start;
}
Listing 3: AutoHideSidebar.razor.css
The three-step process, from adding the Razor component for the auto-hide sidebar to implementing presentation logic and styling with CSS, is enough to create stylish sidebar.
Conclusion
Through these three steps and detailed explanations, we've learned how to create a seamless auto hiding sidebar.
Looking to dive deeper into Blazor and unlock its full potential? Check out my comprehensive guide "[Blazor Simplified]". This book offers practical insights, expert tips, and real-world examples to master Blazor. Take your skills to the next level and elevate your web development projects with the power of Blazor! That's not all! You can also explore the [Official GitHub repository] of the book, where you'll find code samples, supplementary materials, and a community of fellow Blazor enthusiasts. Let's embark on a journey to master Blazor together!