Appearance

Sidebar Styles ​

File Information ​

  • Path: app/assets/scss/layout/_sidebar.scss
  • Purpose: Styles for the left sidebar navigation
  • Type: Layout component

Overview ​

The sidebar file contains styles for the left navigation sidebar, including menu items, toggle functionality, and responsive behavior.

Key Components ​

Main sidebar container:

  • Padding: 24px top/bottom
  • Border: Transparent
  • Width: 300px
  • Background: Menu background color (#F9F5EE)
  • Box shadow: Subtle shadow
  • Transition: Smooth transitions

Toggle Menu (.toggleMenu) ​

  • Position: Absolute, right: -14px, top: 30px
  • Size: 28px × 28px
  • Z-index: 3
  • Box shadow: Medium shadow
  • Initially hidden (opacity: 0)
  • Visible on sidebar hover
  • SVG: Rotated 90deg
  • Padding: 24px bottom
  • Margin: 24px left, 20px right
  • Transition: Smooth
  • Non-main menu: Top padding 24px, box shadow top border
  • Hover: Gray-250 background (if not active)
  • Prepend: 24px height, 24px min-width
  • Main menu: 40px min-height, 20px border radius
  • Title: 16px font, semibold weight
  • Menu items: 40px min-height
  • Border radius: 40px
  • Icons: 24px max size
  • Title: 16px font, semibold

Responsive Design ​

Desktop (min-width: 1280px) ​

Mini Sidebar (.leftSidebarMini) ​

  • Width: 92px
  • Toggle menu: SVG rotated -90deg
  • Menu margin: 20px left, 16px right
  • Menu item titles: Hidden (font-size: 0, opacity: 0)

Tablet (max-width: 1280.98px) ​

  • Toggle menu mobile: Positioned left 24px, top: -50px
  • Size: 36px × 36px
  • Mini sidebar: Left: -300px (hidden)
  • Toggle menu mobile: Left: 324px when sidebar hidden

Mobile (max-width: 960.98px) ​

  • Toggle menu mobile: Left: 16px
  • Mini sidebar toggle: Left: 316px

States ​

Hover State ​

  • Toggle menu: Visible (opacity: 1)

Mini State ​

  • Sidebar width: 92px
  • Menu items: Gap 0px
  • Titles: Hidden