Skip to content

Commit

Permalink
feat(project): add footer from config
Browse files Browse the repository at this point in the history
  • Loading branch information
royschut committed Jun 8, 2021
1 parent df7ba35 commit ded5171
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 178 deletions.
18 changes: 17 additions & 1 deletion src/components/Layout/Layout.module.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
@use '../../styles/variables';
@use '../../styles/theme';

.Layout {
.layout {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
flex: 1;
}
.footer {
color: var(--primary-color);
font-family: var(--body-alt-font-family);
font-size: 16px;
letter-spacing: 0.15px;
text-align: center;
padding: 20px 40px;
line-height: 18px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
}
47 changes: 25 additions & 22 deletions src/components/Layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,34 +15,37 @@ type LayoutProps = {
};

const Layout: FC<LayoutProps> = ({ children }) => {
const { menu, assets, options } = useContext(ConfigContext);
const { menu, assets, options, footerText } = useContext(ConfigContext);
const { blurImage } = useContext(UIStateContext);
const [sideBarOpen, setSideBarOpen] = useState(false);
const hasDynamicBlur = options.dynamicBlur === true;

return (
<div className={styles.layout}>
{hasDynamicBlur && blurImage && <DynamicBlur url={blurImage} transitionTime={1} debounceTime={350} />}
<Header
onMenuButtonClick={() => setSideBarOpen(true)}
playlistMenuItems={menu.map((item) => (
<ButtonLink key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} />
))}
logoSrc={assets.banner}
/>
<Sidebar
isOpen={sideBarOpen}
onClose={() => setSideBarOpen(false)}
playlistMenuItems={menu.map((item) => (
<MenuButton
key={item.playlistId}
label={item.label}
to={`/p/${item.playlistId}`}
tabIndex={sideBarOpen ? 0 : -1}
/>
))}
/>
{children}
<div className={styles.main}>
{hasDynamicBlur && blurImage && <DynamicBlur url={blurImage} transitionTime={1} debounceTime={350} />}
<Header
onMenuButtonClick={() => setSideBarOpen(true)}
playlistMenuItems={menu.map((item) => (
<ButtonLink key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} />
))}
logoSrc={assets.banner}
/>
<Sidebar
isOpen={sideBarOpen}
onClose={() => setSideBarOpen(false)}
playlistMenuItems={menu.map((item) => (
<MenuButton
key={item.playlistId}
label={item.label}
to={`/p/${item.playlistId}`}
tabIndex={sideBarOpen ? 0 : -1}
/>
))}
/>
{children}
</div>
{!!footerText && <div className={styles.footer}>{footerText}</div>}
</div>
);
};
Expand Down
162 changes: 84 additions & 78 deletions src/components/Layout/__snapshots__/Layout.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,87 @@

exports[`<Layout /> renders layout 1`] = `
<div>
<div>
<header
class="header static"
<div
class="layout"
>
<div
class="main"
>
<header
class="header static"
>
<div
class="container"
>
<div
class="menu"
>
<div
aria-label="open menu"
class="iconButton"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="icon"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0 0h24v24H0V0z"
fill="none"
/>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
/>
</g>
</svg>
</div>
</div>
<nav
aria-label="menu"
class="nav"
>
<a
aria-current="page"
class="link active"
href="/"
>
<span>
Home
</span>
</a>
<a
class="link"
href="/u"
>
<span>
Settings
</span>
</a>
</nav>
<div
class="search"
/>
</div>
</header>
<div
class="backdrop"
/>
<div
class="container"
class="sidebar"
>
<div
class="menu"
class="heading"
>
<div
aria-label="open menu"
aria-label="close menu"
class="iconButton"
role="button"
tabindex="0"
tabindex="-1"
>
<svg
aria-hidden="true"
Expand All @@ -27,103 +93,43 @@ exports[`<Layout /> renders layout 1`] = `
>
<g>
<path
d="M0 0h24v24H0V0z"
fill="none"
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
<path
d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
d="M0 0h24v24H0z"
fill="none"
/>
</g>
</svg>
</div>
</div>
<nav
aria-label="menu"
class="nav"
class="group"
>
<a
aria-current="page"
class="link active"
class="menuButton active"
href="/"
tabindex="-1"
>
<span>
Home
</span>
</a>
<hr
class="divider"
/>
<a
class="link"
class="menuButton"
href="/u"
tabindex="-1"
>
<span>
Settings
</span>
</a>
</nav>
<div
class="search"
/>
</div>
</header>
<div
class="backdrop"
/>
<div
class="sidebar"
>
<div
class="heading"
>
<div
aria-label="close menu"
class="iconButton"
role="button"
tabindex="-1"
>
<svg
aria-hidden="true"
class="icon"
focusable="false"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</g>
</svg>
</div>
</div>
<nav
class="group"
>
<a
aria-current="page"
class="menuButton active"
href="/"
tabindex="-1"
>
<span>
Home
</span>
</a>
<hr
class="divider"
/>
<a
class="menuButton"
href="/u"
tabindex="-1"
>
<span>
Settings
</span>
</a>
</nav>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ded5171

Please sign in to comment.