Added home/start menu

src/components/applications/file-explorer/FileExplorer.jsx

@@ -29,9 +29,9 @@ function FilePreview({ file }) {
 	return preview;
 }
 
-export function FileExplorer() {
+export function FileExplorer({ startPath }) {
 	const virtualRoot = useVirtualRoot();
-	const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate("~"));
+	const [currentDirectory, setCurrentDirectory] = useState(virtualRoot.navigate(startPath ?? "~"));
 	const [path, setPath] = useState(currentDirectory.path);
 	const windowsManager = useWindowsManager();
 

src/components/task-bar/HomeMenu.jsx

@@ -0,0 +1,62 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./HomeMenu.module.css";
+import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawesome/free-solid-svg-icons";
+import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
+import ApplicationsManager from "../../features/applications/applications.js";
+import { ReactSVG } from "react-svg";
+
+export function HomeMenu({ active, setActive }) {
+	const windowsManager = useWindowsManager();
+
+	const classNames = [styles["Container-outer"]];
+	if (active)
+		classNames.push(styles.Active);
+
+	return (
+		<div className={classNames.join(" ")}>
+			<div className={styles["Container-inner"]}>
+				<div className={styles.Buttons}>
+					<button title="Power" onClick={() => { window.close(); }}>
+						<FontAwesomeIcon icon={faPowerOff}/>
+					</button>
+					<button title="Settings">
+						<FontAwesomeIcon icon={faGear}/>
+					</button>
+					<button title="Info">
+						<FontAwesomeIcon icon={faCircleInfo}/>
+					</button>
+					<button title="Images" onClick={() => {
+						setActive(false);
+						windowsManager.open("file-explorer", { startPath: "~/Images" }); }
+					}>
+						<FontAwesomeIcon icon={faImage}/>
+					</button>
+					<button title="Documents" onClick={() => {
+						setActive(false);
+						windowsManager.open("file-explorer", { startPath: "~/Documents" }); }
+					}>
+						<FontAwesomeIcon icon={faFileLines}/>
+					</button>
+				</div>
+				<div className={styles.Apps}>
+					<h2>Apps</h2>
+					<div className={styles["App-list"]}>
+						{ApplicationsManager.APPLICATIONS.map(({ name, id}) => 
+							<button
+								className={styles["App-button"]}
+								onClick={() => {
+									setActive(false);
+									windowsManager.open(id);
+								}}
+								title={name}
+							>
+								<ReactSVG src={`${process.env.PUBLIC_URL}/media/applications/icons/${id}.svg`}/>
+								<p>{name}</p>
+							</button>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/task-bar/HomeMenu.module.css

@@ -0,0 +1,85 @@
+.Container-outer {
+	position: absolute;
+	left: 0;
+	bottom: 100%;
+	min-width: 16rem;
+	height: auto !important;
+	z-index: -1;
+	overflow: hidden;
+	resize: horizontal;
+}
+
+.Container-inner {
+	opacity: 1;
+	background-color: rgba(25, 25, 25, 75%);
+	backdrop-filter: blur(15px);
+	transform: none;
+	transition: 200ms ease-in-out;
+}
+
+.Container-outer:not(.Active) .Container-inner {
+	opacity: 0;
+	transform: translateY(100px);
+}
+
+.Container-inner {
+	display: flex;
+}
+
+.Buttons {
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+	padding: 0.25rem;
+}
+
+.Buttons > button {
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+
+.Buttons > button > svg {
+	height: 1.5rem;
+}
+
+.Apps {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	max-height: 20rem;
+	padding: 1rem;
+	padding-bottom: 0;
+}
+
+.Apps h2 {
+	width: 100%;
+	text-align: left;
+	font-size: 1rem;
+	margin: 0;
+	margin-bottom: 1rem;
+}
+
+.App-list {
+	overflow: auto;
+	max-height: 100%;
+}
+
+.App-list > button {
+	display: flex;
+	gap: 1rem;
+	width: 100%;
+	padding: 0.25rem 0.5rem;
+	border-radius: 0.5rem;
+}
+
+.App-list > button > div,
+.App-list > button > div > div,
+.App-list > button > div > div > svg {
+	width: 2rem;
+	height: 2rem;
+}
+
+.App-list > button > p {
+	margin: 0;
+	white-space: nowrap;
+}

src/components/task-bar/TaskBar.jsx

@@ -8,6 +8,8 @@ import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js"
 import { ReactSVG } from "react-svg";
 // eslint-disable-next-line no-unused-vars
 import Application from "../../features/applications/application.js";
+import { HomeMenu } from "./HomeMenu.jsx";
+import OutsideClickListener from "../../hooks/utils/outsideClick.js";
 
 /**
  * @param {Object} props 
@@ -33,13 +35,14 @@ function AppButton({ app }) {
 			onClick={() => { windowsManager.open(app.id); }}
 			title={app.name}
 		>
-			<ReactSVG src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
+			<ReactSVG src={`${process.env.PUBLIC_URL}/media/applications/icons/${app.id}.svg`}/>
 		</button>
 	);
 }
 
 export function Taskbar() {
 	const [date, setDate] = useState(new Date());
+	const [showHome, setShowHome] = useState(false);
 
 	useEffect(() => {
 		setInterval(() => {
@@ -50,6 +53,14 @@ export function Taskbar() {
 	return (
 		<div className={styles["Task-bar"]}>
 			<div className={styles["Program-icons"]}>
+				<div className={styles["Home-container"]}>
+					<OutsideClickListener onOutsideClick={() => { setShowHome(false); }}>
+						<button title="Home" className={styles["Home-button"]} onClick={() => { setShowHome(!showHome); }}>
+							<ReactSVG src={process.env.PUBLIC_URL + "/media/logo.svg"}/>
+						</button>
+						<HomeMenu active={showHome} setActive={setShowHome}/>
+					</OutsideClickListener>
+				</div>
 				<button title="Search">
 					<FontAwesomeIcon icon={faSearch}/>
 				</button>

src/components/task-bar/TaskBar.module.css

@@ -32,14 +32,23 @@
 	background-color: var(--task-bar-button-hover-color);
 }
 
+.Home-container {
+	position: relative;
+	padding: 0 !important;
+}
+
+.Home-button * {
+	fill: var(--foreground-color-a);
+	filter: none;
+}
+
 .Program-icons {
 	display: flex;
 	align-items: center;
 	height: 100%;
-	margin-left: 0.5rem;
 }
 
-.Program-icons > * {
+.Program-icons > *, .Home-button {
 	height: 100%;
 	padding: 0.75rem;
 }
@@ -50,7 +59,10 @@
 
 .Program-icons > * > div,
 .Program-icons > * > div > div,
-.Program-icons > * > div > div > svg {
+.Program-icons > * > div > div > svg,
+.Home-button > div,
+.Home-button > div > div,
+.Home-button > div > div > svg {
 	height: 100%;
 	width: auto;
 }