I'm looking to replicate this navigation layout using Vuetify's 'navigation drawer' component. How can I go about doing this?

I'm currently utilizing Vuetify and implementing the Navigation Drawer component.

I am attempting to replicate a similar navigation layout found here.

The fixed menu on the left should maintain its width even when resizing the browser window.

Upon reaching the designated breakpoint (where the width remains unchanged), the menu should disappear and be replaced by an icon button that can reopen the menu when hovered over.

This is precisely what I am aiming to achieve, but despite numerous attempts, I have been unsuccessful in getting it to work.

Could anyone provide assistance?

Below is my code snippet :

<v-navigation-drawer v-model="drawer" class="nav-container d-flex">
        <div class="options">
            <li></li> //items..
        </div>
      </v-navigation-drawer>
    
      <div style="min-width: 100px; max-width: 100%;" class="d-flex flex-column flex-grow-1 flex-shrink-0">
            //content
      </div>

Is there a way to achieve this functionality using Vuetify exclusively?

cssangularjsvue.jsvuetify.js

Answer №1

I believe the issue lies within the CSS code.

<div class="container">
 <div class="left-side">
  <ul>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
   <li>Black</li>
  </ul>
 </div>
</div>

CSS style

.container {
    display: flex;
    position: static;
    transform: translate3d(0,0,0);
    width: 272px;
    min-width: 272px;
    max-width: 272px;
}
.container > * {
    min-width: 218px;
}

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

Why is Vue Router Navigation Guard throwing an error about exceeding the maximum call stack size?

Encountering a recurring issue of maximum stack size exceeded while implementing the following code for vue router navigation guards per-route: import state from "../vuex-store/state.js"; import Editor from "../views/Editor"; const routes = [ { ...

javascriptvue.jsvue-router

Updating a Vue ref does not result in the component reflecting the changes made

My Vue3 form has three text inputs and a group of checkboxes. To implement this, I am using the bootstrap-vue form along with its checkbox-group component. After calling an API to fetch default values for the form, I update the ref as shown below. Interes ...

javascriptvue.jsvuejs3bootstrap-vue

What is the best way to designate a selected list item in AngularJS?

I need to update the underlying model when a list item is clicked. The goal is to set the controller's $scope.current to match the index of the clicked list item. Because the list items are not standard form inputs, I am unable to use ng-model for thi ...

angularjsclicklistitemangular-ngmodel

AngularJS $animation addClass only gets triggered the first time it is called

Within my directive link function, I have a simple function that calls: $animate.addClass(element, 'wrong') followed by an animation using the class .wrong m.animation ".wrong", ["$timeout",($timeout)-> removeClass: (element, className)-& ...

angularjsanimationaddclass

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

javascriptjqueryhtmlcss

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

jqueryhtmlcsscss-transitionsloader

Changing the background color to white causes the progress bar line to become indiscernible

Here's how my form appears: https://i.sstatic.net/jXCxm.jpg Once I set the container to be: <div class="container" style="background:white;"> https://i.sstatic.net/DZjAK.png I want to make it white and ensure that the prog ...

htmlcsstwitter-bootstrap

I only notice certain text after carefully inspecting the elements in Google Chrome

While creating an application on Sitefinity (ASP.NET), I encountered an issue where certain elements, such as button text and labels, were not loading correctly when running the application. However, upon inspecting the element, they appeared to be working ...

c#javascriptasp.netcsssitefinity

How can service properties be updated in AngularJS without moving the logic outside of the controller?

Here is an example of what a standard service might look like: (function() { angular.module('module').service('SomeService', SomeService); SomeService.$inject = ['$http']; function SomeService($http) { v ...

angularjs

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

javascripthtmlangularjs

Vue.js - computed property not rendering in repeated list

It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values ...

javascriptvue.jsvuejs2vue-componentv-for

Using blending modes with gradient colors in an SVG design

I'm struggling to get my logo to change colors upon scrolling into a button with similar gradient colors, but I just can't seem to make it work. Can anyone lend me a hand? Thank you! Take a look at my Logo. I've attempted to add some styles ...

javascripthtmlcssreactjssass

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

Currently, I am facing a challenge with my project as the dropdowns on the menu are not functioning properly. Despite having all the necessary files included, it seems like there might be an issue within my code. You can view the page here: (please try t ...

htmlcsstwitter-bootstrap

Create a single line of content for a carousel display

Seeking a solution where I can have a container that slides sideways without stacking in rows, I have exhaustively searched for answers using different keywords like single row, inline, flexbox, and grid but to no avail. Any assistance will be highly appre ...

javascriptcssinline

Tips for keeping a login session active on multiple tabs

As I am in the process of developing a website, one issue I am facing is determining the most effective method to maintain user login sessions. Currently, I am utilizing Html5 web storage known as "session storage" to keep track of whether a user is logged ...

javascriptjqueryangularjssession

Flexbox sets aside space for resized svg images

I am currently working on my site header and I want to implement flexbox for this purpose. I tried using justify-content: space-between; to evenly distribute the empty space between the divs. However, when I add an SVG image and scale it down to fit the ...

htmlcsssvgflexbox

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

Error in setting cookies using Javascript document.cookie on iOS with cordova-plugin-ionic-webview

Backend-sent cookies are successfully stored, but the app itself cannot set cookies. When running the code snippet below: document.cookie = "notified=1; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"; console.log(document.cookie); An empty strin ...

javascriptangularjscordovacookiescordova-plugin-ionic-webview

Omitting authentication request in Laravel Echo server CLI on the server

Everything runs smoothly on my local machine, but for some reason it's not working on the server. Image from my local environment Image from the server I am using Laravel 5.8 and Vue.js. The domain is HTTPS encrypted. ...

laravelvue.jssocket.iolaravel-echo

I'm having trouble getting this angular expression to cooperate in Plunker. Can anyone shed some light on why {{ 843 / 42

I'm currently diving into Angular with the help of Plural Sight. The initial lesson dives into utilizing the ng-app directive. For those interested, here's a direct link to the Plunker editor: http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview ...

javascriptangularjs