From 7c0869788bcad32370175b15b783dca7a4932d02 Mon Sep 17 00:00:00 2001 From: Polo Montague Date: Tue, 7 Jul 2026 19:04:07 -0400 Subject: [PATCH 1/2] Fix sidebar overlap on desktop. Still working on a solution for mobile. --- src/components/Layout/DashboardLayout/NavigationBar.tsx | 7 ++++--- src/components/Layout/PageLayout/PageLayout.tsx | 2 ++ src/components/styled/container.tsx | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Layout/DashboardLayout/NavigationBar.tsx b/src/components/Layout/DashboardLayout/NavigationBar.tsx index feacf219..42130a94 100644 --- a/src/components/Layout/DashboardLayout/NavigationBar.tsx +++ b/src/components/Layout/DashboardLayout/NavigationBar.tsx @@ -20,11 +20,11 @@ import { UserRole } from "need4deed-sdk"; const BarContainer = styled.div` display: flex; flex-direction: column; - position: fixed; + position: sticky; width: var(--dashboard-navigation-bar-container-width); top: 112px; left: 0; - z-index: 1; + z-index: 0; gap: var(--dashboard-navigation-bar-gap); background-color: var(--color-orchid-subtle); border-top-right-radius: var(--dashboard-navigation-bar-border-radius); @@ -35,7 +35,8 @@ const BarContainer = styled.div` flex-direction: row; justify-content: space-around; align-items: flex-start; - top: auto; + position: sticky; + top: unset; bottom: 0; width: 100%; height: var(--dashboard-navigation-bar-mobile-height); diff --git a/src/components/Layout/PageLayout/PageLayout.tsx b/src/components/Layout/PageLayout/PageLayout.tsx index 688d9d46..f3ddee01 100644 --- a/src/components/Layout/PageLayout/PageLayout.tsx +++ b/src/components/Layout/PageLayout/PageLayout.tsx @@ -31,6 +31,8 @@ const PageContentHeaderContainer = styled.div` background: ${(props) => props.background || "var(--layout-static-page-background-default)"}; padding-bottom: var(--layout-static-page-header-content-bottom-padding); padding-top: var(--layout-static-page-header-height); + background-color: red; + position: relative; `; export function PageLayout({ children, background }: Props) { diff --git a/src/components/styled/container.tsx b/src/components/styled/container.tsx index 90fe4426..619c638d 100644 --- a/src/components/styled/container.tsx +++ b/src/components/styled/container.tsx @@ -63,7 +63,7 @@ export const DashboardBaseContainer = styled.div` max-width: var(--dashboard-base-container-width); padding-top: var(--dashboard-base-container-padding-top); padding-bottom: var(--dashboard-base-container-padding-bottom); - + background-color: green; @media (max-width: 767px) { margin-left: 16px; margin-right: 16px; From cebe73c3f310f26f064e27a636be91c7d20bffc0 Mon Sep 17 00:00:00 2001 From: Polo Montague Date: Wed, 8 Jul 2026 17:32:06 -0400 Subject: [PATCH 2/2] Make NavigationBar sticky on desktop, and fixed on mobile --- src/components/Layout/DashboardLayout/NavigationBar.tsx | 2 +- src/components/Layout/PageLayout/PageLayout.tsx | 2 -- src/components/styled/container.tsx | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Layout/DashboardLayout/NavigationBar.tsx b/src/components/Layout/DashboardLayout/NavigationBar.tsx index 42130a94..e6253545 100644 --- a/src/components/Layout/DashboardLayout/NavigationBar.tsx +++ b/src/components/Layout/DashboardLayout/NavigationBar.tsx @@ -35,7 +35,7 @@ const BarContainer = styled.div` flex-direction: row; justify-content: space-around; align-items: flex-start; - position: sticky; + position: fixed; top: unset; bottom: 0; width: 100%; diff --git a/src/components/Layout/PageLayout/PageLayout.tsx b/src/components/Layout/PageLayout/PageLayout.tsx index f3ddee01..688d9d46 100644 --- a/src/components/Layout/PageLayout/PageLayout.tsx +++ b/src/components/Layout/PageLayout/PageLayout.tsx @@ -31,8 +31,6 @@ const PageContentHeaderContainer = styled.div` background: ${(props) => props.background || "var(--layout-static-page-background-default)"}; padding-bottom: var(--layout-static-page-header-content-bottom-padding); padding-top: var(--layout-static-page-header-height); - background-color: red; - position: relative; `; export function PageLayout({ children, background }: Props) { diff --git a/src/components/styled/container.tsx b/src/components/styled/container.tsx index 619c638d..13bf27b3 100644 --- a/src/components/styled/container.tsx +++ b/src/components/styled/container.tsx @@ -63,7 +63,6 @@ export const DashboardBaseContainer = styled.div` max-width: var(--dashboard-base-container-width); padding-top: var(--dashboard-base-container-padding-top); padding-bottom: var(--dashboard-base-container-padding-bottom); - background-color: green; @media (max-width: 767px) { margin-left: 16px; margin-right: 16px;