Added headertop option

docker-entrypoint.sh

@@ -11,6 +11,7 @@ sed -i -e 's/(PAGETITLE = ")My Website(")/'"$1${TITLE}$2"'/g' /app/src/variables
 sed -i -e 's/(PAGEICON = ")\/logo\.png(")/'"$1${LOGO}$2"'/g' /app/src/variables.ts
 sed -i -e 's/(SHOWHEADER = )true/'"$1${HEADER}"'/g' /app/src/variables.ts
 sed -i -e 's/(SHOWHEADERLINE = )true/'"$1${HEADERLINE}"'/g' /app/src/variables.ts
+sed -i -e 's/(SHOWHEADERTOP = )false/'"$1${HEADERTOP}"'/g' /app/src/variables.ts
 sed -i -e 's/(CATEGORIES = ")normal(")/'"$1${CATEGORIES}$2"'/g' /app/src/variables.ts
 sed -i -e 's/(THEME = ")light(")/'"$1${THEME}$2"'/g' /app/src/variables.ts
 

dockerfile

@@ -13,6 +13,7 @@ ENV TITLE "My Website"
 ENV LOGO "/logo.png"
 ENV HEADER "true"
 ENV HEADERLINE "true"
+ENV HEADERTOP "false"
 ENV CATEGORIES "normal"
 ENV BGCOLOR "theme(colors.slate.50)"
 ENV BGCOLORDARK "theme(colors.gray.950)"

readme.md

@@ -87,6 +87,7 @@ services:
             - LOGO=/starbase80.jpg # defaults to /logo.png, set to LOGO= to hide the logo
 			- HEADER=true # defaults to true, set to false to hide the title and logo
 			- HEADERLINE=true # defaults to true, set to false to turn off the header border line
+			- HEADERTOP=true # defaults to false, set to true to force the header to always stay on top
 			- CATEGORIES=small # defaults to normal, set to small for smaller, uppercase category labels
 			- BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax
 			- BGCOLORDARK=#000 # defaults to theme(colors.gray.950), set to any hex color or Tailwind color using the theme syntax

src/pages/index.tsx

@@ -3,7 +3,7 @@ import { Header } from "../components/header";
 import { ServiceCatalogList } from "../components/service-catalogs";
 import userServices from "../config.json";
 import { IServiceCatalog } from "../shared/types";
-import { SHOWHEADER, SHOWHEADERLINE } from "../variables";
+import { SHOWHEADER, SHOWHEADERLINE, SHOWHEADERTOP } from "../variables";
 
 interface IProps {
 	title?: string;
@@ -13,22 +13,45 @@ interface IProps {
 export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 	const mySerices = userServices as IServiceCatalog[];
 
-	let headerClassName = "w-full xl:w-auto xl:max-w-xs xl:min-h-screen p-4";
+	let headerClassName = "p-4";
+
+	if (SHOWHEADERTOP) {
+		headerClassName += " w-full";
+	} else {
+		headerClassName += " w-full xl:w-auto xl:max-w-xs xl:min-h-screen";
+	}
 
 	if (SHOWHEADERLINE) {
-		headerClassName +=
-			"border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300 dark:border-gray-700";
+		headerClassName += "border-0 border-solid border-gray-300 dark:border-gray-700";
+
+		if (SHOWHEADERTOP) {
+			headerClassName += " border-b";
+		} else {
+			headerClassName += " border-b xl:border-r xl:border-b-0";
+		}
+	}
+
+	let pageWrapperClassName = "min-h-screen flex flex-col  max-w-screen-2xl mx-auto";
+
+	if (!SHOWHEADERTOP) {
+		pageWrapperClassName += " xl:flex-row";
+	}
+
+	let serviceCatalogListWrapperClassName = "p-4 flex-grow";
+
+	if (!SHOWHEADERTOP) {
+		serviceCatalogListWrapperClassName += " min-h-screen";
 	}
 
 	return (
 		<div className="min-h-screen">
-			<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
+			<div className={pageWrapperClassName}>
 				{SHOWHEADER && (
 					<div className={headerClassName}>
 						<Header title={title} icon={icon} />
 					</div>
 				)}
-				<div className="min-h-screen p-4 flex-grow">
+				<div className={serviceCatalogListWrapperClassName}>
 					<ServiceCatalogList catalogs={mySerices} />
 				</div>
 			</div>

src/variables.ts

@@ -2,5 +2,6 @@ export const PAGETITLE = "My Website";
 export const PAGEICON = "/logo.png";
 export const SHOWHEADER = true;
 export const SHOWHEADERLINE = true;
+export const SHOWHEADERTOP = true;
 export const CATEGORIES = "normal";
 export const THEME = "light";