From ea4ea31788450a5c61d0b8f4d01210805077bf38 Mon Sep 17 00:00:00 2001 From: Z2W00 Date: Wed, 29 Jun 2022 20:02:48 +0100 Subject: [PATCH 1/5] Sticky navigation box for guides page, made the navigation bar sticky --- components/Navigation.module.scss | 2 ++ components/Navigation.tsx | 4 ++-- components/NavigationAnchor.module.scss | 28 +++++++++++++++++++++++++ components/NavigationAnchor.tsx | 24 +++++++++++++++++++++ pages/global.scss | 1 + pages/guides.tsx | 4 ++++ 6 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 components/NavigationAnchor.module.scss create mode 100644 components/NavigationAnchor.tsx diff --git a/components/Navigation.module.scss b/components/Navigation.module.scss index 1becdca..38478b3 100644 --- a/components/Navigation.module.scss +++ b/components/Navigation.module.scss @@ -3,6 +3,8 @@ background-color: var(--clr-grey-800); color: var(--clr-grey-100); font-size: var(--fs-fixed-600); + position: fixed; + z-index: 1; &_container { margin: 0 auto; diff --git a/components/Navigation.tsx b/components/Navigation.tsx index c1aa5fd..2f12230 100644 --- a/components/Navigation.tsx +++ b/components/Navigation.tsx @@ -7,9 +7,9 @@ const Navigation = () => (
- Home + Home Leaderboards - Resources + Resources
diff --git a/components/NavigationAnchor.module.scss b/components/NavigationAnchor.module.scss new file mode 100644 index 0000000..e30d1c5 --- /dev/null +++ b/components/NavigationAnchor.module.scss @@ -0,0 +1,28 @@ +.NavigationAnchor{ + width: max-content; + height: max-content; + font-size: 1.1rem; + background-color: var(--clr-grey-850); + padding-right: 1em; + border-color:var(--clr-grey-100) ; + border-style: solid; + border-width: thin; + position: sticky; + top: 4.3em; + // 4.3 so the navigation box lines up under the navigation bar which is also sticky (I wasn't sure if there was a better way to line them up than using ems) + z-index: 1; + + + a:link{ + color: var(--clr-grey-100); + font-weight: normal; + } + a:visited{ + color: var(--clr-grey-100); + font-weight: normal; + } + + a:hover{ + border-bottom-style: solid; + } +} \ No newline at end of file diff --git a/components/NavigationAnchor.tsx b/components/NavigationAnchor.tsx new file mode 100644 index 0000000..6475661 --- /dev/null +++ b/components/NavigationAnchor.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import styles from './NavigationAnchor.module.scss' + +type Props = { + list1?: string + list2?: string + list3?: string + list4?: string +} +//hardcoding the number of elements in the list should be fine because this module is only be used once (in the guides page) + +const NavigationAnchor = ({list1,list2,list3,list4,}: Props) => ( +
+ +
+) + + +export default NavigationAnchor diff --git a/pages/global.scss b/pages/global.scss index 2d5ea33..c3d21d2 100644 --- a/pages/global.scss +++ b/pages/global.scss @@ -44,6 +44,7 @@ --clr-accent-500: hsl(32, 98%, 53%); --clr-grey-900: hsl(0, 0%, 7%); + --clr-grey-850: hsl(0, 0%, 14%); --clr-grey-800: hsl(0, 0%, 20%); --clr-grey-700: hsl(0, 0%, 41%); --clr-grey-200: hsl(0, 0%, 87%); diff --git a/pages/guides.tsx b/pages/guides.tsx index 1dc619d..1516a65 100644 --- a/pages/guides.tsx +++ b/pages/guides.tsx @@ -3,12 +3,16 @@ import Layout from '../components/Layout' import Banner from '../components/Banner'; import Button from '../components/ButtonPrimary'; import Card from '../components/Card' +import NavigationAnchor from '../components/NavigationAnchor'; const GuidesPage = () => ( Guides +

Hehehaha

+ Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly + Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly ); From 0542372b22e92f217719b296eec6341b54384648 Mon Sep 17 00:00:00 2001 From: Z2W00 Date: Wed, 29 Jun 2022 20:23:22 +0100 Subject: [PATCH 2/5] actually nevermind idk how to make the navigation bar sticky --- components/Navigation.module.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/Navigation.module.scss b/components/Navigation.module.scss index 38478b3..1becdca 100644 --- a/components/Navigation.module.scss +++ b/components/Navigation.module.scss @@ -3,8 +3,6 @@ background-color: var(--clr-grey-800); color: var(--clr-grey-100); font-size: var(--fs-fixed-600); - position: fixed; - z-index: 1; &_container { margin: 0 auto; From 94cc5bad74e6dfd39696685c9a229a278d9342e3 Mon Sep 17 00:00:00 2001 From: Z2W00 Date: Sun, 3 Jul 2022 15:09:14 +0100 Subject: [PATCH 3/5] renamed to SIdeNav and resources --- components/{NavigationAnchor.module.scss => SideNav.scss} | 2 +- components/{NavigationAnchor.tsx => SideNav.tsx} | 4 ++-- pages/{guides.tsx => resources.tsx} | 3 +-- 3 files changed, 4 insertions(+), 5 deletions(-) rename components/{NavigationAnchor.module.scss => SideNav.scss} (96%) rename components/{NavigationAnchor.tsx => SideNav.tsx} (84%) rename pages/{guides.tsx => resources.tsx} (90%) diff --git a/components/NavigationAnchor.module.scss b/components/SideNav.scss similarity index 96% rename from components/NavigationAnchor.module.scss rename to components/SideNav.scss index e30d1c5..7ab7dd3 100644 --- a/components/NavigationAnchor.module.scss +++ b/components/SideNav.scss @@ -1,4 +1,4 @@ -.NavigationAnchor{ +.SideNav{ width: max-content; height: max-content; font-size: 1.1rem; diff --git a/components/NavigationAnchor.tsx b/components/SideNav.tsx similarity index 84% rename from components/NavigationAnchor.tsx rename to components/SideNav.tsx index 6475661..77701dd 100644 --- a/components/NavigationAnchor.tsx +++ b/components/SideNav.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './NavigationAnchor.module.scss' +import styles from './SideNav.module.scss' type Props = { list1?: string @@ -10,7 +10,7 @@ type Props = { //hardcoding the number of elements in the list should be fine because this module is only be used once (in the guides page) const NavigationAnchor = ({list1,list2,list3,list4,}: Props) => ( -
+
  • {list1}
  • {list2}
    • diff --git a/pages/guides.tsx b/pages/resources.tsx similarity index 90% rename from pages/guides.tsx rename to pages/resources.tsx index 1516a65..0a830cb 100644 --- a/pages/guides.tsx +++ b/pages/resources.tsx @@ -1,9 +1,8 @@ -import Link from 'next/link' import Layout from '../components/Layout' import Banner from '../components/Banner'; import Button from '../components/ButtonPrimary'; import Card from '../components/Card' -import NavigationAnchor from '../components/NavigationAnchor'; +import NavigationAnchor from '../components/SideNav'; const GuidesPage = () => ( From 9c9009a63e65a97ace9b7e5d750da5ec9b0d6243 Mon Sep 17 00:00:00 2001 From: Z2W00 Date: Sun, 3 Jul 2022 15:14:04 +0100 Subject: [PATCH 4/5] guides > resources --- components/Banner.module.scss | 2 +- components/Navigation.tsx | 2 +- components/{SideNav.scss => SideNav.module.scss} | 0 pages/resources.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename components/{SideNav.scss => SideNav.module.scss} (100%) diff --git a/components/Banner.module.scss b/components/Banner.module.scss index 3f3bcf6..d148ae6 100644 --- a/components/Banner.module.scss +++ b/components/Banner.module.scss @@ -13,7 +13,7 @@ font-weight: bold; position: relative; top: 40vh; - margin-left: 85vw; + text-align: right; margin-right: 4vw; text-decoration: underline; text-underline-offset: 0.3em; diff --git a/components/Navigation.tsx b/components/Navigation.tsx index 2f12230..af4aa0f 100644 --- a/components/Navigation.tsx +++ b/components/Navigation.tsx @@ -9,7 +9,7 @@ const Navigation = () => (
    diff --git a/components/SideNav.scss b/components/SideNav.module.scss similarity index 100% rename from components/SideNav.scss rename to components/SideNav.module.scss diff --git a/pages/resources.tsx b/pages/resources.tsx index 0a830cb..4866f50 100644 --- a/pages/resources.tsx +++ b/pages/resources.tsx @@ -6,7 +6,7 @@ import NavigationAnchor from '../components/SideNav'; const GuidesPage = () => ( - Guides + Resources

    Hehehaha

    From eb76843ef3fe4e289adb3598236862c0985a3eae Mon Sep 17 00:00:00 2001 From: Z2W00 Date: Sun, 3 Jul 2022 22:24:54 +0100 Subject: [PATCH 5/5] a --- .../{SideNav.module.scss => SideNav.scss} | 0 components/SideNav.tsx | 18 +++++++----------- pages/resources.tsx | 4 ++-- 3 files changed, 9 insertions(+), 13 deletions(-) rename components/{SideNav.module.scss => SideNav.scss} (100%) diff --git a/components/SideNav.module.scss b/components/SideNav.scss similarity index 100% rename from components/SideNav.module.scss rename to components/SideNav.scss diff --git a/components/SideNav.tsx b/components/SideNav.tsx index 77701dd..720f13e 100644 --- a/components/SideNav.tsx +++ b/components/SideNav.tsx @@ -1,21 +1,17 @@ -import React from 'react'; +import React, { ReactPropTypes } from 'react'; import styles from './SideNav.module.scss' type Props = { - list1?: string - list2?: string - list3?: string - list4?: string + list?: string + link?: string } -//hardcoding the number of elements in the list should be fine because this module is only be used once (in the guides page) +const ListArray = ({list}: Props) => [list] +const LinkArray = ({link}: Props) => [link] -const NavigationAnchor = ({list1,list2,list3,list4,}: Props) => ( +const NavigationAnchor = ({list}: Props) => ( ) diff --git a/pages/resources.tsx b/pages/resources.tsx index 4866f50..02a7839 100644 --- a/pages/resources.tsx +++ b/pages/resources.tsx @@ -2,12 +2,12 @@ import Layout from '../components/Layout' import Banner from '../components/Banner'; import Button from '../components/ButtonPrimary'; import Card from '../components/Card' -import NavigationAnchor from '../components/SideNav'; +import SideNav from '../components/SideNav'; const GuidesPage = () => ( Resources - +

    Hehehaha

    Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly