diff --git a/components/Header.tsx b/components/Header.tsx index 0f1d3ca..70fbe5a 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -2,26 +2,19 @@ import {FC} from "react"; import {LogoHolder} from "./LogoHolder"; import {SidebarToggleButton} from "./SidebarToggleButton"; import {useLogosTheme} from "../context/ThemeProvider"; -import {Stack} from "./design-system/Stack/Stack"; interface IProps{ - toggleSidebar: () => void; + className?: string; + onSidebarToggle: () => void; } -export const Header: FC = (props) => { - const {toggleSidebar} = props; +export const Header: FC = ({className="", onSidebarToggle}) => { const {toggleMode} = useLogosTheme(); return ( -
- - -
-
- -
- +
+ +
) } \ No newline at end of file diff --git a/components/LogoHolder.tsx b/components/LogoHolder.tsx index 379d882..95d02db 100644 --- a/components/LogoHolder.tsx +++ b/components/LogoHolder.tsx @@ -9,7 +9,12 @@ export interface ILogosHolderProps{ } export const LogoHolder: FC> = ({onClick, filePath, alt, title, children}) => ( -
+
) \ No newline at end of file diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index b745085..8f86b3f 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -1,10 +1,18 @@ -import {FC, PropsWithChildren} from "react"; +import {FC, PropsWithChildren, useEffect, useState} from "react"; import {INavigationItemProps} from "../types/data.types"; import Link from "next/link"; +import {SidebarToggleButton} from "./SidebarToggleButton"; +import CloseIcon from "/public/assets/sidebar-icon-close.svg"; +import {useViewport} from "../utils/ui-utils"; const sidebar: INavigationItemProps = require("../public/compiled/sidebar.tree.min.json"); interface ISidebarProps{ + className?: string; + onClose?: () => void; + onOpen?: () => void; + initialHide?: boolean; + hide: boolean; } interface IMenuProps{ @@ -56,14 +64,33 @@ const Menu: FC = (props) => { } export const Sidebar: FC = (props) => { + const {className = "", onClose = ()=>{}, onOpen = () => {}, initialHide = false, hide} = props; const mainItems = sidebar.children.filter((c) => c.children.length===0) const subItems = sidebar.children.filter((c) => c.children.length!==0); + const [firstTime, setFirstTime] = useState(false); + + const isOpen = !((!firstTime&&initialHide) || hide); + const hideClass = isOpen? "":"hide" + + useEffect(() => { + if(hide){ + setFirstTime(true); + } + if(isOpen){ + onOpen(); + } + }, [hide, isOpen]) return ( - +
+ +
) } \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index 2242d59..cd20621 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import type {AppProps} from 'next/app' import {PageComponent} from "../types/page"; import {LogosThemeProvider} from "../context/ThemeProvider"; +import Head from 'next/head' interface IProps extends AppProps{ Component: PageComponent @@ -13,6 +14,10 @@ function App({Component, pageProps}: IProps) { const {children, ...rest} = pageProps; return ( + + Logos site builder + + {children} ); diff --git a/public/assets/sidebar-icon-close.svg b/public/assets/sidebar-icon-close.svg new file mode 100644 index 0000000..ddd6c75 --- /dev/null +++ b/public/assets/sidebar-icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/styles/globals.css b/styles/globals.css index d97a968..5c935f9 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,61 +1,50 @@ +:root{ + --bg-color: var(--dark-background-color); + --txt-color: var(--dark-text-color); + --hl-color: var(--dark-highlight-color); + --ff: var(--fontFamily); +} + *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } -body, body.dark{ - background: var(--dark-background-color); - color: var(--dark-text-color); - font-family: var(--fontFamily); +html, body{ + +} + +body{ + background: var(--bg-color); + color: var(--txt-color); + font-family: var(--ff); } body.light{ - background: var(--light-background-color); - color: var(--light-text-color); - font-family: var(--fontFamily); + --bg-color: var(--light-background-color); + --txt-color: var(--light-text-color); + --hl-color: var(--light-highlight-color); } -a, a:visited, a:hover, -body.dark a, body.dark a:visited, body.dark a:hover{ - color: var(--dark-highlight-color); +a, a:visited, a:hover{ + color: var(--hl-color); } -body.light a, body.light a:visited, body.light a:hover{ - color: var(--dark-highlight-color); -} - -svg, svg *, -body.dark svg, body.dark svg *{ - fill: var(--dark-text-color); -} - -body.light svg, body.light svg *{ - fill: var(--light-text-color); +svg, svg *{ + fill: var(--txt-color); } input[type="text"]{ - background: var(--dark-background-color); - color: var(--dark-text-color); + background: var(--bg-color); + color: var(--txt-color); padding: 0.5em; border: 1px solid; } -body.light input[type="text"]{ - background: var(--light-background-color); - color: var(--light-text-color); -} - ::placeholder, :-ms-input-placeholder, ::-ms-input-placeholder { - color: var(--dark-text-color); - opacity: 1; -} - -body.light ::placeholder, -body.light :-ms-input-placeholder, -body.light ::-ms-input-placeholder { - color: var(--light-text-color); + color: var(--txt-color); opacity: 1; } @@ -67,19 +56,10 @@ nav a, nav a:visited, nav a:hover{ text-decoration: none; - color: var(--dark-text-color) !important; + color: var(--txt-color) !important; text-transform: capitalize; } -body.light nav a, -body.light nav a:visited, -body.light nav a:hover{ - text-decoration: none; - color: var(--light-text-color) !important; - text-transform: capitalize; -} - - .default-sidebar .sidebar-menu > li.level-0{ margin-bottom: 1em; } @@ -88,9 +68,12 @@ body.light nav a:hover{ margin-bottom: 1em; } - /*this part should be coming from the content but for now for sake of the look*/ h1,h2,h3,h4,h5,h6{ font-size: inherit !important; /*font-weight: normal;*/ +} + +pre{ + overflow-x: auto; } \ No newline at end of file diff --git a/templates/Deafult/DefaultTemplate.tsx b/templates/Deafult/DefaultTemplate.tsx index 9ce7621..ac7d126 100644 --- a/templates/Deafult/DefaultTemplate.tsx +++ b/templates/Deafult/DefaultTemplate.tsx @@ -1,15 +1,13 @@ -import {FC, useState} from "react"; +import {FC, useEffect, useState} from "react"; import {TTemplateProps} from "../../types/ui.types"; import {Sidebar} from "../../components/Sidebar"; import ReactMarkdown from "react-markdown"; import {IMarkdown} from "../../types/data.types"; import {Header} from "../../components/Header"; -import {Stack} from "../../components/design-system/Stack/Stack"; +import {SearchInput} from "../../components/SearchInput"; import style from "./Style.module.css"; -import {SearchInput} from "../../components/SearchInput"; - interface IProps{ markdown: IMarkdown; } @@ -17,33 +15,46 @@ interface IProps{ export const DefaultTemplate_Markdown: FC> = (props) => { const {append = false, markdown} = props; const [sidebarHide, setSideBarHide] = useState(false); + const [sidebarOpen, setSidebarOpen] = useState(false); + + const onSidebarOpen = () => { + setSidebarOpen(true); + } + + const onSidebarClose = () => { + setSidebarOpen(false); + setSideBarHide(true) + } return (
-
setSideBarHide(!sidebarHide)}/> - {!append&&props.children} -
- -
-
+
setSideBarHide(!sidebarHide)}/> +
+
+
+ + +
+
+
- -
- -
- { - !sidebarHide&& - - } -
-
- - {markdown.content} - +
+ {!append&&props.children} + + {markdown.content} + + {append&&props.children} +
- - {append&&props.children} +
) } \ No newline at end of file diff --git a/templates/Deafult/Style.module.css b/templates/Deafult/Style.module.css index 280dc67..1546ca8 100644 --- a/templates/Deafult/Style.module.css +++ b/templates/Deafult/Style.module.css @@ -1,29 +1,44 @@ @value headerGapT: 300px; @value headerGapB: 4em; @value containerGapT: 2em; +@value mainGapT: 3em; @value mainGapB: 20em; +@value pagePaddingT: containerGapT; +@value pagePaddingR: inherit; +@value pagePaddingB: inherit; +@value pagePaddingL: inherit; .container{ max-width: 1200px; margin: auto; - padding-top: containerGapT; + padding-top: pagePaddingT; + padding-bottom: pagePaddingB; + padding-right: pagePaddingR; + padding-left: pagePaddingL; } -.container :global(.sidebar-toggle-button){ +.mainContainer{ + display: flex; + flex-direction: row; +} + +.header{ + text-align: center; +} + +.header :global(.sidebar-toggle-button){ position: fixed; - top: containerGapT; } .banner{ - /*background: var(--dark-background-color);*/ - position: sticky; z-index: 9999; padding-bottom: headerGapB; padding-top: headerGapT; - top: calc(calc(-1 * headerGapT) + containerGapT) + top: calc(calc(-1 * headerGapT) + containerGapT); } -.container main{ +.container main .content{ + padding-top: mainGapT; padding-bottom: mainGapB; } @@ -35,13 +50,9 @@ width: 50%; } -.sidebarWrapper{ +.searchInput{ position: sticky; - top: calc(headerGapB + 1em); -} - -.headerGap{ - + top: containerGapT; } .searchInput input{ @@ -54,8 +65,90 @@ .container nav > ul{ padding-left: 0; + padding-top: 0; + margin-top: 0; } .container ul, .container li{ list-style: none; +} + +/*SIDEBAR*/ +.sidebarWrapper{ + padding-top: calc(mainGapT - 1em) +} +.sidebar{ + position: sticky; + top: calc(headerGapB + 3em); + padding-top: mainGapT; +} + +.sidebar:global(.hide) nav{ + display: none; +} + +.sidebarDefault{ +} + +.sidebarNarrow{ + display: none; +} + +.sidebar :global(.sidebar-close-icon){ + display: none; +} + +@media (max-width:600px) { + @value pagePaddingT: 6em; + @value pagePaddingR: 4em; + @value pagePaddingB: 3em; + @value pagePaddingL: 4em; + + @value headerGapT: 100px; + @value headerGapB: 4em; + + .sidebarDefault{ + display: none; + } + .sidebarNarrow{ + display: block; + } + + .searchInput.withOpenSidebar{ + z-index: -1; + } + + .sidebar :global(.sidebar-close-icon){ + display: block; + position: fixed; + top: pagePaddingT; + transform: translate(9px, 10px); + } + + + .sidebar nav{ + position: fixed; + background: var(--bg-color); + top: 0; + left: 0; + width: 100vw; + height: 100vh; + padding-top: calc(pagePaddingT + headerGapT); + padding-bottom: pagePaddingB; + padding-right: pagePaddingR; + padding-left: pagePaddingL; + } + + .sidebar :global(.sidebar-toggle-button){ + z-index: 999999999; + } + + .searchInput{ + /*z-index: -1;*/ + } + + .col_1_4, .col_2_4{ + width: 100%; + } + } \ No newline at end of file diff --git a/utils/ui-utils.ts b/utils/ui-utils.ts new file mode 100644 index 0000000..cc3d8cc --- /dev/null +++ b/utils/ui-utils.ts @@ -0,0 +1,37 @@ +import {useEffect, useState} from "react"; + +type TBox = { + width: number; + height: number; +} + +export const useWindowDimensions = () => { + //default SSR + const [state, setState] = useState({width: 1200, height: 800}); + + const onResize = () => { + setState({ + width: window.innerWidth, + height: window.innerHeight + }); + } + + useEffect(() => { + onResize(); + window.addEventListener("resize", onResize); + return () => window.removeEventListener("resize", onResize); + }, []); + + return state; +} + +interface IViewportState{ + isNarrow: boolean; +} + +export const useViewport = (): IViewportState => { + const {width} = useWindowDimensions(); + return { + isNarrow: width <= 600 + } +} \ No newline at end of file