React Mega Menu for SharePoint Online

Question

I am hoping to find some help with the issues I am facing with this spfx extension in SPO. I am really new to this stuff so please bear with me, I am able to build and deploy with some customizations but there are some things that just are not taking like I would hope. First, the size of the mega menu, I have tried updating the react-mega-menu-application-customizer.js file in the 'classNames.Main' section of code. The changes I have made appear when testing but when I package the solution those changes do not show up in the prod deployment. The 'bottom', 'top', 'right', 'left' and 'width' properties do not stick. Any ideas on how I can get these properties to work properly?

Second, closing the menu, I can only do that by clicking the 'X' button, I would like to be able to click any area outside of the menu to close it.

Third, I would like this menu to work on every site collection and it using a central list for the menu items, how can I do that?

This is the github repo where I copied this project from: https://github.com/pnp/sp-dev-fx-extensions

Any help is greatly appreciated.

I updated the code below in bold but when packaged it does not reflect these properties.

classNames.main,
            {
                backgroundColor: semanticColors.bodyBackground,
                boxShadow: effects.elevation64,
                pointerEvents: 'auto',
                position: 'absolute',
                display: 'flex',
                flexDirection: 'column',
                overflowX: 'hidden',
                overflowY: 'auto',
                WebkitOverflowScrolling: 'touch',
                **bottom: 200,
                top: 50,**
                // left, right, width are overridden depending on the type of the Panel and the screen breakpoint.
                **left: panelMargin.auto,
                right: panelMargin.none,
                width: panelWidth.md2,**
                selectors: Object(tslib__WEBPACK_IMPORTED_MODULE_0__[/* __assign */ "e"])((_a = {}, _a[_Styling__WEBPACK_IMPORTED_MODULE_2__[/* HighContrastSelector */ "a"]] = {
                    borderLeft: "3px solid " + semanticColors.variantBorder,
                    borderRight: "3px solid " + semanticColors.variantBorder,
                }, _a), getPanelBreakpoints(type)),
            },