-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Finish frontpage and almost finish header
- Loading branch information
Showing
13 changed files
with
257 additions
and
51 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,16 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer utilities { | ||
| /* For Webkit-based browsers (Chrome, Safari and Opera) */ | ||
| .scrollbar-hide::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
|
|
||
| /* For IE, Edge and Firefox */ | ||
| .scrollbar-hide { | ||
| -ms-overflow-style: none; /* IE and Edge */ | ||
| scrollbar-width: none; /* Firefox */ | ||
| } | ||
| } |
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 was deleted.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import ThemeToggle from "@components/theme-toggle"; | ||
| import Link from "next/link"; | ||
| import TabNavigation from "./tab-navigation"; | ||
|
|
||
| function MainLogo() { | ||
| return ( | ||
| <Link href="/" className="text-font-dark text-3xl font-medium"> | ||
| Partiguiden | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| export default function Header() { | ||
| return ( | ||
| <> | ||
| <div className="bg-primary-elevated-light dark:bg-background-elevated-dark absolute h-14 w-full sm:h-24"></div> | ||
| <header className="bg-primary-elevated-light/75 text-font-dark dark:bg-background-elevated-dark/75 sticky top-0 flex h-14 flex-col shadow-md backdrop-blur-md sm:h-24"> | ||
| <div className="container flex h-full items-center justify-between"> | ||
| <MainLogo /> | ||
| <ThemeToggle /> | ||
| </div> | ||
| <TabNavigation /> | ||
| </header> | ||
| </> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| "use client"; | ||
|
|
||
| import { mainNavigation } from "@lib/navigation"; | ||
| import Link from "next/link"; | ||
| import { usePathname } from "next/navigation"; | ||
| import { useCallback, useLayoutEffect, useRef, useState } from "react"; | ||
| import { ArrowRightIcon, ArrowLeftIcon } from "@heroicons/react/24/solid"; | ||
|
|
||
| const SCROLL_STEP = 300; | ||
|
|
||
| export default function TabNavigation() { | ||
| const pathname = usePathname(); | ||
| const [showLeftButton, setShowLeftButton] = useState(false); | ||
| const [showRightButton, setShowRightButton] = useState(false); | ||
| const navRef = useRef<HTMLElement>(null); | ||
|
|
||
| const onScroll = useCallback<React.UIEventHandler<HTMLElement>>((event) => { | ||
| if (event.currentTarget.scrollLeft > 0) { | ||
| setShowLeftButton(true); | ||
| } else if (event.currentTarget.scrollLeft <= 0) { | ||
| setShowLeftButton(false); | ||
| } | ||
|
|
||
| if ( | ||
| event.currentTarget.scrollWidth - event.currentTarget.scrollLeft <= | ||
| event.currentTarget.clientWidth | ||
| ) { | ||
| setShowRightButton(false); | ||
| } else { | ||
| setShowRightButton(true); | ||
| } | ||
| }, []); | ||
|
|
||
| const handleScrollRight = useCallback< | ||
| React.MouseEventHandler<HTMLElement> | ||
| >(() => { | ||
| navRef.current?.scrollBy({ left: SCROLL_STEP }); | ||
| }, []); | ||
|
|
||
| const handleScrollLeft = useCallback< | ||
| React.MouseEventHandler<HTMLElement> | ||
| >(() => { | ||
| navRef.current?.scrollBy({ left: -SCROLL_STEP }); | ||
| }, []); | ||
|
|
||
| useLayoutEffect(() => { | ||
| function resizeHandler() { | ||
| if (navRef.current?.clientWidth === navRef.current?.scrollWidth) { | ||
| setShowRightButton(false); | ||
| } else if ( | ||
| navRef.current && | ||
| navRef.current?.clientWidth < navRef.current?.scrollWidth | ||
| ) { | ||
| setShowRightButton(true); | ||
| } | ||
| } | ||
|
|
||
| window.addEventListener("resize", resizeHandler); | ||
| resizeHandler(); | ||
| return () => { | ||
| window.removeEventListener("resize", resizeHandler); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="hidden flex-1 items-end sm:flex"> | ||
| {showLeftButton ? ( | ||
| <button className="h-14 w-20" onClick={handleScrollLeft}> | ||
| <ArrowLeftIcon className="m-auto h-6 w-6" /> | ||
| </button> | ||
| ) : ( | ||
| <div className="h-14 w-20" /> | ||
| )} | ||
| <nav | ||
| className="scrollbar-hide flex gap-3 overflow-scroll scroll-smooth text-center" | ||
| ref={navRef} | ||
| onScroll={onScroll} | ||
| > | ||
| {mainNavigation.map(({ href, title }) => ( | ||
| <Link | ||
| key={href} | ||
| href={href} | ||
| aria-current={href === pathname && "page"} | ||
| className="aria-current-page:border-b-2 min-w-tab-link border-primary-light dark:border-primary-elevated-light flex-shrink-0 whitespace-nowrap p-4 text-sm uppercase hover:opacity-80" | ||
| > | ||
| {title} | ||
| </Link> | ||
| ))} | ||
| </nav> | ||
| {showRightButton ? ( | ||
| <button className="h-14 w-20" onClick={handleScrollRight}> | ||
| <ArrowRightIcon className="m-auto h-6 w-6" /> | ||
| </button> | ||
| ) : ( | ||
| <div className="h-14 w-20" /> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { | ||
| HomeIcon, | ||
| PencilSquareIcon, | ||
| UserCircleIcon, | ||
| ChartBarIcon, | ||
| InformationCircleIcon, | ||
| DocumentCheckIcon, | ||
| ChatBubbleLeftRightIcon, | ||
| ScaleIcon, | ||
| } from "@heroicons/react/24/solid"; | ||
|
|
||
| export const routes = { | ||
| index: "/", | ||
| cookiePolicy: "/cookie-policy", | ||
| aboutUs: "/about-us", | ||
| polls: "/polls", | ||
| votes: "/vote", | ||
| vote: "/vote/[id]/[bet]", | ||
| decisions: "/decisions", | ||
| standpoints: "/standpoints", | ||
| standpoint: "/standpoints/[id]", | ||
| party: "/party/[party]", | ||
| members: "/member", | ||
| member: "/member/[id]", | ||
| memberStatsYear: "/member-stats/year", | ||
| memberStatsPeriod: "/member-stats/period", | ||
| document: "/document/[id]", | ||
| debates: "/debate", | ||
| debate: "/debate/[id]", | ||
| }; | ||
|
|
||
| export const getVoteHref = (id: string, bet: number): string => | ||
| `/vote/${id}/${bet}`; | ||
|
|
||
| export const getStandpointHref = (id: number): string => `/standpoints/${id}`; | ||
|
|
||
| export const getPartyHref = (party: string): string => `/party/${party}`; | ||
|
|
||
| export const getMemberHref = (id: string): string => `/member/${id}`; | ||
|
|
||
| export const getDocumentHref = (id: string): string => `/document/${id}`; | ||
|
|
||
| export const getDebateHref = (id: string): string => `/debate/${id}`; | ||
|
|
||
| export const mainNavigation = [ | ||
| { href: routes.index, title: "Hem", Icon: HomeIcon }, | ||
| { | ||
| href: routes.standpoints, | ||
| title: "Partiernas Ståndpunkter", | ||
| Icon: PencilSquareIcon, | ||
| }, | ||
| // { | ||
| // href: routes.party, | ||
| // title: "Partierna", | ||
| // Icon: UserGroupIcon, | ||
| // }, | ||
| { href: routes.decisions, title: "Riksdagsbeslut", Icon: DocumentCheckIcon }, | ||
| { | ||
| href: routes.votes, | ||
| title: "Voteringar", | ||
| Icon: ScaleIcon, | ||
| }, | ||
| { | ||
| href: routes.debates, | ||
| title: "Debatter", | ||
| Icon: ChatBubbleLeftRightIcon, | ||
| }, | ||
| { | ||
| href: routes.members, | ||
| title: "Ledamöter", | ||
| Icon: UserCircleIcon, | ||
| }, | ||
| { | ||
| href: routes.polls, | ||
| title: "Opinionsundersökningar", | ||
| Icon: ChartBarIcon, | ||
| }, | ||
| { href: routes.aboutUs, title: "Om oss", Icon: InformationCircleIcon }, | ||
| ]; |
Oops, something went wrong.