some more work.

4 years ago · 09fe28286b
4 changed files with 81 additions and 21 deletions
--- 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 (
    <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>
--- 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 (
    <div className={containerClass.join(" ")}>
--- 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
+  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
--- 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 (
    <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>
  )
 }