some more work.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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(" ")}>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}>
|
||||
{content}
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<FontAwesomeIcon icon={props.icon} />
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user