-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from nickovchinnikov/login
Fix layout and Themes
- Loading branch information
Showing
11 changed files
with
253 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,122 +1,73 @@ | ||
| import { FC } from "react"; | ||
| import { useState, useLayoutEffect, useEffect, FC } from "react"; | ||
| import Link from "next/link"; | ||
| import styled from "@emotion/styled"; | ||
| import { ThemeProvider } from "@emotion/react"; | ||
|
|
||
| import { Themes } from "@/styles/themes"; | ||
|
|
||
| import { Logo } from "@/components/Logo"; | ||
| import { Input } from "@/components/Input"; | ||
| import { IconButton } from "@/components/IconButton"; | ||
| import { StyledLink } from "@/components/StyledLink"; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: grid; | ||
| gap: 0.1rem; | ||
| color: ${({ theme }) => theme.font.regular}; | ||
| background-color: ${({ theme }) => theme.background}; | ||
| padding: 0.5rem; | ||
| grid-template-areas: | ||
| "header nav" | ||
| "search search" | ||
| "content content" | ||
| "footer footer"; | ||
| nav { | ||
| flex-direction: row; | ||
| justify-content: flex-end; | ||
| gap: 5vmin; | ||
| } | ||
| @media (min-width: 500px) { | ||
| grid-template-columns: 1fr 3fr; | ||
| } | ||
| @media (min-width: 960px) { | ||
| grid-template-columns: 1fr 4fr 2fr; | ||
| grid-template-areas: | ||
| "header search nav" | ||
| "content content content" | ||
| "footer footer footer"; | ||
| } | ||
| `; | ||
| import { | ||
| Wrapper, | ||
| LogoLink, | ||
| StyledLogo, | ||
| MainNav, | ||
| SearchInput, | ||
| Content, | ||
| Footer, | ||
| } from "./components"; | ||
|
|
||
| const LogoLink = styled(StyledLink)` | ||
| padding-right: 1vw; | ||
| `; | ||
| const useIsomorphicLayoutEffect = | ||
| typeof window !== "undefined" ? useLayoutEffect : useEffect; | ||
|
|
||
| const StyledLogo = styled(Logo)` | ||
| grid-area: header; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| height: 4rem; | ||
| & .logo_full { | ||
| display: none; | ||
| } | ||
| @media (min-width: 560px) { | ||
| & .logo_short { | ||
| display: none; | ||
| } | ||
| & .logo_full { | ||
| display: inline; | ||
| } | ||
| } | ||
| `; | ||
| export const Layout: FC = ({ children }) => { | ||
| const [isDark, setIsDark] = useState(true); | ||
|
|
||
| const MainNav = styled.nav` | ||
| grid-area: nav; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| margin: 0 2vmin; | ||
| `; | ||
| const toggleDark = () => { | ||
| localStorage.setItem("theme", isDark ? "light" : "dark"); | ||
| setIsDark(!isDark); | ||
| }; | ||
|
|
||
| const SearchInput = styled(Input)` | ||
| grid-area: search; | ||
| width: 100%; | ||
| height: 4rem; | ||
| `; | ||
| useIsomorphicLayoutEffect(() => { | ||
| const isDark = | ||
| Boolean(localStorage.getItem("theme") === "dark") || | ||
| window.matchMedia("prefers-color-scheme: dark").matches; | ||
|
|
||
| const Content = styled.main` | ||
| grid-area: content; | ||
| `; | ||
| setIsDark(isDark); | ||
| }, []); | ||
|
|
||
| const Footer = styled.footer` | ||
| grid-area: footer; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| height: 5rem; | ||
| `; | ||
| const theme = Themes[isDark ? "dark" : "light"]; | ||
|
|
||
| type Props = { | ||
| isDark: boolean; | ||
| onThemeToggle: () => void; | ||
| return ( | ||
| <ThemeProvider theme={theme}> | ||
| <Wrapper> | ||
| <Link href="/" passHref> | ||
| <LogoLink> | ||
| <StyledLogo size={3}> | ||
| <span className="logo_short">C8X</span> | ||
| <span className="logo_full">CoursesBox</span> | ||
| </StyledLogo> | ||
| </LogoLink> | ||
| </Link> | ||
| <MainNav> | ||
| <Link href="/all" passHref> | ||
| <StyledLink>All</StyledLink> | ||
| </Link> | ||
| <Link href="/login" passHref> | ||
| <IconButton name="Login" size={1} /> | ||
| </Link> | ||
| <IconButton | ||
| name={isDark ? "Moon" : "Sun"} | ||
| size={1} | ||
| onClick={toggleDark} | ||
| /> | ||
| </MainNav> | ||
| <SearchInput icon="Search" placeholder="Search" onChange={() => null} /> | ||
| <Content>{children}</Content> | ||
| <Footer> | ||
| © {new Date().getFullYear()} NickOvchinnikov. All rights reserved. | ||
| </Footer> | ||
| </Wrapper> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export const Layout: FC<Props> = ({ children, isDark, onThemeToggle }) => ( | ||
| <Wrapper> | ||
| <Link href="/" passHref> | ||
| <LogoLink> | ||
| <StyledLogo size={3}> | ||
| <span className="logo_short">C8X</span> | ||
| <span className="logo_full">CoursesBox</span> | ||
| </StyledLogo> | ||
| </LogoLink> | ||
| </Link> | ||
| <MainNav> | ||
| <Link href="/all" passHref> | ||
| <StyledLink>All</StyledLink> | ||
| </Link> | ||
| <Link href="/news" passHref> | ||
| <StyledLink>News</StyledLink> | ||
| </Link> | ||
| <IconButton | ||
| name={isDark ? "Moon" : "Sun"} | ||
| size={1} | ||
| onClick={onThemeToggle} | ||
| /> | ||
| </MainNav> | ||
| <SearchInput icon="Search" placeholder="Search" onChange={() => null} /> | ||
| <Content>{children}</Content> | ||
| <Footer> | ||
| © {new Date().getFullYear()} NickOvchinnikov. All rights reserved. | ||
| </Footer> | ||
| </Wrapper> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
82d94d7There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
coursesbox – ./
coursesbox-nickovchinnikov.vercel.app
coursesbox-git-master-nickovchinnikov.vercel.app
coursesbox.vercel.app