Add sidebar CSS styles #29

New Issue

lmiranda · 2026-01-15T06:51:02Z

lmiranda commented

2026-01-15 06:51:02 +00:00

Description

Create CSS styles for the floating sidebar component, including positioning, theme-aware colors, and page content offset.

Files to Create

portfolio_app/assets/sidebar.css

CSS Requirements

1. Sidebar Positioning (`.floating-sidebar`)

.floating-sidebar {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 60px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

2. Page Content Offset (`.page-content-wrapper`)

.page-content-wrapper {
  margin-left: 92px;  /* 60px sidebar + 16px gap + 16px padding */
}

@media (max-width: 768px) {
  .page-content-wrapper {
    margin-left: 0;
  }
  .floating-sidebar {
    display: none;  /* Hide on mobile, or convert to bottom bar */
  }
}

3. Brand Styling (`.sidebar-brand`)

.sidebar-brand {
  font-weight: 700;
  font-size: 18px;
  padding: 8px 0;
}

4. Active State (`.nav-icon-active`)

.nav-icon-active {
  background-color: var(--mantine-color-blue-filled);
  border-radius: 50%;
}

5. Theme-Aware Colors

/* Dark theme (default) */
[data-mantine-color-scheme="dark"] .floating-sidebar {
  background-color: #141414;
  border: 1px solid #2a2a2a;
}

/* Light theme */
[data-mantine-color-scheme="light"] .floating-sidebar {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
}

6. Divider Styling (`.sidebar-divider`)

.sidebar-divider {
  width: 100%;
  opacity: 0.3;
}

Acceptance Criteria

Sidebar is fixed on left side, vertically centered
Page content does not overlap with sidebar
Colors adapt to dark/light theme
Mobile breakpoint hides sidebar (or shows alternative)
Active page indicator visible
CSS loads automatically from assets/ directory

Part of Sprint 7 (#27)

Depends On

#28 (sidebar component must exist to style)

## Description Create CSS styles for the floating sidebar component, including positioning, theme-aware colors, and page content offset. ## Files to Create - `portfolio_app/assets/sidebar.css` ## CSS Requirements ### 1. Sidebar Positioning (`.floating-sidebar`) ```css .floating-sidebar { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 1000; width: 60px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; } ``` ### 2. Page Content Offset (`.page-content-wrapper`) ```css .page-content-wrapper { margin-left: 92px; /* 60px sidebar + 16px gap + 16px padding */ } @media (max-width: 768px) { .page-content-wrapper { margin-left: 0; } .floating-sidebar { display: none; /* Hide on mobile, or convert to bottom bar */ } } ``` ### 3. Brand Styling (`.sidebar-brand`) ```css .sidebar-brand { font-weight: 700; font-size: 18px; padding: 8px 0; } ``` ### 4. Active State (`.nav-icon-active`) ```css .nav-icon-active { background-color: var(--mantine-color-blue-filled); border-radius: 50%; } ``` ### 5. Theme-Aware Colors ```css /* Dark theme (default) */ [data-mantine-color-scheme="dark"] .floating-sidebar { background-color: #141414; border: 1px solid #2a2a2a; } /* Light theme */ [data-mantine-color-scheme="light"] .floating-sidebar { background-color: #f0f0f0; border: 1px solid #e0e0e0; } ``` ### 6. Divider Styling (`.sidebar-divider`) ```css .sidebar-divider { width: 100%; opacity: 0.3; } ``` ## Acceptance Criteria - [ ] Sidebar is fixed on left side, vertically centered - [ ] Page content does not overlap with sidebar - [ ] Colors adapt to dark/light theme - [ ] Mobile breakpoint hides sidebar (or shows alternative) - [ ] Active page indicator visible - [ ] CSS loads automatically from assets/ directory ## Part of Sprint 7 (#27) ## Depends On - #28 (sidebar component must exist to style)

lmiranda referenced this issue

2026-01-15 06:51:44 +00:00

Restructure app layout for sidebar and theme integration #31

lmiranda referenced this issue

2026-01-15 06:52:05 +00:00

Sprint 7: Navigation & Theme Modernization #27

lmiranda closed this issue

2026-01-15 19:16:01 +00:00

lmiranda added this to the Launch: Host, Bio and Toronto House Market Analysis project 2026-01-16 14:51:54 +00:00

lmiranda self-assigned this 2026-01-16 14:51:59 +00:00

lmiranda moved this to Done in Launch: Host, Bio and Toronto House Market Analysis on 2026-01-16 14:52:12 +00:00

Sign in to join this conversation.