Browse Source

some more work.

main
Gisle Aune 4 years ago
parent
commit
09fe28286b
  1. 2
      src/components/layout/Layout.tsx
  2. 13
      src/components/layout/MagicImage.tsx
  3. 44
      src/components/layout/Sidebar.module.sass
  4. 41
      src/components/layout/Sidebar.tsx

2
src/components/layout/Layout.tsx

@ -14,7 +14,7 @@ interface LayoutProps {
export default function Layout(props: LayoutProps) {
return (
<div className={styles.wrapper}>
<MagicImage opacity={0.25} fixed src="https://files.aiterp.net/misc/renders/2020-08-30%20-%20Archive.jpg">
<MagicImage opacity={0.50} alignH="right" fixed src="https://files.aiterp.net/misc/renders/2020-08-30%20-%20Archive.jpg">
<Sidebar />
<div className={styles.container}>
<Head>

13
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 (
<div className={containerClass.join(" ")}>

44
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
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

41
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 (
<div className={styles.sidebar}>
<SidebarItem icon={faListAlt} />
<SidebarItem icon={faArchive} />
<SidebarItem icon={faHashtag} skip />
<SidebarItem icon={faListAlt} href="/story/" text="Story" />
<SidebarItem icon={faArchive} href="/logs/" text="Logs" />
<SidebarItem icon={faAddressBook} href="/data/characters/" text="Characters" />
<SidebarItem icon={faHashtag} href="/data/channels/" text="Channels" />
<SidebarItem icon={faFileAlt} href="/data/files/" text="Files" />
<SidebarItem icon={faHistory} href="/data/changes/" text="History" />
<SidebarItem icon={faPlus} text="Add" skip />
<SidebarItem icon={faRadiation} text="Danger Zone" />
<SidebarItem icon={faUser} text="Logout [Gisle]" />
</div>
)
}
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 = (
<>
<div className={styles.sidebarItemIcon}>
<FontAwesomeIcon icon={props.icon} />
</div>
<div className={styles.sidebarItemText}>{props.text}</div>
</>
);
if (props.href) {
return (
<a href={props.href}>
<div className={className}>
<FontAwesomeIcon icon={props.icon} />
{content}
</div>
</a>
)
}
return (
<div className={className}>
{content}
</div>
)
}
Loading…
Cancel
Save