Ways to conceal just a portion of the bootstrap sidebar?

I'm looking to create a sidebar using 'vue-bootstrap' that can be hidden when clicked, but I only want to hide 80% of the width of the sidebar. How can I achieve this effect of partially hiding the sidebar?

<b-button v-b-toggle.sidebar-1 class="toogle-sidebar">
        <span>Toggle sidebar</span>
</b-button>


<b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      :backdrop-variant="variant"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <b-form-group label="Backdrop variant" label-for="backdrop-variant">
          <b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
        </b-form-group>
      </div>
    </b-sidebar>

I'm aiming to achieve a design similar to the Gitlab sidebar, where clicking 'hide sidebar' would display only the icons of the menu. Can someone guide me on how to implement this?

Thank you in advance for any assistance!

javascripthtmlcssvue.jsbootstrap-4

Answer №1

Opt for using the v-model instead of the directive and apply a class to it: then leverage CSS animation to override default CSS values:

new Vue({
  el: "#app",
  data() {
    return {
      sidebar: false,
    }
  },
  methods: {
    toggleSidebar() {
      this.sidebar = !this.sidebar
    }
  }
})
.b-sidebar-outer.closed #sidebar-backdrop {
  display: block !important;
  transform: translateX(-270px);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
  animation-direction: reverse;
}

.b-sidebar-outer:not( .closed) #sidebar-backdrop {
  transform: translateX(0);
  animation-name: sidebarAnim;
  animation-duration: 0.4s;
}

@keyframes sidebarAnim {
  0% {
    transform: translateX(-270px);
    animation-timing-function: ease-in-out
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-in-out
  }
}
<!-- Add this to <head> -->

<!-- Load necessary Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <b-button @click="toggleSidebar">TOGGLE SIDEBAR</b-button>
      </b-col>
      <b-sidebar id="sidebar-backdrop" v-model="sidebar" title="Sidebar with backdrop" backdrop-variant :class="{ closed: !sidebar }" backdrop shadow>
        asdfsadf
      </b-sidebar>
    </b-row>
  </b-container>
</div>

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

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly ...

javascriptjqueryhtmlcssweb

Retrieving server information using AJAX in React

I've been attempting to utilize an AJAX call in order to fetch server data for my React Components. However, I'm encountering difficulties when it comes to displaying it with React as I keep receiving this error: Uncaught TypeError: Cannot read ...

javascriptjqueryajaxnode.jsreactjs

How can I efficiently retrieve the name variable of a Quasar (or Vue 3) application?

Is there a way to incorporate something similar in Quasar without having to redefine the variable in every component? <template> <div>Enjoy your time at {{ APP_NAME }}.</div> </template> During the setup of my app with Quasar C ...

javascriptvue.jsvuejs3quasar-framework

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

javascripthtmlangularjscheckbox

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

javascriptcssreactjs

The left column is stationary vertically, but can be scrolled horizontally

On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...

htmlcsslayoutcss-position

Can you provide me with the URL for the jQuery post function?

Could someone please clarify which URL I should use in the $.post call to the server for a node.js file? Most tutorials demonstrate with PHP files, but I'm unsure about calling node.js files. Should I post it to the app.js file or the route file? Thi ...

javascriptjquerynode.jsexpresspug

In what way is the reference to "this" passed in the function that follows?

I came across the following example in the JS manual, which is functioning correctly: let worker = { someMethod() { return 1; }, slow(x) { alert("Called with " + x); return x * this.someMethod(); // (*) } }; function cachingDecorator ...

javascriptdecorator

What is preventing me from using JavaScript to generate labels?

My current project involves creating dynamic input fields to filter products by color. I initially attempted static checkbox inputs for this purpose, which worked fine. Now, I want to achieve the same functionality but dynamically through JavaScript. Inste ...

javascripthtmljquerycss

Center the font in the middle of the text field

I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...

htmlcssforms

AngularJS is experiencing issues with the sorting filter 'orderBy'

I am experiencing an issue with sorting a table list that has three columns. I have implemented the ability to sort all columns in ascending and descending order. However, when I click on the -Tag to initiate the sorting process, I encounter the following ...

javascriptangularjsangularjs-filter

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

cssreactjsmaterial-ui

What is the best way to display multiple HTML files using React?

Looking to develop a web application using React that consists of multiple HTML pages. For instance, login.html and index.html have been created and linked to URIs through the backend - resulting in localhost:8080/login and localhost:8080/index. However, R ...

htmltypescriptreact-nativejsxtsx

Storing video blobs in the filesystem using Electron and Node.js

My electron application allows users to record video from their webcam using the MediaRecorder API. After hitting the "stop record" button, I am able to obtain a blob of the recorded video. I am trying to figure out how to convert this blob into a real w ...

javascriptnode.jsvideoelectron

The scaling transformation is not accurate for uneven pixel widths

I'm attempting to resize a div while keeping the inner element in the same position and at the same size. To achieve this, I am using transform: scale(value) on the wrapper and transform: scale(1/value) on the inside div. The issue arises when the in ...

htmlcsscss-transformsscaletransform

"Utilizing Vuex for a detailed and structured approach to organization

Currently, I am tackling a rather extensive project and my aim is to divide Vuex modules into as many segments as feasible. Specifically, I intend to segregate the API functionality from the UI, maintaining a clear distinction between server-sourced data a ...

javascriptarchitecturevue.jsvuex

JQuery Ajax: Issue with updating Total Likes for posts when Like button is clicked

There are two JQuery Ajax calls in this scenario. The first call retrieves user messages from MySQL, along with the number of likes for each message and a button for users to like the message. This initial request is functioning correctly. The second Ajax ...

jqueryhtmljsonajax

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

javascriptcssangularjsng-animate

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

javascripthtmlcssreactjs

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

htmlcarouselbootstrap-5