From 09fe28286bca980ff055b4e6def564dd3441853c Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Tue, 8 Sep 2020 16:30:54 +0200 Subject: [PATCH] some more work. --- src/components/layout/Layout.tsx | 2 +- src/components/layout/MagicImage.tsx | 13 ++++++- src/components/layout/Sidebar.module.sass | 46 +++++++++++++++++------ src/components/layout/Sidebar.tsx | 41 ++++++++++++++++---- 4 files changed, 81 insertions(+), 21 deletions(-) diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 19e9c8f..22b612f 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -14,7 +14,7 @@ interface LayoutProps { export default function Layout(props: LayoutProps) { return (
- +
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}
) }