-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(navigation): side nav on mobile decives (#1516)
* feat(navigation): hamburger menu on mobile devices * chore(): refactor names on navigation * chore(nav): refactor logic * styling(hamburger-meny): color and add padding * styling(login): make modal width smaller on mobile * styling(modals): make modal width larger on mobile * styling(hamburger-menu): add chevron and background color on nav-items * fix(hamburger-meny): set modal to now show when logging out * chore(navbar): add use client * chore(navbar): remove inline styling * chore(create): move logic * chore(logout): remove form logic * fix(navbar): show hamburger meny * chore(nav): display block on sidenav --------- Co-authored-by: lindtvedtsebastian <[email protected]>
- Loading branch information
1 parent
3669281
commit 66e3c0a
Showing
8 changed files
with
153 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
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,36 @@ | ||
| 'use client' | ||
|
|
||
| import { TopNavigationItem } from '@entur/menu' | ||
| import Link from 'next/link' | ||
| import { usePathname } from 'next/navigation' | ||
| import { IconButton } from '@entur/button' | ||
| import { AddIcon } from '@entur/icons' | ||
| import { CreateBoard } from './CreateBoard' | ||
|
|
||
| function HorizontalNavBar({ loggedIn }: { loggedIn: boolean }) { | ||
| const pathname = usePathname() | ||
| if (!loggedIn) return null | ||
| return ( | ||
| <div className="flex-row hidden md:flex gap-4"> | ||
| <IconButton as={Link} href="?board=name" className="gap-4 p-4"> | ||
| <AddIcon /> Opprett tavle <CreateBoard /> | ||
| </IconButton> | ||
| <TopNavigationItem | ||
| active={pathname?.includes('/boards')} | ||
| as={Link} | ||
| href="/boards" | ||
| > | ||
| Tavler | ||
| </TopNavigationItem> | ||
| <TopNavigationItem | ||
| active={pathname?.includes('/organizations')} | ||
| as={Link} | ||
| href="/organizations" | ||
| > | ||
| Organisasjoner | ||
| </TopNavigationItem> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export { HorizontalNavBar } |
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,84 @@ | ||
| 'use client' | ||
| import { SideNavigationItem } from '@entur/menu' | ||
| import Link from 'next/link' | ||
| import Image from 'next/image' | ||
| import TavlaLogoBlue from 'assets/logos/Tavla-blue.svg' | ||
| import { CreateBoard } from './CreateBoard' | ||
| import { usePathname } from 'next/navigation' | ||
| import { Button, IconButton } from '@entur/button' | ||
| import { LeftArrowIcon, MenuIcon } from '@entur/icons' | ||
| import { useState } from 'react' | ||
| import { SideNavigation } from '@entur/menu' | ||
| import { logout } from './Login/actions' | ||
| import { Heading2 } from '@entur/typography' | ||
| import { Modal } from '@entur/modal' | ||
|
|
||
| function SideNavBar({ loggedIn }: { loggedIn: boolean }) { | ||
| const pathname = usePathname() | ||
| const [isOpen, setIsOpen] = useState(false) | ||
|
|
||
| if (!loggedIn) return null | ||
|
|
||
| return ( | ||
| <div className="block md:hidden"> | ||
| <IconButton | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| className="bg-contrast rounded-full p-3" | ||
| > | ||
| <MenuIcon content="Meny" color="background" /> | ||
| </IconButton> | ||
| <Modal | ||
| open={isOpen} | ||
| onDismiss={() => setIsOpen(false)} | ||
| size="medium" | ||
| className="h-full w-9/12 fixed top-0 left-0 py-10 !max-h-full !rounded-none !p-0 overflow-visible" | ||
| > | ||
| <SideNavigation className="h-full pt-10"> | ||
| <div className="pl-10"> | ||
| <Link href="/" aria-label="Tilbake til landingssiden"> | ||
| <Image src={TavlaLogoBlue} height={22} alt="" /> | ||
| </Link> | ||
| <Heading2 className="mt-16 mb-4">Meny</Heading2> | ||
| </div> | ||
|
|
||
| <div className="bg-secondary"> | ||
| <SideNavigationItem as={Link} href="?board=name"> | ||
| Opprett tavle | ||
| <CreateBoard /> | ||
| </SideNavigationItem> | ||
| <SideNavigationItem | ||
| href="/boards" | ||
| active={pathname?.includes('/boards')} | ||
| > | ||
| Tavler | ||
| </SideNavigationItem> | ||
| <SideNavigationItem | ||
| href="/organizations" | ||
| active={pathname?.includes('/organizations')} | ||
| > | ||
| Organisasjoner | ||
| </SideNavigationItem> | ||
| <SideNavigationItem | ||
| as={Button} | ||
| className="[&>button]:justify-start [&>button]:px-10" | ||
| onClick={async () => { | ||
| setIsOpen(false) | ||
| await logout() | ||
| }} | ||
| > | ||
| Logg ut | ||
| </SideNavigationItem> | ||
| </div> | ||
| </SideNavigation> | ||
| <IconButton | ||
| onClick={() => setIsOpen(false)} | ||
| className="bg-contrast rounded-full p-3 absolute bottom-[10%] -right-5" | ||
| > | ||
| <LeftArrowIcon color="background" /> | ||
| </IconButton> | ||
| </Modal> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export { SideNavBar } |
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