From 7ff1442c0e2b81af1439b667e5e932e777c40f18 Mon Sep 17 00:00:00 2001 From: JohanHjelsethStorstad <82723971+JohanHjelsethStorstad@users.noreply.github.com> Date: Sat, 6 Jan 2024 22:38:57 +0100 Subject: [PATCH 01/28] feat: adds new Menu component --- src/app/components/NavBar/Menu.module.scss | 0 src/app/components/NavBar/Menu.tsx | 42 ++++++++++++++++++++++ src/app/layout.tsx | 2 +- 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 src/app/components/NavBar/Menu.module.scss create mode 100644 src/app/components/NavBar/Menu.tsx diff --git a/src/app/components/NavBar/Menu.module.scss b/src/app/components/NavBar/Menu.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/components/NavBar/Menu.tsx b/src/app/components/NavBar/Menu.tsx new file mode 100644 index 000000000..a030bcfa6 --- /dev/null +++ b/src/app/components/NavBar/Menu.tsx @@ -0,0 +1,42 @@ +'use client' +import { useState } from 'react' +import { IconDefinition } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons' +import Link from 'next/link' +import styles from './Menu.module.scss' + +type PropTypes = { + items: { + name: string, + href: string, + icon: IconDefinition + }[] +} + + +export default function Menu({items}: PropTypes) { + const [isOpen, setIsOpen] = useState(false) + + return ( + isOpen ? ( +
+ setIsOpen(false)}/> + +
+ ) : ( +
+ setIsOpen(true)}/> +
+ ) + ) +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 890783d3d..470451b6a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -25,7 +25,7 @@ export const metadata = { export default async function RootLayout({ children } : { children: React.ReactNode}) { const session = await getServerSession(authOptions) - + return ( From 2a784535c41904c8a59205c604aa2cbcd87424f6 Mon Sep 17 00:00:00 2001 From: JohanHjelsethStorstad <82723971+JohanHjelsethStorstad@users.noreply.github.com> Date: Sat, 6 Jan 2024 22:41:52 +0100 Subject: [PATCH 02/28] chore: adds Menu component to NavBar --- src/app/components/NavBar/NavBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/NavBar/NavBar.tsx b/src/app/components/NavBar/NavBar.tsx index 168c6ff1a..72536099f 100644 --- a/src/app/components/NavBar/NavBar.tsx +++ b/src/app/components/NavBar/NavBar.tsx @@ -17,6 +17,7 @@ import { faGamepad } from '@fortawesome/free-solid-svg-icons' import { Session } from 'next-auth' +import Menu from './Menu' type PropTypes = { session: Session | null @@ -52,7 +53,7 @@ async function NavBar({ session }: PropTypes) { {applicationPeriod && } - Date: Sat, 6 Jan 2024 22:59:55 +0100 Subject: [PATCH 03/28] refactor: navbar component to make it more understandable --- src/app/components/NavBar/Menu.module.scss | 6 + src/app/components/NavBar/Menu.tsx | 9 +- src/app/components/NavBar/NavBar.module.scss | 4 + src/app/components/NavBar/NavBar.tsx | 153 ++++++++++--------- 4 files changed, 96 insertions(+), 76 deletions(-) diff --git a/src/app/components/NavBar/Menu.module.scss b/src/app/components/NavBar/Menu.module.scss index e69de29bb..4df128160 100644 --- a/src/app/components/NavBar/Menu.module.scss +++ b/src/app/components/NavBar/Menu.module.scss @@ -0,0 +1,6 @@ +@use '@/styles/ohma'; + +.openBtn { + background-color: transparent; + border: none; +} \ No newline at end of file diff --git a/src/app/components/NavBar/Menu.tsx b/src/app/components/NavBar/Menu.tsx index a030bcfa6..cbbf335a3 100644 --- a/src/app/components/NavBar/Menu.tsx +++ b/src/app/components/NavBar/Menu.tsx @@ -7,6 +7,7 @@ import Link from 'next/link' import styles from './Menu.module.scss' type PropTypes = { + openBtnContent: React.ReactNode, items: { name: string, href: string, @@ -15,7 +16,7 @@ type PropTypes = { } -export default function Menu({items}: PropTypes) { +export default function Menu({ items, openBtnContent } : PropTypes) { const [isOpen, setIsOpen] = useState(false) return ( @@ -34,9 +35,9 @@ export default function Menu({items}: PropTypes) { ) : ( -
- setIsOpen(true)}/> -
+ ) ) } diff --git a/src/app/components/NavBar/NavBar.module.scss b/src/app/components/NavBar/NavBar.module.scss index 276e6cff1..a650eca14 100644 --- a/src/app/components/NavBar/NavBar.module.scss +++ b/src/app/components/NavBar/NavBar.module.scss @@ -26,6 +26,10 @@ } } } + .openMenu { + font-size: ohma.$fonts-m; + color: ohma.$colors-white; + } } @media (max-width: ohma.$mobileBreakpoint) { diff --git a/src/app/components/NavBar/NavBar.tsx b/src/app/components/NavBar/NavBar.tsx index 72536099f..4d8bc2660 100644 --- a/src/app/components/NavBar/NavBar.tsx +++ b/src/app/components/NavBar/NavBar.tsx @@ -1,7 +1,6 @@ import Image from '@/components/Image/Image' import Link from 'next/link' import Item from './Item' -import DropDown from './Dropdown' import styles from './NavBar.module.scss' import { faNewspaper, @@ -23,6 +22,64 @@ type PropTypes = { session: Session | null } +const itemsForMenu = [ + { + name: 'Om Omega', + href: 'ingopages/about', + icon: faCircleInfo, + }, + { + name: 'Intressegrupper', + href: 'ingopages/interessegrupper', + icon: faGamepad, + }, + { + name: 'Artikler', + href: 'news', + icon: faNewspaper + }, + { + name: 'Ombul', + href: '/ombul', + icon: faBook, + }, + { + name: 'Bulshit', + href: '/bulshit', + icon: faPoo, + }, + { + name: 'Omegashop', + href: '/money/shop', + icon: faShoppingCart, + }, + { + name: 'Omegaquotes', + href: '/omegaquotes', + icon: faComment, + }, + { + name: 'Guider', + href: 'infopages/guides', + icon: faQuestionCircle, + }, + { + name: 'Bilder', + href: '/images', + icon: faCamera, + }, + { + name: 'Klasselister', + href: '/userlist', + icon: faList, + }, + { + name: 'Komitémedlemmer', + href: '/committees', + icon: faUsers, + }, +] + async function NavBar({ session }: PropTypes) { const isLoggedIn = Boolean(session?.user) const applicationPeriod = false @@ -39,78 +96,30 @@ async function NavBar({ session }: PropTypes) { /> - {isLoggedIn && } - {!isLoggedIn && } - - {!isLoggedIn && - <> - - - } - {isLoggedIn && - <> - - {applicationPeriod && - - } - + + + { - name: 'Komitémedlemmer', - href: '/committees', - icon: faUsers, - }, - ]}/> - + applicationPeriod && + + } +
  • + Mer

    } + items={itemsForMenu}/> +
    • + + ) : ( + <> + + + + + + ) }
  • From e8283e7486c380de5e7cbdf64efa1274ef5ec2d8 Mon Sep 17 00:00:00 2001 From: JohanHjelsethStorstad <82723971+JohanHjelsethStorstad@users.noreply.github.com> Date: Sat, 6 Jan 2024 23:06:00 +0100 Subject: [PATCH 04/28] chore: adds basic styling to Menu --- src/app/components/NavBar/Menu.module.scss | 11 +++++++ src/app/components/NavBar/Menu.tsx | 37 ++++++++++++---------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/app/components/NavBar/Menu.module.scss b/src/app/components/NavBar/Menu.module.scss index 4df128160..1babdcb95 100644 --- a/src/app/components/NavBar/Menu.module.scss +++ b/src/app/components/NavBar/Menu.module.scss @@ -3,4 +3,15 @@ .openBtn { background-color: transparent; border: none; + :hover { + cursor: pointer; + } +} + +.Menu { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; } \ No newline at end of file diff --git a/src/app/components/NavBar/Menu.tsx b/src/app/components/NavBar/Menu.tsx index cbbf335a3..1e33036bc 100644 --- a/src/app/components/NavBar/Menu.tsx +++ b/src/app/components/NavBar/Menu.tsx @@ -2,7 +2,7 @@ import { useState } from 'react' import { IconDefinition } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons' +import { faTimes } from '@fortawesome/free-solid-svg-icons' import Link from 'next/link' import styles from './Menu.module.scss' @@ -20,24 +20,27 @@ export default function Menu({ items, openBtnContent } : PropTypes) { const [isOpen, setIsOpen] = useState(false) return ( - isOpen ? ( -
    - setIsOpen(false)}/> -
      - {items.map((item) => ( -
    • - - - {item.name} - -
      • - ))} -
    -
    - ) : ( + <> + { + isOpen ? ( +
    + setIsOpen(false)}/> +
      + {items.map((item) => ( +
    • + + + {item.name} + +
      • + ))} +
    +
    + ) : null + } - ) + ) } From 7b5643cb6926b45d0cd8b69853a43b0af8128455 Mon Sep 17 00:00:00 2001 From: JohanHjelsethStorstad <82723971+JohanHjelsethStorstad@users.noreply.github.com> Date: Sat, 6 Jan 2024 23:16:00 +0100 Subject: [PATCH 05/28] chore: adds backdrop to Menu --- src/app/components/NavBar/Menu.module.scss | 12 ++++++++++++ src/app/components/NavBar/Menu.tsx | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/src/app/components/NavBar/Menu.module.scss b/src/app/components/NavBar/Menu.module.scss index 1babdcb95..f696a5c98 100644 --- a/src/app/components/NavBar/Menu.module.scss +++ b/src/app/components/NavBar/Menu.module.scss @@ -12,6 +12,18 @@ position: fixed; top: 0; left: 0; + z-index: 9; + background-color: rgba(ohma.$colors-secondary, 0.5); width: 100vw; height: 100vh; +} + +.overlay { + backdrop-filter: blur(5px); + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + z-index: 8; } \ No newline at end of file diff --git a/src/app/components/NavBar/Menu.tsx b/src/app/components/NavBar/Menu.tsx index 1e33036bc..83fddce07 100644 --- a/src/app/components/NavBar/Menu.tsx +++ b/src/app/components/NavBar/Menu.tsx @@ -22,7 +22,10 @@ export default function Menu({ items, openBtnContent } : PropTypes) { return ( <> { + isOpen ? ( + <> +
    setIsOpen(false)}/>
      @@ -36,6 +39,7 @@ export default function Menu({ items, openBtnContent } : PropTypes) { ))}
    + ) : null } - - {burgerOpen ? ( -
    - - - - - {!isLoggedIn && - - } - {isLoggedIn && - <> - - - - - - - - - {applicationPeriod && - - } - - } -
    - ) : (
    )} - - ) -} - -export default BurgerMenu diff --git a/src/app/components/NavBar/Dropdown.module.scss b/src/app/components/NavBar/Dropdown.module.scss deleted file mode 100644 index b943b12e2..000000000 --- a/src/app/components/NavBar/Dropdown.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use "@/styles/ohma"; - -.name { - color: ohma.$colors-white; -} - -.Dropdown { - position: relative; - display: inline-block; -} - -.dropdownContent { - display: none; - position: absolute; - background-color: #f9f9f9; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - padding: 12px 16px; - z-index: 1; - padding: 0; - > .dropdownItem { - background-color: ohma.$colors-gray-700; - padding: ohma.$gap; - &:hover { - background-color: ohma.$colors-primary; - .linkName, .icon { - color: ohma.$colors-black - } - } - > a { - display: flex; - flex-flow: row; - text-decoration: none; - .icon { - color: ohma.$colors-white; - margin-right: 3px; - } - .linkName { - text-decoration: none; - color: ohma.$colors-white; - font-size: ohma.$fonts-m; - } - } - } -} - -.Dropdown:hover { - .dropdownContent { - display: block; - } - cursor: pointer; -} \ No newline at end of file diff --git a/src/app/components/NavBar/Dropdown.tsx b/src/app/components/NavBar/Dropdown.tsx deleted file mode 100644 index 909ffac5e..000000000 --- a/src/app/components/NavBar/Dropdown.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Link from 'next/link' -import styles from './Dropdown.module.scss' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { v4 as uuid } from 'uuid' -import { IconProp } from '@fortawesome/fontawesome-svg-core' - -type PropTypes = { - name: string, - items: { - href: string, - name: string, - icon: IconProp, - }[], -} - -function DropDown({ name, items } : PropTypes) { - return ( -
  • -
    { name }
    -
    - {items.map(item => -
    - - -

    {item.name}

    - -
    - )} -
    -
    • - ) -} - -export default DropDown diff --git a/src/app/components/NavBar/MobileNavBar.module.scss b/src/app/components/NavBar/MobileNavBar.module.scss index 9b8ed3ed8..9317a563d 100644 --- a/src/app/components/NavBar/MobileNavBar.module.scss +++ b/src/app/components/NavBar/MobileNavBar.module.scss @@ -8,12 +8,8 @@ display: none; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: auto auto; - grid-template-areas: - ". . . . ." - "b b b b b"; + grid-template-rows: auto; > *:not(:last-child) { - border-left: solid .5px ohma.$colors-white; display: grid; place-items: center; diff --git a/src/app/components/NavBar/MobileNavBar.tsx b/src/app/components/NavBar/MobileNavBar.tsx index 07f4ccb24..053a9e2e4 100644 --- a/src/app/components/NavBar/MobileNavBar.tsx +++ b/src/app/components/NavBar/MobileNavBar.tsx @@ -1,15 +1,12 @@ import ImageLink from '@/components/Image/ImageLink' import Link from 'next/link' -import BurgerMenu from './BurgerMenu' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { - faNewspaper, - faSuitcase, - faCalendar -} from '@fortawesome/free-solid-svg-icons' +import { faBars } from '@fortawesome/free-solid-svg-icons' +import getNavItems from './navDef' import styles from './MobileNavBar.module.scss' import { Session } from 'next-auth' import EditModeSwitch from '@/components/EditModeSwitch/EditModeSwitch' +import Menu from './Menu' type PropTypes = { session: Session | null @@ -20,24 +17,21 @@ function MobileNavBar({ session } : PropTypes) { const applicationPeriod = true const isAdmin = true //temp + const navItems = getNavItems(isLoggedIn, isAdmin, applicationPeriod) + const itemsForNav = navItems.slice(0, 1) + const itemsForMenu = navItems.slice(2, navItems.length - 1) + return (