How do I design a side navigation panel with a left border similar to the one shown in the image?

Looking to implement a side navigation with active class in Vue3 while also adding a border-left style similar to the image provided.

https://i.sstatic.net/Q4dN3.png

The current setup looks like this: https://i.sstatic.net/PupIX.png

Here's an excerpt from SideBar.vue:

<div class="flex flex-col space-y-9 mt-4 -mx-6 ">
    <RouterLink v-for="(mu, idx) in menu" :key="idx" class="flex  text-[#A09F9F] cursor-pointer "
        :to="mu.route">
        <img :src="mu.icon" class="w-6 h-6 mr-2 ml-3" />
        <span class="text-center text-lg">{{ mu.text }} </span>
    </RouterLink>
</div>

For router.js:

https://i.sstatic.net/t6ef5.png

Implementing the .active class:

.active {
    color: #3C59A8 !important;
    font-weight: bold;
    background: linear-gradient(90deg, #E8E9EA 0%, #FAFAFA 100%);
    transition: .2s;
    border-left: #3C59A8 4px solid;
}

Struggling to achieve the rounded border on the left side as shown in the initial image. Any suggestions would be appreciated!

Thank you.

Tried using border-left and ::before without success.

cssvue.jsvuejs3tailwind-cssvue-router4

Answer №1

In order to utilize border-right CSS properties, I would create a new div positioned on the left-hand side of the active link.

Check out the code on codesandbox

Although not an identical setup to yours, hopefully, the concept still holds true.

  <div class="flex flex-col space-y-9 mt-4">
    <div
      v-for="(mu, idx) in menu"
      :key="idx"
      class="link cursor-pointer relative"
      :to="mu.route"
      @click="changeActive(idx)"
    >
      <div v-if="mu.active" class="active"></div>
      <span class="text-center text-lg ml-5">{{ mu.text }} </span>
    </div>
  </div>

.link {
  height: 60px;
  display: flex;
  align-items: center;
}
.active {
  color: #3c59a8 !important;
  font-weight: bold;
  background: linear-gradient(90deg, #e8e9ea 0%, #fafafa 100%);
  height: 100%;
  border-right: #3c59a8 8px solid;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 15px 30px;
  position: absolute;
}

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

javascript method to apply styling

I'm puzzled by how these two javascript/css codes can yield different results: 1st: prev.setAttribute('style', 'position:absolute;left:-70px;opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;&apos ...

javascriptcsssetattribute

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Scrolling causes the image to blink

I have a specific task to create an effect where an image blinks three times on scrolling (like lights turning on and off consecutively with a 1-second delay), and then stays on until the user scrolls beyond 3600px. To achieve this, I have added an event ...

javascriptvue.js

Creating a Triangular Button with Icon Design with Bootstrap 4

I'm attempting to design a CSS triangular button that is positioned in the top left corner of a div using Bootstrap 4. Here's my concept as crafted with Photoshop: https://i.sstatic.net/cbUWL.png However, after numerous attempts, this is the c ...

htmlcsstwitter-bootstrapbootstrap-4

The process of toggling a div to slide up and down explained

I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons. JavaScript: $(function () { // DOM ready shorthand var $content = $(".sliderText"); var $contentdiv = $(".sliderCo ...

jqueryhtmlcss

Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

csssassag-grid

What can you do to ensure Vue detects input element changes after using preventDefault?

In this example, I am trying to prevent a newline from being created in a textarea when the Enter key is pressed. To achieve this, I use the preventDefault method in my event handler and update the value inside the textarea. However, I encounter an issue w ...

javascriptvue.js

Optimize your Vue.js application by applying :style to the v-for loop just once

I am currently working on constructing a heatmap table using Vue.js. Instead of relying on jQuery, I have been following a tutorial tailored for jquery which can be found here. Everything seems to be functioning properly, but I am running into issues in ...

vue.jsvuejs2vue-component

Adjust the height of a div using jQuery animate based on the amount of text within

I have created a basic animation feature where users can click on an expanding box. I am looking for a solution that does not involve using a plugin. Currently, the code looks like this: $('#one').css("height", "22"); $('#t1').cli ...

javascriptjqueryhtmlcss

Nuxt.js: Streamlining multiple websites/domains within a single project

Imagine a scenario where we have three distinct websites named website A, website B, and website C. Each of these websites will reside on their own domain, namely mypage-a.com, mypage-b.com, mypage-c.com. The framework that is being utilized here is nuxt.j ...

vue.jsnuxt.js

Exploring the Possibilities: Combining Django Rest Framework with Vue on Heroku

A project has been developed with Django (specifically DRF API) and Vue js with the following structure: root_directory/ ├── project_name/ │ ├── settings.py │ ├── ... ├── front_end/ │ ├── ... vue files generated w ...

djangoherokuvue.jsvuejs2web-deployment

Chrome may clip the gradient radius when setting the focal point outside of the SVG gradient

I just joined this community and I might have some questions that could be considered too basic. Recently, I've been trying to understand SVG and came across something that left me puzzled. Take a look at this: <svg xmlns="http://www.w3.org/20 ...

csssvg

Use jQuery to place tags around the content of existing <li> elements

Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added). var item = $('<li>' ...

javascriptjqueryhtmlcss

Changing content of inline editable data table in Vuetify through a method

I am facing a challenge while attempting to update the value in my inline edit data table from a method. The issue lies in the fact that the item I pass is not getting updated. In my cancel method, I pass props.item to be updated. While props.item.iron pr ...

javascriptvue.jsvuetify.js

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

The CSS hamburger icon displayed in the browser features three bars of varying heights

Looking to create a hamburger icon menu using only CSS? Check out my implementation below which includes three span tags in the HTML document. .sidebar-toggle { display: inline-block; } .sidebar-toggle span { display: block; width: 1.5rem; heig ...

htmlcss

Creating SVG paths using coordinates for THREE.js

I copied the exact code from this ThreeJs Example designed for generating a three-dimensional City Model. I've created an SVG path outlining city boundaries using Google Maps and now I'm trying to use the above code to create a similar 3D object ...

javascriptcsssvgthree.js

What are the best scenarios for using %, em, or ex units in CSS font styles?

I'm trying to figure out in what situations I should use %, em, and ex as font units of measurement in CSS. Can someone provide some clarity on this for me? I'm feeling a bit confused. ...

css

What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards. I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, i ...

htmlcssdrop-down-menubootstrap-4