fix: menu scrolling (#176)

thenick775 · Sep 22, 2024 · 7ec266d · 7ec266d
1 parent b5f97a8
commit 7ec266d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
@@ -58,14 +58,15 @@ type ExpandableComponentProps = {
 };
 
 const NavigationMenuWrapper = styled.div<ExpandableComponentProps>`
+  display: flex;
+  flex-direction: column;
   width: ${NavigationMenuWidth}px;
   height: 100dvh;
   position: fixed;
   background-color: ${({ theme }) => theme.mediumBlack};
   transition: 0.4s ease-in-out;
   -webkit-transition: 0.4s ease-in-out;
   z-index: 150;
-  overflow-y: auto;
   text-align: left;
   left: 0;
   top: 0;
@@ -74,11 +75,7 @@ const NavigationMenuWrapper = styled.div<ExpandableComponentProps>`
   ${({ $isExpanded = false }) =>
     !$isExpanded &&
     `left: -${NavigationMenuWidth + 5}px;
-    `}
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  `};
 `;
 
 const StyledMenuHeader = styled.h2`
@@ -96,13 +93,17 @@ const StyledMenuHeader = styled.h2`
 `;
 
 const MenuItemWrapper = styled.ul`
-  display: flex;
-  flex-direction: column;
-  padding-left: 0;
   margin-bottom: 0;
   margin-top: 0;
   list-style: none;
   padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  touch-action: pan-y;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`

diff --git a/gbajs3/src/index.css b/gbajs3/src/index.css
@@ -34,3 +34,8 @@ body {
   background-color: #212529;
   font-family: 'Calibri', 'Verdana', sans-serif;
 }
+
+html,
+body {
+  overscroll-behavior: none;
+}