From 34fe33000fe74db469474634fdc8c6b6509453f0 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Tue, 2 Aug 2022 12:09:10 +0200
Subject: [PATCH] feat(web/menu): display arrow when menu is scrollable

---
 web/src/features/menu/list/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index 20db7f9..b1a7c51 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -7,6 +7,7 @@ import Header from "./Header";
 import FocusTrap from "focus-trap-react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { fetchNui } from "../../../utils/fetchNui";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export interface MenuItem {
   label: string;
@@ -184,7 +185,7 @@ const ListMenu: React.FC = () => {
               height="fit-content"
               maxHeight={415}
               overflow="hidden"
-              borderRadius="md"
+              borderRadius={menu.items.length < 6 || selected === menu.items.length - 1 ? "md" : undefined}
               bg="#141517"
               fontFamily="Nunito"
               borderTopLeftRadius="none"
@@ -209,6 +210,11 @@ const ListMenu: React.FC = () => {
                 </Stack>
               </FocusTrap>
             </Box>
+            {menu.items.length > 6 && selected !== menu.items.length - 1 && (
+              <Box bg="#141517" textAlign="center" borderBottomLeftRadius="md" borderBottomRightRadius="md" height={25}>
+                <FontAwesomeIcon icon="chevron-down" color="#909296" fontSize={20} />
+              </Box>
+            )}
           </Box>
         </Tooltip>
       )}