From d375331f2344817ca81a99eed1e4b20716faaeea Mon Sep 17 00:00:00 2001 From: sohaib Date: Thu, 28 May 2020 20:47:17 +0000 Subject: [PATCH 1/2] reusable nav --- frontend/src/StylesGuide/variables.scss | 35 ++++ .../src/apps/main/components/navbar/index.tsx | 64 +++++--- .../apps/main/components/navbar/style.scss | 150 ++++++++++++++++-- frontend/src/apps/main/entry/index.tsx | 11 +- 4 files changed, 225 insertions(+), 35 deletions(-) create mode 100644 frontend/src/StylesGuide/variables.scss diff --git a/frontend/src/StylesGuide/variables.scss b/frontend/src/StylesGuide/variables.scss new file mode 100644 index 000000000..b992124de --- /dev/null +++ b/frontend/src/StylesGuide/variables.scss @@ -0,0 +1,35 @@ +// Fonts +$font-primary: Helvetica, Arial, sans-serif; + +// Colors +$text-primary: #000000; +$text-secondary: #ffffff; +$bg-primary: #ffffff; +$bg-secondary: #000000; + +// fluresent lights + +$blue-1: #006fff; +$blue-2: #44fdd9; +$green-1: #68ff00; +$orange-1: #ffbf00; +$yellow-1: #faff00; +$pink-2: #ff005d; + +// MediaQueries +$screen-sm: 600px; +$screen-md: 768px; +$screen-lg: 1200px; + +// animation +$transition-speed: 600ms; + +// resets + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} diff --git a/frontend/src/apps/main/components/navbar/index.tsx b/frontend/src/apps/main/components/navbar/index.tsx index 7841216a8..2f5bc1dac 100644 --- a/frontend/src/apps/main/components/navbar/index.tsx +++ b/frontend/src/apps/main/components/navbar/index.tsx @@ -1,25 +1,45 @@ -import React from "react"; -import "./style"; -import { Link } from "react-router-dom"; +import React, { useState } from "react"; +import "./style.scss"; +import { Link, NavLink } from "react-router-dom"; -export const Navbar = () => ( -
-
-
- Logo -
-
- Learn -
-
- Get Started -
-
- Git and Github +interface NavigationLink { + id: number; + name: string; + to: string; +} + +interface Props { + navitems: NavigationLink[]; +} + +export const Navbar: React.FC = ({ navitems }) => { + const [isOpen, setOpen] = useState("open"); + const navToggle = () => { + isOpen === "" ? setOpen("open") : setOpen(""); + }; + + return ( + + ); +}; diff --git a/frontend/src/apps/main/components/navbar/style.scss b/frontend/src/apps/main/components/navbar/style.scss index 63d9b7e91..da01dad62 100644 --- a/frontend/src/apps/main/components/navbar/style.scss +++ b/frontend/src/apps/main/components/navbar/style.scss @@ -1,20 +1,146 @@ -@import "../../../../common/style/variables"; +@import "../../../../StylesGuide/variables.scss"; -.navbar { - height: $navbar-height; +.Navbar { + width: 100%; + padding: 2% 10%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; position: relative; - background-color: $light; - .menu { - .item { + background-color: $bg-primary; + font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", + "Helvetica Neue", sans-serif; + + position: fixed; + top: 0; + right: 0; + .brand { + font-size: 1.2rem; + color: text-primary; + font-weight: bolder; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 15px 0; + text-decoration: none; + font-weight: bold; + color: $text-primary; + } + + .Navbar__burger { + width: 35px; + height: 35px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + + .burger__button { + width: 100%; + height: 3px; + position: absolute; + top: 50%; + right: 0; + background-color: $bg-secondary; + z-index: 5; + + &::before { + content: ""; + width: 100%; + height: 3px; + background-color: $bg-secondary; + position: absolute; + top: -10px; + right: 0; + } + + &::after { + content: ""; + width: 100%; + height: 3px; + background-color: $bg-secondary; + position: absolute; + top: 10px; + right: 0; + } + } + } + + .Navbar__list { + position: absolute; + right: 0; + width: 100%; + top: 100%; + background-color: #fff; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 5px; + transform: scaleY(0); + transform-origin: top; + transition: ease 0.3s; + opacity: 0; + + &.open { + transform: scaleY(1); + transition: ease-in-out 0.5s; + opacity: 1; + } + + .navLink { + text-decoration: none; + color: $text-primary; + max-width: 150px; text-align: center; - display: inline-block; - width: 20%; + padding: 12px; position: relative; - height: $navbar-height; - > * { + font-size: 1rem; + font-weight: 500; + + &::after { + content: ""; position: absolute; - top: 50%; - transform: translateY(-50%); + top: 100%; + left: 20%; + width: 0; + height: 1px; + background-color: $bg-secondary; + transform: center; + transition: ease-in-out 0.4s; + } + + &:hover { + &::after { + width: 60%; + } + } + } + } +} + +@media screen and (min-width: $screen-lg) { + .Navbar { + width: 100%; + padding: 10px 5%; + + .brand { + font-size: 1.4rem; + } + + .Navbar__burger { + display: none; + } + .Navbar__list { + position: initial; + flex-direction: row; + max-width: 60%; + + .navLink { + margin-left: 40px; + font-size: 1.25rem; } } } diff --git a/frontend/src/apps/main/entry/index.tsx b/frontend/src/apps/main/entry/index.tsx index 285b71b33..ee24ec358 100644 --- a/frontend/src/apps/main/entry/index.tsx +++ b/frontend/src/apps/main/entry/index.tsx @@ -12,10 +12,19 @@ const Landing = lazy(() => import("t9/apps/main/scenes/landing")); const Articles = lazy(() => import("t9/apps/main/scenes/articles")); const Learn = lazy(() => import("t9/apps/main/scenes/learn")); +// Temp data: Todo: replace with props from the store + +const navitems = [ + { id: 1, to: "/learn", name: "Learn" }, + { id: 2, to: "/getstarted", name: "Get Started" }, + { id: 3, to: "/gitgithub", name: "Git & Github" }, + { id: 4, to: "/articles", name: "Articles" }, +]; + export const App: React.SFC<{}> = () => { return ( - + From 66ee2075f0adc6e8205ca16129c29ce1d3fb2a47 Mon Sep 17 00:00:00 2001 From: sohaib Date: Thu, 28 May 2020 21:13:43 +0000 Subject: [PATCH 2/2] fixed duplicate variables.scss --- frontend/src/StylesGuide/variables.scss | 35 ------------------- .../apps/main/components/navbar/style.scss | 4 +-- frontend/src/common/style/_variables.scss | 29 ++++++++++++--- 3 files changed, 27 insertions(+), 41 deletions(-) delete mode 100644 frontend/src/StylesGuide/variables.scss diff --git a/frontend/src/StylesGuide/variables.scss b/frontend/src/StylesGuide/variables.scss deleted file mode 100644 index b992124de..000000000 --- a/frontend/src/StylesGuide/variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -// Fonts -$font-primary: Helvetica, Arial, sans-serif; - -// Colors -$text-primary: #000000; -$text-secondary: #ffffff; -$bg-primary: #ffffff; -$bg-secondary: #000000; - -// fluresent lights - -$blue-1: #006fff; -$blue-2: #44fdd9; -$green-1: #68ff00; -$orange-1: #ffbf00; -$yellow-1: #faff00; -$pink-2: #ff005d; - -// MediaQueries -$screen-sm: 600px; -$screen-md: 768px; -$screen-lg: 1200px; - -// animation -$transition-speed: 600ms; - -// resets - -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} diff --git a/frontend/src/apps/main/components/navbar/style.scss b/frontend/src/apps/main/components/navbar/style.scss index da01dad62..de1fa6b52 100644 --- a/frontend/src/apps/main/components/navbar/style.scss +++ b/frontend/src/apps/main/components/navbar/style.scss @@ -1,4 +1,4 @@ -@import "../../../../StylesGuide/variables.scss"; +@import "../../../../common/style/variables"; .Navbar { width: 100%; @@ -121,7 +121,7 @@ } } -@media screen and (min-width: $screen-lg) { +@media screen and (min-width: $large) { .Navbar { width: 100%; padding: 10px 5%; diff --git a/frontend/src/common/style/_variables.scss b/frontend/src/common/style/_variables.scss index 30ea8bc12..da37e3396 100644 --- a/frontend/src/common/style/_variables.scss +++ b/frontend/src/common/style/_variables.scss @@ -1,13 +1,18 @@ -// TODO: update color palette -// colors +// Colors $primary: #1c8ad8; $secondary: #dc004e; $dark: #000; $light: #fff; $link: #1890ff; -// TODO: update responsiveness range -// responsiveness +$text-primary: #000000; +$text-secondary: #ffffff; +$bg-primary: #ffffff; +$bg-secondary: #000000; + +// MediaQueries +$X-large: 1600px; +$large: 1200px; $regular: 800px; $medium: 600px; $small: 420px; @@ -15,3 +20,19 @@ $x-small: 330px; // others $navbar-height: 60px; + +// Fonts +$font-primary: Helvetica, Arial, sans-serif; + +// animation +$transition-speed: 600ms; + +// resets + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +}