style: Minor Beta UI fixes (#1197)

* style(Header): hide scrollbar but still allow side scroll/swipe/drag/touch

* feat: make menu buttons flexiblewith min-width, delete passed in classes, add pointer-cursor

* refactor: use conditional for visibility of plugins settings

* fix: make advanced settings popover appear over nav

* refactor(textarea): minor padding restyling, add max height

* style: make menuItem checkmark invisible instead of hidden so it takes up width space

* style: make presetsMenu trigger an icon button, remove max-width of presets except in mobile view

* style: improve advanced settings mobile styling

* feat: newchat and convo items toggle nav on small screens

* style: improve no presets view

* style: make sure toggle hover effect does not apply on smaller screens

client/src/components/Nav/Nav.tsx

@@ -144,6 +144,12 @@ export default function Nav({ navVisible, setNavVisible }) {
     setNavVisible((prev: boolean) => !prev);
   };
 
+  const itemToggleNav = () => {
+    if (isSmallScreen) {
+      toggleNavVisible();
+    }
+  };
+
   const containerClasses =
     getConversationsQuery.isLoading && pageNumber === 1
       ? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
@@ -167,12 +173,12 @@ export default function Nav({ navVisible, setNavVisible }) {
               <div
                 className={cn(
                   'scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20 transition-opacity',
-                  isToggleHovering ? 'opacity-50' : 'opacity-100',
+                  isToggleHovering && !isSmallScreen ? 'opacity-50' : 'opacity-100',
                 )}
               >
                 <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
                   <div className="mb-1 flex h-11 flex-row">
-                    <NewChat />
+                    <NewChat toggleNav={itemToggleNav} />
                   </div>
                   {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
                   <div
@@ -187,7 +193,11 @@ export default function Nav({ navVisible, setNavVisible }) {
                       {(getConversationsQuery.isLoading && pageNumber === 1) || isFetching ? (
                         <Spinner />
                       ) : (
-                        <Conversations conversations={conversations} moveToTop={moveToTop} />
+                        <Conversations
+                          conversations={conversations}
+                          moveToTop={moveToTop}
+                          toggleNav={itemToggleNav}
+                        />
                       )}
                       <Pages
                         pageNumber={pageNumber}