Merge pull request #266 from shapehq/feature/add-new-project-button

Add new project button to Sidebar Header
shapehq · Jul 25, 2024 · f0fc183 · f0fc183
2 parents 3ac21b3 + 471b6f9
commit f0fc183
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 29 deletions.
diff --git a/.env.example b/.env.example
@@ -2,6 +2,7 @@ SHAPE_DOCS_BASE_URL=http://localhost:3000
 SHAPE_DOCS_PROJECT_CONFIGURATION_FILENAME=.shape-docs.yml
 NEXT_PUBLIC_SHAPE_DOCS_TITLE=Shape Docs
 NEXT_PUBLIC_SHAPE_DOCS_DESCRIPTION=Documentation for Shape's APIs
+NEXT_PUBLIC_SHAPE_DOCS_HELP_URL=https://github.com/shapehq/shape-docs/wiki
 NEXTAUTH_URL_INTERNAL=http://localhost:3000
 NEXTAUTH_SECRET=use [openssl rand -base64 32] to generate a 32 bytes value
 REDIS_URL=localhost

diff --git a/src/features/sidebar/view/SidebarHeader.tsx b/src/features/sidebar/view/SidebarHeader.tsx
@@ -1,11 +1,21 @@
 import Image from "next/image"
+// import { Box, Typography, IconButton, Tooltip } from "@mui/material"
 import { Box, Typography } from "@mui/material"
 import Link from "next/link"
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+// import { faPlus } from "@fortawesome/free-solid-svg-icons"
 
 export default function SidebarHeader() {
   const siteName = process.env.NEXT_PUBLIC_SHAPE_DOCS_TITLE
   return (
-    <Box sx={{ padding: 2, paddingBottom: 4 }}>
+    <Box sx={{
+      padding: 2,
+      height: 80,
+      marginBottom: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }}>
       <Link
         href={"/"}
         style={{
@@ -31,7 +41,14 @@ export default function SidebarHeader() {
         >
           {siteName}
         </Typography>
-      </Link> 
+      </Link>
+      {/* <Tooltip title="Add new project">
+        <Link href={`${projectWikiURL}`} target="_blank">
+          <IconButton color="primary" size="small" aria-label="Add new project">
+            <FontAwesomeIcon icon={faPlus} size="xs" style={{ aspectRatio: 1, padding: 2 }} />
+          </IconButton>
+        </Link>
+      </Tooltip> */}
     </Box>
   )
 }
diff --git a/src/features/sidebar/view/base/SecondaryHeader.tsx b/src/features/sidebar/view/base/SecondaryHeader.tsx
@@ -39,30 +39,39 @@ export default function SecondaryHeader({
       sx={{
         ...sx,
         backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary
+        color: theme.palette.text.primary,
       }}
     >
-      <Box sx={{ display: "flex", alignItems: "center", padding: 2 }}>
+      <Box sx={{ 
+        display: "flex",
+        alignItems: "center",
+        padding: 2,
+        maxWidth: "1460px",
+        margin: "auto",
+        height: 80 
+      }}>
         {showOpenSidebar &&
           <Tooltip title={`Show Projects${openCloseShortcutString}`}>
             <IconButton
+              size="medium"
               color="primary"
               onClick={() => onToggleSidebarOpen(true)}
               edge="start"
             >
-              <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1 }} />
-            </IconButton>
+              <FontAwesomeIcon icon={faBars} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
+			</IconButton>
           </Tooltip>
         }
         {showCloseSidebar &&
           <Tooltip title={`Hide Projects${openCloseShortcutString}`}>
             <IconButton
+              size="small"
               color="primary"
               onClick={() => onToggleSidebarOpen(false)}
               edge="start"
             >
-              <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1 }} />
-            </IconButton>
+            <FontAwesomeIcon icon={faChevronLeft} size="sm" style={{ aspectRatio: 1, padding: 2 }} />
+          </IconButton>
           </Tooltip>
         }
         <Box sx={{ display: "flex", flexGrow: 1, justifyContent: "end" }}> 

diff --git a/src/features/user/view/SettingsList.tsx b/src/features/user/view/SettingsList.tsx
@@ -1,35 +1,63 @@
-import { List, Button } from "@mui/material"
+import { ReactNode } from "react"
+import { signOut } from "next-auth/react"
+import Link from "next/link"
+import { List, Button, Stack, Typography } from "@mui/material"
 import ThickDivider from "@/common/ui/ThickDivider"
 import DocumentationVisualizationPicker from "./DocumentationVisualizationPicker"
-import { signOut } from "next-auth/react"
-
-const SettingsItem = ({ onClick, href, children }: {
-  onClick?: () => void;
-  href?: string;
-  children?: string;
-}) =>  
-  <Button
-    variant="text"
-    fullWidth={true}
-    style={{ justifyContent: "flex-start" }}
-    sx={{ marginTop: 1.3 }}
-    onClick={onClick}
-    href={href}
-  >{children}</Button>
+import { IconProp } from "@fortawesome/fontawesome-svg-core"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faQuestionCircle, faRightFromBracket } from "@fortawesome/free-solid-svg-icons"
+
+const SettingsItem = ({ onClick, icon, children }: {
+  onClick?: () => void
+  icon?: IconProp
+  children?: ReactNode
+}) => {
+  return (
+    <Button
+      variant="text"
+      fullWidth={true}
+      style={{ justifyContent: "flex-start" }}
+      sx={{ marginTop: 1.3 }}
+      onClick={onClick}
+    >
+      <Stack direction="row" alignItems="center" width="100%">
+        {icon && <FontAwesomeIcon icon={icon} size="lg" style={{ marginRight: 10 }} /> }
+        {children}
+      </Stack>
+    </Button>
+  )
+}
 
 const SettingsList = () => {
+  const helpURL = process.env.NEXT_PUBLIC_SHAPE_DOCS_HELP_URL
   return (
     <List sx={{
       padding: 1,
-      paddingLeft: 2,
-      paddingRight: 2,
+      paddingLeft: 1.5,
+      paddingRight: 1.5,
       paddingBottom: 0.5,
       minWidth: 250
     }}>
-      <DocumentationVisualizationPicker sx={{ marginBottom: 2 }} />
+      <DocumentationVisualizationPicker sx={{
+        marginBottom: 2,
+        paddingLeft: 0.5,
+        paddingRight: 0.5
+      }} />
       <ThickDivider sx={{ marginLeft: -2, marginRight: -2 }} />
-      <SettingsItem onClick={() => signOut()}>
-        Log out
+      {helpURL &&
+        <Link href={`${helpURL}`} target="_blank">
+          <SettingsItem icon={faQuestionCircle}>
+            <Typography>
+              Help
+            </Typography>
+          </SettingsItem>
+        </Link>
+      }
+      <SettingsItem onClick={() => signOut()} icon={faRightFromBracket}>
+        <Typography>
+          Log out
+        </Typography>
       </SettingsItem>
     </List>
   )