better nav

ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts

@@ -4,8 +4,7 @@ import { vars } from "../../../styles/theme/index.css";
 export const HeaderDisplayMain = style({
   color: vars.colors.text.normal,
   display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+  justifyContent: "space-between"
 });
 
 globalStyle(`${HeaderDisplayMain} > h1`, {
@@ -13,3 +12,17 @@ globalStyle(`${HeaderDisplayMain} > h1`, {
   fontWeight: "bold",
   marginRight: vars.spacing.medium,
 });
+
+
+export const HeaderTitle = style({
+  marginLeft: vars.spacing.large,
+});
+
+export const HeaderLinks = style({
+  display: "flex",
+  alignItems: "center",
+  flexGrow: 1,
+  justifyContent: "space-between",
+  maxWidth: "300px",
+  marginRight: vars.spacing.large,
+});

ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/helpOptions.css.ts

@@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const HelpContent = style({
+  width: '300px',
+});

ui/frontend/build_src/src/components/organisms/headerDisplay/helpOptions/index.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Popover } from '@headlessui/react';
+// import { useTranslation } from "react-i18next";
+
+import {
+  PopoverMain,
+  PopoverButtonStyle,
+  PopoverPanelMain,
+} from "../../../_headless/popover/index.css";
+
+import {
+  IconFont,
+  SettingItem
+} from "../../../../styles/shared.css";
+
+import {
+  HelpContent
+} from "./helpOptions.css";
+
+export default function HelpOptions() {
+
+  return (
+    <Popover className={PopoverMain}>
+      <Popover.Button className={PopoverButtonStyle}>
+        <i className={[IconFont, 'fa-solid', 'fa-comments'].join(" ")}></i>
+        Help & Community
+      </Popover.Button>
+
+      <Popover.Panel className={PopoverPanelMain}>
+        <div className={HelpContent}>
+          <ul>
+            <li className={SettingItem}>
+              <a href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" target="_blank" rel="noreferrer">
+                <i className={[IconFont, 'fa-solid', 'fa-circle-question'].join(" ")}></i> Usual Problems and Solutions
+              </a>
+            </li>
+            <li className={SettingItem}>
+              <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank" rel="noreferrer">
+                <i className={[IconFont, 'fa-brands', 'fa-discord'].join(" ")}></i> Discord user Community
+              </a>
+            </li>
+            <li className={SettingItem}>
+              <a href="https://old.reddit.com/r/StableDiffusionUI/" target="_blank" rel="noreferrer">
+                <i className={[IconFont, 'fa-brands', 'fa-reddit'].join(" ")}></i> Reddit Community
+              </a>
+            </li>
+            <li className={SettingItem}>
+              <a href="https://github.com/cmdr2/stable-diffusion-ui " target="_blank" rel="noreferrer">
+                <i className={[IconFont, 'fa-brands', 'fa-github'].join(" ")}></i> Source Code on Github
+              </a>
+            </li>
+          </ul>
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+};

ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx

@@ -5,13 +5,16 @@ import { KEY_CONFIG, getConfig } from "../../../api";
 
 import StatusDisplay from "./statusDisplay";
 
+import HelpOptions from "./helpOptions";
 import SystemSettings from "./systemSettings";
 
 import { useTranslation } from "react-i18next";
 
 import {
-  HeaderDisplayMain, // @ts-expect-error
-} from "./headerDisplay.css.ts";
+  HeaderDisplayMain,
+  HeaderTitle,
+  HeaderLinks,
+} from "./headerDisplay.css";
 
 // import LanguageDropdown from "./languageDropdown";
 
@@ -43,13 +46,16 @@ export default function HeaderDisplay() {
 
   return (
     <div className={HeaderDisplayMain}>
-      <h1>
-        {t("title")} {version} {release}{" "}
-      </h1>
-      <StatusDisplay className="status-display"></StatusDisplay>
-
-      <SystemSettings></SystemSettings>
-
+      <div className={HeaderTitle}>
+        <h1>
+          {t("title")} {version} {release}{" "}
+        </h1>
+        <StatusDisplay className="status-display"></StatusDisplay>
+      </div>
+      <div className={HeaderLinks}>
+        <HelpOptions></HelpOptions>
+        <SystemSettings></SystemSettings>
+      </div>
       {/* <LanguageDropdown></LanguageDropdown> */}
     </div>
   );

ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import React from "react";
-import { Popover, Switch } from '@headlessui/react';
+import { Popover } from '@headlessui/react';
 import { useTranslation } from "react-i18next";
 
 import { useImageCreate } from "../../../../stores/imageCreateStore";

ui/frontend/build_src/src/styles/index.css.ts

@@ -60,3 +60,8 @@ globalStyle(`textarea`, {
   fontSize: vars.fonts.sizes.Body,
   fontWeight: "bold",
 });
+
+globalStyle(`a`, {
+  color: vars.colors.link,
+  textDecoration: "none",
+});

ui/frontend/build_src/src/styles/shared.css.ts

@@ -24,8 +24,16 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
   padding: "0",
 });
 
+//TODO this should probably just be for all li elements
 export const SettingItem = style({
   marginBottom: vars.spacing.medium,
+
+  selectors: {
+    "&:last-of-type": {
+      marginBottom: vars.spacing.none,
+    },
+  },
+
 });