sidebar shrink and produces extra padding

[g0ld3lux]

I tried making 2 sidebar
also embeded in the content a fluid container...

this is what happened

btw this is the code i have

I hope someone can help me...

avoid shrinking of sidebar when on medium and smaller devices...

also make the right sidebar float to the right without any padding..

please help thanks

<template>

<v-app id="main" class="grey lighten-1"  top-toolbar sidebar-under-toolbar>
<v-progress-linear v-bind:indeterminate="true" class="mt-0 mb-0" error></v-progress-linear>
  <v-toolbar>
  <!-- Navbar Icon -->
    <v-toolbar-side-icon id="mainSidebar" @click.native.stop="mainSidebar = !mainSidebar" />
  <!-- Title -->
  <v-toolbar-title class="hidden-sm-and-down">Toolbar</v-toolbar-title>

  <!-- Messages -->
  <v-menu  bottom origin="top right" transition="v-scale-transition" class="ml-3 mr-3"> 
    <v-btn  icon slot="activator">
        <v-icon v-badge="{ value: '2' }" class="white--text text--lighten-2 green--after">mail</v-icon>
    </v-btn>
  </v-menu>
  <!-- Search -->
  <v-menu bottom origin="top right" transition="v-scale-transition" class="ml-3 mr-3">
      <v-btn dark icon slot="activator">
        <v-icon v-badge="{ value: '1' }" class="white--text text--lighten-2 green--after">search</v-icon>
      </v-btn>

      <v-text-input @click.native.stop="mainSidebar = !mainSidebar" 
    id="search" 
    name="q" 
    label="Search" 
    v-model="search"
  ></v-text-input>

    </v-menu>
  <!-- notification menu -->
  <v-menu bottom origin="top right" transition="v-scale-transition" class="ml-3 mr-3">
      <v-btn dark icon slot="activator">
        <v-icon v-badge="{ value: '1' }" class="white--text text--lighten-2 green--after">notifications_none</v-icon>
      </v-btn>
      <v-list two-line sub-header>
    <v-list-sub-header>Settings</v-list-sub-header>
    <v-list-item>
      <v-list-tile avatar>
        <v-list-tile-action>
          <v-checkbox label="&nbsp;" id="check-e6-1" filled @click.native.stop="mainSidebar = !mainSidebar"></v-checkbox>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Notifications</v-list-tile-title>
          <v-list-tile-sub-title>Allow notifications</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>
    <v-list-item>
      <v-list-tile avatar>
        <v-list-tile-action>
          <v-checkbox label="&nbsp;" id="check-e6-2" filled @click.native.stop="mainSidebar = !mainSidebar"></v-checkbox>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Sound</v-list-tile-title>
          <v-list-tile-sub-title>Hangouts message</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>
    <v-list-item>
      <v-list-tile avatar>
        <v-list-tile-action>
          <v-checkbox label="&nbsp;" id="check-e6-3" filled @click.native.stop="mainSidebar = !mainSidebar"></v-checkbox>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Video sounds</v-list-tile-title>
          <v-list-tile-sub-title>Hangouts vidoe call</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>
    <v-list-item>
      <v-list-tile avatar>
        <v-list-tile-action>
          <v-checkbox label="&nbsp;" id="check-e6-4" filled @click.native.stop="mainSidebar = !mainSidebar"></v-checkbox>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Invites</v-list-tile-title>
          <v-list-tile-sub-title>Notify when receiving invites</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list-item>
  </v-list>
    </v-menu>
    
    <v-btn icon @click.native.stop="secondarySidebar = !secondarySidebar" class="ml-3 mr-3">
        <v-icon v-badge="{ value: '1' }" class="white--text text--lighten-2 green--after">comment</v-icon>
      </v-btn>

  </v-toolbar>
  

  <main>
    <v-sidebar v-show="mainSidebar" height="auto" width="auto" :mobile="mobile = true">
      <v-list dense>
        <template v-for="item in itemGroup">
          <v-list-group v-if="item.items">
            <v-list-item slot="item">
              <v-list-tile ripple>
                <v-list-tile-title v-text="item.title" />
                <v-list-tile-action>
                  <v-icon>keyboard_arrow_down</v-icon>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-item>
            <v-list-item v-for="subItem in item.items">
              <v-list-tile ripple>
                <v-list-tile-title v-text="subItem.title" />    
              </v-list-tile>
            </v-list-item>
          </v-list-group>
          <v-list-sub-header v-else-if="item.header" v-text="item.header" />
          <v-divider v-else-if="item.divider" light />
          <v-list-item v-else>
            <v-list-tile ripple>
              <v-list-tile-title v-text="item.title" />    
            </v-list-tile>
          </v-list-item>
        </template>
      </v-list>
    </v-sidebar>

    <v-sidebar v-show="secondarySidebar" height="auto" class="sidebar--right">
      <v-list dense>

        <template v-for="item in itemGroup">
          <v-list-group v-if="item.items">
            <v-list-item slot="item">
              <v-list-tile ripple>
              
                <v-list-tile-title v-text="item.title" />
                <v-list-tile-action>
                  <v-icon>keyboard_arrow_down</v-icon>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-item>
            <v-list-item v-for="subItem in item.items">
              <v-list-tile ripple>
                <v-list-tile-title v-text="subItem.title" />    
              </v-list-tile>
            </v-list-item>
          </v-list-group>
          <v-list-sub-header v-else-if="item.header" v-text="item.header" />
          <v-divider v-else-if="item.divider" light />
          <v-list-item v-else>
            <v-list-tile ripple>
              <v-list-tile-title v-text="item.title" />    
            </v-list-tile>
          </v-list-item>
        </template>
      </v-list>
    </v-sidebar>


    <v-content>
      <v-container fluid><v-row>
    <v-col xs12="xs12">
      <v-card class="primary">
        <v-card-text>12</v-card-text>
      </v-card>
    </v-col>
    <v-col xs6="xs6" v-for="i in 2">
      <v-card class="secondary">
        <v-card-text>6</v-card-text>
      </v-card>
    </v-col>
    <v-col xs4="xs4" v-for="i in 3">
      <v-card class="primary">
        <v-card-text>4</v-card-text>
      </v-card>
    </v-col>
    <v-col xs3="xs3" v-for="i in 4">
      <v-card class="secondary">
        <v-card-text>3</v-card-text>
      </v-card>
    </v-col>
    <v-col xs2="xs2" v-for="i in 6">
      <v-card class="primary">
        <v-card-text>2</v-card-text>
      </v-card>
    </v-col>
    <v-col xs1="xs1" v-for="i in 12">
      <v-card class="secondary">
        <v-card-text>1</v-card-text>
      </v-card>
    </v-col>
  </v-row></v-container>
    </v-content>


  </main>

  <v-footer>
  <div class="text-xs-right">© 2016</div>
  </v-footer>

</v-app>
</template>

<script>
import { titlecase } from '../filters/titlecase'
    export default {
        data() {
            return {
                mainSidebar: false,
                secondarySidebar: false,
                left: true,
                right: true,
                toolbar: true,
                search: '',
                itemGroup: [
      { header: 'Header' },
      {
        title: 'Parent',
        group: '/company',
        items: [
          { title: 'Child' },
          { title: 'Child' },
          { title: 'Child' }
        ]
      },
      { title: 'Link' },
      { title: 'Link' },
      { divider: true },
      { header: 'Another Header' },
      { title: 'Link' }
    ]
            }
        },
        props: ['message', 'title'],
        mounted() {
            console.log('Component mounted.')
        },
        filters: {
        titlecase
        }

    }
</script>

<style>
.menu__content {
    top: 65px !important;
}
#search {

    display:block !important;
    width: 1600px !important;

}
</style>

[johnleider]

Please create a codepen or repository that we can clone.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord