Creating a dynamic side navigation similar to Gmail using Bootstrap 5

Is there a way to achieve a Gmail-style side menu in a Blazor Server application (using .NET 6 Blazor Server) where only icons are initially displayed, and hovering over the menu expands it to show names without reducing the main body section width? Below are my current menu setup and CSS files.

Below is the current menu layout:

View Left Nav Menu

Showcased below is the NavMenu.razor content:

<main class="sidebarmain">
    
    <div class="flex-shrink-0 p-3" style="width: 280px;">
        <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
            <svg class="bi me-2" width="30" height="24">
                <use xlink:href="#bootstrap"></use>
            </svg>
            @*<span class="fs-5 fw-semibold">Collapsible</span>*@
        </a>
        <ul class="list-unstyled ps-0">
            <li class="mb-1">
                <button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
                    Home
                </button>
                <div class="collapse show" id="home-collapse">
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                        @* <li>
                            <a href="/" class="link-dark rounded">Dashboard</a>
                        </li> *@
                        <li>
                            <NavLink href="/" class="link-dark rounded">Dashboard</NavLink>
                        </li>
                        
                    </ul>
                </div>
            </li>
            
            ... // Additional menu items
            
        </ul>
    </div>
</main>

In addition, here is the MainLayout.razor code snippet:

@inherits LayoutComponentBase

... // Code sections for toggling and handling collapsible menu

Displaying next is the sidebar.css file contents:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;

... // CSS properties for styling the sidebar

If you're interested, take a look at the Gmail left menu styled using Bootstrap 5:

Check out Gmail-style Left Menu

Update:

I've made progress on displaying just icons initially but expanding the sidebar fully over the main area remains a challenge.

Sidebar with Icon-only Display

Additional CSS has been added to enhance the display:

/* Sidebar styles */

.sidebar {
    position: fixed; /* Fixed positioning for the sidebar */
    top: 0 !important;
    left: 0;
    height: 100% !important; /* Full height coverage */
    z-index: 100 !important; /* Ensure visibility above other content */
    background-color: #ced0da; /* Background color definition */
    transition: width 0.3s;
}

... // More CSS rules for adjusting sidebar width and appearance on hover
cssasp.net-corebootstrap-5blazor-server-side

Answer №1

If you're looking for a way to achieve success, let me share the key steps I took.

First and foremost, I made some changes to my NavMenu.razor file:

<div class="sBar">
    <ul class="list-unstyled ps-0 mt-5">


        <li>
            <a href="/" class="link-dark rounded">
                <i class="fas fa-tachometer-alt"></i> <span>Dashboard</span>
            </a>
        </li>

        (additional list items updated with new classes)

    </ul>
</div>

After that, I revised the Mainlayout.razor file as follows:

<style>
    .pb-3,
    .py-3 {
        padding-bottom: 0.93rem !important;
    }
    
</style>

(additional content updated)

Lastly, I utilized the following CSS code for styling the sidebar:

.sBar {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    height: 100%;
    width: 45px;
    background-color: #ced0da;
    transition: width 0.3s ease;
   
}

(additional CSS properties added or modified)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Immersive Bootstrap Header Design

I've been attempting to achieve a full-screen background within the header element, but for some reason it's not displaying properly? Code header { position: relative; width: 100%; min-height: auto; text-align: center; color: #fff; ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Applying CSS styles to a shadow DOM element will not produce the desired visual

I'm encountering an issue while attempting to apply CSS to an element within a shadow-root by adding a class to it. In my Angular component, I have the following code: CSS .test { border: 1px solid red; } TS document.getElementById('my-div&a ...

htmlcssangulartypescript

Tips on pausing a moving image from left to right and restarting it later

Is there a way to pause the left to right moving image at the end and then restart the loop? I tried utilizing this website link for assistance: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay Unfortunately, I couldn't fi ...

javascriptjqueryhtmlcss

Position form elements flush with div containers

.quantity-button { height: 35px; width: 35px; padding-bottom: 1px; margin-bottom: 3px; font-weight: 600; font-family: Raleway; color: white; background-color: #AA95B9; border: 2px solid black; border-radius: 5px; cursor: pointer; display: -webkit-flex; dis ...

htmlcssformslayout

Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version. Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistan ...

htmlcsstwitter-bootstrap

Having trouble creating a full-screen modal with NgbModal by passing content as a component?

I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this: However, when I want to ...

cssangularbootstrap-4bootstrap-modalng-bootstrap

Challenges with CSS3 Opacity Transition

I've been experimenting with CSS3 transitions on a website I'm designing, but I've encountered a small problem. Whenever I hover over an element with a CSS3 transition, the text in the previous section blurs momentarily and then returns to ...

htmlfirefoxcsscss-transitions

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...

javascriptjqueryhtmlcssnavigation

When positioning 2 divs on top of each other, rotating one by 180 degrees causes it to be considered secondary in the visibility hierarchy. What is the reason behind this?

While delving into the realm of HTML, I stumbled upon a concept that has left me perplexed. Upon stacking two divs on top of each other, I observed an interesting phenomenon where rotating the second div by 180deg (i.e transform:rotateY(180deg)), causes t ...

htmlcss

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Mastering Fluent UI Web: Adjusting the border radius of a TextField component

I am in the process of creating a custom user input control that includes a TextField, a Dropdown, and a Button. To ensure that the TextField and Dropdown appear as a cohesive unit rather than two separate elements, I attempted to use two specific styles ...

javascripthtmlcssreactjsfluentui-react

Create a unique margin using CSS only that will appear at the bottom of a flex-row container that scrolls

I'm trying to create a horizontal scroller with margins between each item and consistent margins at both ends. However, I'm noticing that the margin at the end of the container seems to be disappearing somehow. Is there a way to maintain the mar ...

htmlcssscrollflexbox

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

javascriptcssangularjstwitter-bootstrap

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

This is the code I have been working on: #move{ height:70px; width:70px; border:2px solid black; border-radius:15px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" val ...

javascriptjquerycsstransform

What is the best approach to display the combined values of two columns (last name + first name) in a C# .NET

Explanation I am looking to display the first name (column 2) and last name (column 3) of customers in the same row within a select list. Details of the SQL table for Customer { Id, first name, last name, age } Inquiry Is there a way to achieve this? ...

asp.net-core.net-corebootstrap-4

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal ...

javascriptjqueryhtmlcss

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Being new to programming, I recently completed a basic Tic Tac Toe gameboard successfully. However, as I progress to the next phase of my assignment which involves implementing an AI opponent, I encountered several challenges. As a novice in programming, ...

javascripthtmlcss

Creating personalized columns in a BootstrapVue table

I'm having an issue with the b-table component in bootstrap-vue. The array containing my items is structured like this: [{ id: 1, name: "Test", phone: 555-111-666, address: "Some Address", //etc... }] I have a couple of question ...

javascripthtmlcssvue.jsbootstrap-4

Extra space at the beginning and inside the body div containers

Could someone please enlighten me on what my poor, foolish eyes are failing to see? I am experiencing whitespace at the top of my browser window and between two div tag containers in all browsers. I have tried setting margin: 0px; for p, body, html, ever ...

htmlcsswhitespace

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

htmlcssbackground-image