diff --git a/src/components/layout/MagicImage.tsx b/src/components/layout/MagicImage.tsx
index eeec10e..d03e424 100644
--- a/src/components/layout/MagicImage.tsx
+++ b/src/components/layout/MagicImage.tsx
@@ -4,6 +4,8 @@ import styles from "./MagicImage.module.sass";
interface MagicImageProps {
src: string
+ alignH?: "left" | "center" | "right"
+ alignV?: "top" | "middle" | "bottom"
full?: boolean
banner?: boolean
fixed?: boolean
@@ -29,8 +31,15 @@ export default function MagicImage(props: MagicImageProps) {
overlayClass.push(styles.banner)
}
- const imageStyle = {background: `url(${JSON.stringify(props.src)}) no-repeat fixed center`};
- const overlayStyle = {backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`};
+ const imageStyle = {
+ background: `url(${JSON.stringify(props.src)}) no-repeat fixed center`,
+ backgroundPositionX: props.alignH || "left",
+ backgroundPositionY: props.alignV || "middle",
+ };
+
+ const overlayStyle = {
+ backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`,
+ };
return (
diff --git a/src/components/layout/Sidebar.module.sass b/src/components/layout/Sidebar.module.sass
index 09e460a..56e04f8 100644
--- a/src/components/layout/Sidebar.module.sass
+++ b/src/components/layout/Sidebar.module.sass
@@ -1,25 +1,49 @@
-div.sidebar
+.sidebar
position: fixed
- width: 4ch
- height: calc(100%)
+ width: 4.5ch
+ height: 100%
background-color: black
- display: flexbox
- flex-direction: row
- justify-content: center
+ display: flex
+ flex-direction: column
- &:hover .sidebarItem
- color: #777
+ transition: 250ms
+
+ &:hover
+ width: 20ch;
+
+ .sidebarItem
+ color: #777
+
+ .sidebarItemText
+ opacity: 1
div.sidebarItem
color: white
- padding: 0.5em
- padding-bottom: 0
+ padding-top: 0.333em
transition: 250ms
color: #333
+ white-space: nowrap
+
+ svg
+ margin-left: 0.5ch
+ height: 1.5em
&:hover
background-color: #222
color: #fc1 !important
+
+ .sidebarItemIcon
+ display: inline-block
+ height: 2em
+ width: 3.5ch
+ text-align: center
+ .sidebarItemText
+ display: inline-block
+ vertical-align: top
+ opacity: 0
+ height: 2em
+ margin-left: 1ch
+
div.sidebarItemSkip
- margin-top: auto
+ margin: auto 0 0 0
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index f168664..15a0bf7 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconDefinition, faListAlt } from "@fortawesome/free-regular-svg-icons";
-import { faArchive, faDatabase, faAlignJustify, faHashtag } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition, faListAlt, faMap, faAddressBook, faUser, faFileArchive, faFolderOpen, faFolder, faFileAlt } from "@fortawesome/free-regular-svg-icons";
+import { faArchive, faDatabase, faAlignJustify, faHashtag, faHistory, faPlus, faPen, faRadiation } from "@fortawesome/free-solid-svg-icons";
import styles from "./Sidebar.module.sass";
@@ -9,27 +9,54 @@ export function Sidebar() {
return (
-
-
-
+
+
+
+
+
+
+
+
+
)
}
interface SidebarItemProps {
icon: IconDefinition
+ text: string
+ href?: string
skip?: boolean
}
export function SidebarItem(props: SidebarItemProps) {
let className = styles.sidebarItem;
- if (props.skip) {
+ if (props.skip === true) {
className += " " + styles.sidebarItemSkip;
}
+ const content = (
+ <>
+
+
+
+
{props.text}
+ >
+ );
+
+ if (props.href) {
+ return (
+
+
+ {content}
+
+
+ )
+ }
+
return (
-
+ {content}
)
}