More MUI-related improvements

README.md

@@ -180,7 +180,6 @@ To use our defined layout (sidebar and nav in top), you need to [add the propert
 | Prop                   | Type                                                     | Description                                  |
 |------------------------|----------------------------------------------------------|----------------------------------------------|
 | layout                 | `PageLayout`                                             | Basically `Layout`'s props                   |
-| layout.title           | `ReactNode?`                                             | Title to display in the centre of the navbar |
 | layout.sidebar         | `Sidebar`                                                |                                              |
 | layout.sidebar.type    | `SidebarType`                                            |                                              |
 | layout.sidebar.content | `ReactNode?` (only needed if `sidebarType` === `CUSTOM`) |                                              |
@@ -507,6 +506,8 @@ from the
 | [dotenv](https://github.com/motdotla/dotenv)                                          | 16.0          | Load development environment variables during database seeding                                         |
 | [lodash](https://lodash.com/)                                                         | 4.17          | Utility library                                                                                        |
 | [lorem-ipsum](https://github.com/knicklabs/lorem-ipsum.js)                            | 2.0           | Generating placeholder text (for seeding)                                                              |
+| [usehooks-ts](https://usehooks-ts.com/)                                               | 2.9           | Utility React hooks                                                                                    |
+| [type-fest](https://github.com/sindresorhus/type-fest)                                | 3.5           | Utility TypeScript types                                                                               |
 | ...                                                                                   |               |                                                                                                        |
 
 <!-- https://stackoverflow.com/a/42424860 -->

prototype_nextjs/README.md

@@ -8,6 +8,8 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

prototype_nextjs/package.json

@@ -40,6 +40,7 @@
     "react-hot-toast": "^2.4.0",
     "sharp": "^0.31.3",
     "swr": "^2.0.0",
+    "usehooks-ts": "^2.9.1",
     "zod": "^3.20.2",
     "zustand": "^4.1.4"
   },
@@ -61,6 +62,7 @@
     "lorem-ipsum": "^2.0.8",
     "prisma": "^4.8.0",
     "ts-node": "^10.9.1",
+    "type-fest": "^3.5.0",
     "typescript": "^4.9.3"
   },
   "prisma": {

prototype_nextjs/src/components/DebouncedTextField.tsx

@@ -9,12 +9,12 @@ export type DebouncedTextFieldProps = Omit<TextFieldProps, 'value' | 'onChange'
 };
 
 /**
- * A controlled TextField that uses debouncing for better performance. Should be used for searching.
+ * A controlled `TextField` that uses debouncing for better performance. Should be used for searching.
  *
  * @param debounceTimeoutMs The amount of time (ms) after user stops typing to wait before calling `onSearchSubmit`
- * @param initialValue
+ * @param initialValue The initial value, default `''`
  * @param onSearchSubmit The action to execute `debounceTimeoutMs`ms after user stops typing
- * @param resetResults
+ * @param resetResults The action to execute when value is empty
  * @see https://javascript.plainenglish.io/how-to-create-an-optimized-real-time-search-with-react-6dd4026f4fa9
  */
 export default function DebouncedTextField({

prototype_nextjs/src/components/EmailField.tsx

@@ -3,6 +3,14 @@ import TextField, { type TextFieldProps } from '@mui/material/TextField';
 
 export type EmailFieldProps = TextFieldProps;
 
+/**
+ * A convenience wrapper around `TextField` for email input.
+ *
+ * Defaults:
+ * - type of `email`
+ * - autoComplete of `username`
+ * - label of `Email address`
+ */
 export default forwardRef(function EmailField(props: EmailFieldProps, ref: React.ForwardedRef<HTMLInputElement>) {
   return (
     <TextField

prototype_nextjs/src/components/Layout.tsx

@@ -30,7 +30,6 @@ interface DefaultSidebar extends BaseSidebar {
 type Sidebar = CustomSidebar | DefaultSidebar;
 
 export type PageLayout = {
-  title?: React.ReactNode
   sidebar: Sidebar
 };
 
@@ -42,7 +41,6 @@ export interface LayoutProps extends PageLayout {
  * Pages can use `flexGrow: 1` to take up the rest of the available space
  */
 export default function Layout({
-  title,
   sidebar,
   children,
 }: LayoutProps) {
@@ -88,7 +86,6 @@ export default function Layout({
         <NavigationBar
           noSidebar={noSidebar}
           toggleSidebar={toggleSidebar}
-          title={title}
         />
         {children}
       </Stack>

prototype_nextjs/src/components/Link.tsx

@@ -85,8 +85,8 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     [activeClassName]: router.pathname === pathname && activeClassName,
   });
 
-  const isExternal =
-    typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
+  const isExternal
+    = typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
 
   if (isExternal) {
     if (noLinkStyle) {

prototype_nextjs/src/components/PasswordField.tsx

@@ -16,16 +16,21 @@ export type PasswordFieldProps = TextFieldProps & {
 };
 
 /**
- * A reusable form input field for the user's password.
+ * A convenience wrapper around `TextField` for password input.
  *
- * - Customisable as it's a `forwardRef` component
- * - Correct `autocomplete` of `current-password`
- * - policyTooltip
+ * Features:
+ * - Toggle password visibility capability
+ * - Password policy tooltip
+ *
+ * Defaults:
+ * - label of `Password`
+ * - autoComplete of `current-password`
  */
 export default forwardRef(function PasswordField({
   label = 'Password',
   autoComplete = 'current-password',
   policyTooltip,
+  InputProps,
   ...props
 }: PasswordFieldProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const [showPassword, setShowPassword] = useState(false);
@@ -62,6 +67,7 @@ export default forwardRef(function PasswordField({
             </Stack>
           </InputAdornment>
         ),
+        ...InputProps,
       }}
       ref={ref}
       {...props}

prototype_nextjs/src/components/StyledCloseButtonDialog.tsx

@@ -63,6 +63,6 @@ export default function StyledCloseButtonDialog({
         </Stack>
       )}
       {children}
-    </StyledDialog >
+    </StyledDialog>
   );
 }

prototype_nextjs/src/components/TextAvatar.tsx

@@ -10,7 +10,7 @@ export interface TextAvatarProps extends React.ComponentPropsWithoutRef<'span'>
   size?: string
 }
 
-// https://mui.com/material-ui/react-avatar/#main-content
+// TODO: https://mui.com/material-ui/react-avatar/#main-content
 export default forwardRef(function LoadingButton({
   size = '40px',
   className,

prototype_nextjs/src/components/layout/NavigationBar.tsx

@@ -1,9 +1,47 @@
+import { useId, useState } from 'react';
+import Link from 'next/link';
+import { styled } from '@mui/material/styles';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Toolbar from '@mui/material/Toolbar';
+import MenuIcon from '@mui/icons-material/Menu';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import type { UrlObject } from 'url';
 
-import Nav from '~/components/layout/nav/Nav';
+import TextAvatar from '~/components/TextAvatar';
+import ThemeSwitcher from '~/components/layout/ThemeSwitcher';
+import NavCollapse from '~/components/layout/nav/NavCollapse';
+import NavTabs from '~/components/layout/nav/NavTabs';
+import useUserStore from '~/store/userStore';
+
+export type PageData = {
+  label: string // page
+  href: UrlObject | string
+};
+// TODO: look at using icons, AT LEAST for mobile nav if menu (probably not for desktop)
+
+const userPages: PageData[] = [
+  { label: 'Home', href: '/home' },
+  { label: 'Forum', href: '/forum' },
+  { label: 'Projects', href: '/projects' },
+  { label: 'Dashboard', href: '/dashboard' },
+];
+const managerPages: PageData[] = [
+  { label: 'Home', href: '/home' },
+  { label: 'Forum', href: '/forum' },
+  { label: 'Projects', href: '/projects' },
+  { label: 'Dashboard', href: '/dashboard' },
+  { label: 'Staff', href: '/staff' },
+];
+
+const NavBarBox = styled(Box)({
+  // width: '100%',
+  flexBasis: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+});
 
 /**
  * - Material UI's `FormatAlignLeftIcon` doesn't look great
@@ -42,17 +80,32 @@ const faAlignLeftSvg = (
   </svg>
 );
 
-// TODO: navbar sticky to top? if so then blur
-export default function NavigationBar({ noSidebar, toggleSidebar, title }: {
+export type NavigationBarProps = {
   noSidebar: boolean
   toggleSidebar: () => void
-  title: React.ReactNode
-}) {
-  const renderToggleSidebarButton = !noSidebar && (
+};
+
+// TODO?: navbar sticky to top? if so then blur after scoll
+export default function NavigationBar({
+  noSidebar,
+  toggleSidebar,
+}: NavigationBarProps) {
+  const isManager = useUserStore((state) => state.user.isManager);
+  const pages = isManager ? managerPages : userPages;
+
+  const collapseId = useId();
+
+  const [isCollapseOpen, setIsCollapseOpen] = useState(false);
+
+  const handleToggleCollapse = () => setIsCollapseOpen((open) => !open);
+  const handleCloseCollapse = () => setIsCollapseOpen(false);
+
+  const toggleSidebarButton = !noSidebar && (
     <Button
       onClick={toggleSidebar}
       variant="contained"
       color="makeItAllGrey"
+      aria-label="Toggle Sidebar"
       sx={(theme) => ({
         paddingX: 1.5,
         height: `calc(1.5rem + ${theme.spacing(1.5)})`,
@@ -66,35 +119,72 @@ export default function NavigationBar({ noSidebar, toggleSidebar, title }: {
       <Box
         display={{
           xs: 'none',
-          md: 'inline-block',
+          md: 'inline',
         }}
         marginLeft={{
           md: 1,
         }}
+        component="span"
       >
         Toggle Sidebar
       </Box>
     </Button>
   );
 
   return (
-    <AppBar position="static">
+    <AppBar
+      position="static"
+      elevation={2}
+    >
       <Toolbar>
         {/* left */}
-        <Box width="100%" display="flex">
-          {renderToggleSidebarButton}
-        </Box>
+        <NavBarBox>
+          {toggleSidebarButton}
+        </NavBarBox>
         {/* middle */}
-        <Box width="100%" display="flex">
-          <Box marginX="auto">
-            {title}
-          </Box>
-        </Box>
+        <NavBarBox justifyContent="center">
+          <NavTabs pages={pages} />
+        </NavBarBox>
         {/* right */}
-        <Box width="100%" display="flex" justifyContent="flex-end">
-          <Nav />
-        </Box>
+        <NavBarBox justifyContent="end">
+          <ThemeSwitcher marginRight={{ xs: 0.5, md: 1.5 }} />
+
+          <Box
+            display={{ xs: 'none', lg: 'block' }}
+          >
+            <Link href="/profile">
+              <TextAvatar />
+            </Link>
+          </Box>
+
+          {/* TODO: change nav button to be same size width as toggle sidebar button (when only icon)
+          might have to use custom svg (which will make animating transition easier)
+           */}
+          <Button
+            variant="contained"
+            color="contrast"
+            onClick={handleToggleCollapse}
+            aria-controls={collapseId}
+            aria-expanded={isCollapseOpen}
+            aria-label={`${isCollapseOpen ? 'collapse' : 'open'} navigation menu`}
+            sx={(theme) => ({
+              paddingX: 1.5,
+              height: `calc(1.5rem + ${theme.spacing(1.5)})`,
+              minWidth: 0,
+              display: { xs: 'block', lg: 'none' },
+            })}
+          >
+            {/* TODO: animate transition */}
+            {isCollapseOpen ? <MenuOpenIcon /> : <MenuIcon />}
+          </Button>
+        </NavBarBox>
       </Toolbar>
+      <NavCollapse
+        pages={pages.concat({ label: 'Profile', href: '/profile' })}
+        collapseId={collapseId}
+        open={isCollapseOpen}
+        closeCollapse={handleCloseCollapse}
+      />
     </AppBar>
   );
 }