Appearance

Left Menu Styles ​

File Information ​

  • Path: assets/css/leftmenu.css
  • Purpose: Left sidebar navigation and menu styles
  • Size: ~6.5 KB

Overview ​

The Left Menu CSS file provides comprehensive styles for the left sidebar navigation, including menu items, logo, toggle button, collapsed state, and responsive behavior.

Key Features ​

  1. Sidebar Container

    • Fixed width
    • Full height
    • Shadow effect
    • Z-index layering

  2. Menu Items

    • Link styling
    • Active states
    • Hover effects
    • Icon alignment

  3. Collapsed State

    • Mini sidebar
    • Hidden text
    • Icon-only display
    • Toggle button

CSS Classes ​

Main sidebar container:

css
.leftSidebar {
  height: 100svh !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 240px !important;
  box-shadow: 0px 4px 4px 0px var(--boxshadow10);
  -webkit-box-shadow: 0px 4px 4px 0px var(--boxshadow10);
  z-index: 8 !important;
}

Properties:

  • Full viewport height
  • Fixed width (240px)
  • Box shadow
  • High z-index

.leftSidebarMini ​

Collapsed sidebar:

css
.leftSidebarMini {
  width: 84px !important;
}

.leftSidebarMini .leftSidebarMenuLink .v-list-item__content {
  opacity: 0;
}

.leftSidebarMini .btn-primary {
  min-width: auto !important;
}

.leftSidebarMini .btn-primary .v-btn__content span {
  opacity: 0;
  visibility: hidden;
  width: 0px;
  margin-left: 0px;
}

.leftSidebarMini .btn-primary .v-btn__content svg {
  margin-left: 0px !important;
}

Properties:

  • Narrow width (84px)
  • Hidden text content
  • Icon-only buttons
  • Opacity transitions

Logo container:

css
.leftSidebar .logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
}

.leftSidebar .logo-container,
.leftSidebarLink .addBtn,
.leftmenu-bottom-link,
.leftmenu-bottom-logo {
  padding-left: 20px;
  padding-right: 20px;
}

.leftSidebarMini .logo-container {
  padding-left: 24px !important;
}

Properties:

  • Flex layout
  • Fixed height
  • Horizontal padding
  • Adjusted padding when mini

Toggle button:

css
.leftSidebar .toggle-btn,
.leftSidebar .toggle-btn:hover,
.leftSidebar .toggle-btn:focus {
  outline: none;
}

.leftSidebarMini .logo-container .toggle-btn {
  position: absolute;
}

.leftSidebarMini .logo-container:not(:hover) .toggle-btn {
  opacity: 0;
  visibility: hidden;
}

.leftSidebarMini .toggle-btn svg {
  transform: rotate(180deg);
}

Properties:

  • No outline
  • Absolute positioning when mini
  • Hidden when not hovering
  • Rotated icon

Menu links container:

css
.leftSidebarLink {
  padding: 40px 0px 0px;
}

.leftSidebarLink .addBtn {
  margin-bottom: 0px !important;
  height: 44px;
}

.leftSidebarLink .addBtn .btn-primary {
  width: 100%;
}

.leftSidebarLink .addBtn .v-list-item__icon {
  width: 100%;
  height: auto !important;
  margin: 0px !important;
}

Properties:

  • Top padding
  • Full-width button
  • Icon sizing

Menu link items:

css
.leftSidebarMenuLink {
  font-size: var(--fontsize14);
  font-weight: 500;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px !important;
  height: 36px;
  min-height: 36px;
  padding: 0px 10px !important;
  text-decoration: none;
  border-radius: 36px;
}

.leftSidebarMenuLink .v-list-item__content {
  position: relative !important;
  height: auto;
  width: auto;
  white-space: nowrap;
  overflow: visible;
}

Properties:

  • Standard font size
  • Rounded corners
  • Fixed height
  • Horizontal margins

Divider:

css
.leftSidebar .dashboard-divider {
  margin: 24px 0px;
  border-color: var(--DBgrayLight2);
}

Properties:

  • Vertical spacing
  • Light border color

Bottom logo:

css
.leftmenu-bottom-logo {
  margin-top: 32px;
  overflow: hidden;
  display: flex;
}

.leftmenu-bottom-logo svg {
  width: 100%;
  height: auto;
  transition: 0.3s linear all;
}

.leftmenu-bottom-logo svg .path1 {
  transition: 0.3s linear all;
}

.leftSidebarMini .leftmenu-bottom-logo svg {
  margin-left: -40px;
  width: 84px;
}

.leftSidebarMini .leftmenu-bottom-logo svg .path1 {
  opacity: 0;
}

Properties:

  • Full-width SVG
  • Smooth transitions
  • Adjusted position when mini
  • Hidden path when collapsed

Responsive Design ​

Tablet and Small Desktop ​

css
@media only screen and (max-height: 899.98px), screen and (max-width: 960.98px) {
  .leftSidebar:not(.leftSidebarMini) {
    width: 200px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  .leftSidebarMini {
    width: 64px !important;
  }
  
  .leftSidebarLink {
    padding-top: 24px !important;
  }
  
  .leftSidebar .logo-container {
    padding-left: 18px;
    padding-right: 10px;
  }
  
  .leftSidebarLink .addBtn,
  .leftSidebarLink .addBtn .btn-primary {
    min-height: 38px !important;
    height: 38px !important;
  }
  
  .leftSidebarLink .addBtn,
  .leftSidebarMini .logo-container,
  .leftmenu-bottom-link,
  .leftmenu-bottom-logo {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .leftSidebarMini .logo-container {
    padding-left: 14px !important;
  }
  
  .leftSidebarMenuLink {
    margin-left: 10px !important;
    margin-right: 10px !important;
    height: 32px !important;
    min-height: 32px !important;
    font-size: var(--fontsize12) !important;
  }
}

Properties:

  • Reduced width (200px)
  • Smaller mini width (64px)
  • Reduced padding
  • Smaller font sizes
  • Adjusted heights

Mobile ​

css
@media only screen and (min-width: 600px) {
  .leftSidebar .logo-container .toggle-btn .menuButton {
    display: none;
  }
}

Properties:

  • Hides mobile menu button on desktop

Usage Examples ​

html
<div class="leftSidebar">
  <div class="logo-container">
    <img src="logo.svg" alt="Logo">
    <button class="toggle-btn" @click="toggleSidebar">
      <svg><!-- Toggle icon --></svg>
    </button>
  </div>
  
  <div class="leftSidebarLink">
    <div class="addBtn">
      <v-btn class="btn-primary">
        <span>Add New</span>
        <svg><!-- Plus icon --></svg>
      </v-btn>
    </div>
    
    <v-divider class="dashboard-divider"></v-divider>
    
    <v-list-item class="leftSidebarMenuLink" to="/dashboard">
      <v-list-item-icon>
        <svg><!-- Icon --></svg>
      </v-list-item-icon>
      <v-list-item-content>Dashboard</v-list-item-content>
    </v-list-item>
  </div>
  
  <div class="leftmenu-bottom-logo">
    <svg><!-- Bottom logo --></svg>
  </div>
</div>

Integration Points ​

  • Layout Component: Main application layout
  • Navigation Component: Menu items
  • Logo Component: Brand logo
  • Toggle Component: Sidebar toggle

Notes for Development ​

  • Uses CSS variables for theming
  • Responsive breakpoints included
  • Smooth transitions
  • Collapsed state support
  • Mobile-friendly