feat: Add floating sidebar navigation and dark theme support

- Add floating pill-shaped sidebar with navigation icons
- Implement dark/light theme toggle with localStorage persistence
- Update all figure factories for transparent backgrounds
- Use carto-darkmatter map style for choropleths
- Add methodology link button to Toronto dashboard header
- Add back to dashboard button on methodology page
- Remove social links from home page (now in sidebar)
- Update CLAUDE.md to Sprint 7

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

portfolio_app/assets/sidebar.css

@@ -0,0 +1,139 @@
+/* Floating sidebar navigation styles */
+
+/* Sidebar container */
+.floating-sidebar {
+    position: fixed;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 60px;
+    padding: 16px 8px;
+    border-radius: 32px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: background-color 0.2s ease;
+}
+
+/* Page content offset to prevent sidebar overlap */
+.page-content-wrapper {
+    margin-left: 92px; /* sidebar width (60px) + left margin (16px) + gap (16px) */
+    min-height: 100vh;
+}
+
+/* Dark theme (default) */
+[data-mantine-color-scheme="dark"] .floating-sidebar {
+    background-color: #141414;
+}
+
+[data-mantine-color-scheme="dark"] body {
+    background-color: #000000;
+}
+
+/* Light theme */
+[data-mantine-color-scheme="light"] .floating-sidebar {
+    background-color: #f0f0f0;
+}
+
+[data-mantine-color-scheme="light"] body {
+    background-color: #ffffff;
+}
+
+/* Brand initials styling */
+.sidebar-brand {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--mantine-color-blue-filled);
+    margin-bottom: 4px;
+    transition: transform 0.2s ease;
+}
+
+.sidebar-brand:hover {
+    transform: scale(1.05);
+}
+
+.sidebar-brand-link {
+    font-weight: 700;
+    font-size: 16px;
+    color: white;
+    text-decoration: none;
+    line-height: 1;
+}
+
+/* Divider between sections */
+.sidebar-divider {
+    width: 32px;
+    height: 1px;
+    background-color: var(--mantine-color-dimmed);
+    margin: 4px 0;
+    opacity: 0.3;
+}
+
+/* Active nav icon indicator */
+.nav-icon-active {
+    background-color: var(--mantine-color-blue-filled) !important;
+}
+
+/* Navigation icon hover effects */
+.floating-sidebar .mantine-ActionIcon-root {
+    transition: transform 0.15s ease, background-color 0.15s ease;
+}
+
+.floating-sidebar .mantine-ActionIcon-root:hover {
+    transform: scale(1.1);
+}
+
+/* Ensure links don't have underlines */
+.floating-sidebar a {
+    text-decoration: none;
+}
+
+/* Theme toggle specific styling */
+#theme-toggle {
+    transition: transform 0.3s ease;
+}
+
+#theme-toggle:hover {
+    transform: rotate(15deg) scale(1.1);
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .floating-sidebar {
+        left: 8px;
+        width: 50px;
+        padding: 12px 6px;
+        border-radius: 25px;
+    }
+
+    .page-content-wrapper {
+        margin-left: 70px;
+    }
+
+    .sidebar-brand {
+        width: 34px;
+        height: 34px;
+    }
+
+    .sidebar-brand-link {
+        font-size: 14px;
+    }
+}
+
+/* Very small screens - hide sidebar, show minimal navigation */
+@media (max-width: 480px) {
+    .floating-sidebar {
+        display: none;
+    }
+
+    .page-content-wrapper {
+        margin-left: 0;
+    }
+}