Skip to content

Commit

Permalink
Merge pull request #189 from eclipse-sw360/heliocastro/navbar_intl
Browse files Browse the repository at this point in the history 
Navbar refactor
  • Loading branch information
@heliocastro
heliocastro authored Dec 22, 2023
2 parents ea4ee3d + d2164be commit 626d9bb
Show file tree
Hide file tree
Showing 8 changed files with 162 additions and 245 deletions.
4 changes: 2 additions & 2 deletions src/app/[locale]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { notFound } from 'next/navigation'
import { ReactNode } from 'react'

import { LOCALES } from '@/constants'
import { Footer, Header } from 'next-sw360'
import { Footer, Navbar } from 'next-sw360'
import { Providers } from '../provider'

export const metadata: Metadata = {
Expand Down Expand Up @@ -59,7 +59,7 @@ async function RootLayout({ children, params: { locale } }: Props) {
<NextIntlClientProvider locale={locale} messages={messages}>
<div id='container'>
<div id='content'>
<Header />
<Navbar />
{children}
<Footer />
</div>
Expand Down
89 changes: 0 additions & 89 deletions src/components/sw360/Header/Header.tsx
View file

This file was deleted.

7 changes: 3 additions & 4 deletions src/components/sw360/LocaleSwitcher/LocaleSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,11 @@ function LocaleSwitcher() {
<span className={`fi fi-${getCurrentFlag()}`} />
</Dropdown.Toggle>

<Dropdown.Menu>
<Dropdown.Menu align={'end'}>
{LOCALES.map((option) => (
<Dropdown.Item eventKey={option.i18n} key={option.i18n} className='dropdown-item'>
<Dropdown.Item eventKey={option.i18n} key={option.i18n}>
<span className={`fi fi-${option.flag}`} />
{/* <span>{regionName.of(option.i18n)}</span> */}
<span>{getLanguageName(option.i18n)}</span>
<span style={{ marginLeft: '4px' }}>{getLanguageName(option.i18n)}</span>
</Dropdown.Item>
))}
</Dropdown.Menu>
Expand Down
188 changes: 84 additions & 104 deletions src/components/sw360/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,60 +10,26 @@

'use client'

import { LOCALES } from '@/constants'
import { useSession } from 'next-auth/react'
import { useTranslations } from 'next-intl'
import Image from 'next/image'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { useRouter, useSelectedLayoutSegment } from 'next/navigation'
import { useState } from 'react'
import { Navbar as BSNavbar, Container, Nav, NavDropdown } from 'react-bootstrap'
import { Navbar as BSNavbar, Col, Container, Form, Nav, NavDropdown, Row } from 'react-bootstrap'

import sw360logo from '@/assets/images/sw360-logo.svg'
import { NavList } from '@/object-types'
import { LocaleSwitcher, ProfileDropdown } from 'next-sw360'

function Navbar() {
const [heading, setHeading] = useState('home')
const router = useRouter()
const pathname = usePathname()
const locales = LOCALES.map((locale) => locale.i18n)
const isLoginPage = locales.includes(pathname.substring(1)) || pathname.substring(1) === ''
const t = useTranslations('default')

const { data: session, status } = useSession()
const [show, setShow] = useState(false)
const selectedLayoutSegment = useSelectedLayoutSegment()
const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/'

const navlist = [
{ href: '/home', name: t('Home'), id: 'home' },
{ href: '/projects', name: t('Projects'), id: 'projects' },
{ href: '/components', name: t('Components'), id: 'components' },
{ href: '/licenses', name: t('Licenses'), id: 'licenses' },
{ href: '/ecc', name: t('ECC'), id: 'ecc' },
{ href: '/vulnerabilities', name: t('Vulnerabilities'), id: 'vulnerabilities' },
{ href: '/requests', name: t('Requests'), id: 'requests' },
{ href: '/search', name: t('Search'), id: 'search' },
{
href: '/admin',
name: t('Admin'),
id: 'admin',
visibility: 'ADMIN',
childs: [
{ href: '#', name: t('User'), id: 'admin_user' },
{ href: '/admin/vendors', name: t('Vendors'), id: 'admin_vendors' },
{ href: '#', name: t('Bulk Release Edit'), id: 'admin_bulk_edit' },
{ href: '/admin/licenses', name: t('Licenses'), id: 'admin_licenses' },
{ href: '#', name: t('Obligations'), id: 'admin_obligations' },
{ href: '#', name: t('Schedule'), id: 'admin_schedule' },
{ href: '#', name: t('Fossology'), id: 'admin_fossology' },
{ href: '#', name: t('Import Export'), id: 'admin_import_export' },
{ href: '#', name: t('Database Sanitation'), id: 'admin_database_sanitation' },
{ href: '#', name: t('Attachment Cleanup'), id: 'admin_attachment_cleanup' },
{ href: '#', name: t('OAuth Client'), id: 'admin_oauth_client' },
{ href: '#', name: t('License Types'), id: 'admin_license_types' },
{ href: '#', name: t('Department'), id: 'admin_department' },
],
},
{
href: '/preferences',
name: t('Preferences'),
id: 'preferences',
},
]
const navlist = NavList()

// NavItems receives an array of links with possible entries:
// href: the link (mandatory)
Expand All @@ -73,68 +39,82 @@ function Navbar() {
// childs: an array of links that are shown as dropdown menu (optional)

const NavItems = () => (
<BSNavbar expand='lg'>
<Container fluid>
<Nav variant='underline' className='ms-5' activeKey='home'>
{navlist.map((item) => {
if ('visibility' in item) {
if (status === 'authenticated' && session.user.userGroup !== item.visibility) {
return
}
}
if ('childs' in item) {
return (
<NavDropdown
title={item.name}
id={item.id}
show={show}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
key={item.name}
onClick={(e) => {
// hack to route to /admin when clicked on dropdown title
if ((e.target as HTMLElement).attributes[0].name === 'id') {
e.preventDefault()
router.push(item.href)
}
}}
>
{item.childs.map((child) => (
<NavDropdown.Item href={child.href} key={child.id}>
{child.name}
</NavDropdown.Item>
))}
</NavDropdown>
)
} else {
return (
<Nav.Item key={item.name}>
<Link
className={`nav-link`}
href={item.href}
onClick={() => setHeading(item.href[-1])}
>
{item.name}
</Link>
</Nav.Item>
)
}
})}
</Nav>
</Container>
</BSNavbar>
<>
{navlist.map((item) => {
if ('visibility' in item) {
if (status === 'authenticated' && session.user.userGroup !== item.visibility) {
return
}
}
if ('childs' in item) {
return (
<NavDropdown
title={item.name}
id={item.id}
show={show}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
key={item.name}
className={`${pathname == item.href ? 'active' : ''}`}
active={pathname == item.href}
onClick={(e) => {
// hack to route to /admin when clicked on dropdown title
if ((e.target as HTMLElement).attributes[0].name === 'id') {
e.preventDefault()
router.push(item.href)
}
}}
>
{item.childs.map((child) => (
<NavDropdown.Item href={child.href} key={child.id}>
{child.name}
</NavDropdown.Item>
))}
</NavDropdown>
)
} else {
return (
<Nav.Item key={item.name}>
<Link className={`nav-link ${pathname == item.href ? 'active' : ''}`} href={item.href}>
{item.name}
</Link>
</Nav.Item>
)
}
})}
</>
)

return (
!isLoginPage && (
<>
<NavItems />

<div className={`heading-div`}>
<div>{heading}</div>
</div>
</>
)
<>
<BSNavbar className={`${pathname != '/' ? 'bg-body-tertiary' : ''}`}>
<Container style={{ marginLeft: 0 }}>
<BSNavbar.Brand href='/'>
<Image src={sw360logo} height={57} width={147} alt='SW360 Logo' />
</BSNavbar.Brand>
{pathname != '/' && (
<Nav className='me-auto'>
<NavItems />
</Nav>
)}
</Container>
{pathname != '/' && (
<Form>
<Row>
<Col xs='auto'>
<Form.Control type='text' placeholder='Search' className=' mr-sm-2' />
</Col>
<Col xs='auto'>
<ProfileDropdown />
</Col>
<Col xs='auto'>
<LocaleSwitcher />
</Col>
</Row>
</Form>
)}
</BSNavbar>
</>
)
}

Expand Down
2 changes: 0 additions & 2 deletions src/components/sw360/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import AuthScreen from './AuthScreen/AuthScreen'
import ComponentOwnerDialog from './ComponentOwnerDialog/ComponentOwnerDialog'
import Footer from './Footer/Footer'
import FossologyClearing from './FossologyClearing/FossologyClearing'
import Header from './Header/Header'
import LanguageSwitcher from './LanguageSwitcher/LanguageSwitcher'
import LocaleSwitcher from './LocaleSwitcher/LocaleSwitcher'
import ModeratorsDialog from './ModeratorsDialog/ModeratorsDialog'
Expand Down Expand Up @@ -46,7 +45,6 @@ export {
ComponentOwnerDialog,
Footer,
FossologyClearing,
Header,
LanguageSwitcher,
LocaleSwitcher,
ModeratorsDialog,
Expand Down
Loading

0 comments on commit 626d9bb

Please sign in to comment.