Skip to content

Fix sidebar links #744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Valyukhov merged 1 commit into from
Nov 30, 2024
Merged

Fix sidebar links #744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 121 additions & 56 deletions components/SideBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ function SideBar({ setIsOpenSideBar, access, isOpenSideBar }) {

const [collapsed, setCollapsed] = useState(true)
const [isLargeScreen, setIsLargeScreen] = useState(false)
const [showAbout, setShowAbout] = useState(false)
const [showCreate, setShowCreate] = useState(false)

const collapsedSideBar = collapsed ? 'lg:hidden' : ''
Expand Down Expand Up @@ -187,30 +186,128 @@ function SideBar({ setIsOpenSideBar, access, isOpenSideBar }) {
<div className="f-screen-appbar flex grow flex-col justify-between sm:min-h-[60vh]">
<div className="flex grow flex-col justify-between gap-8 text-sm">
<div className="flex flex-col">
<MenuItemLink
collapsedSideBar={collapsedSideBar}
tab="0"
clear={clear}
Icon={Account}
name={t('Account')}
/>
<MenuItemLink
collapsedSideBar={collapsedSideBar}
tab="1"
clear={clear}
Icon={Projects}
name={t('Projects')}
/>

<Menu.Item
as="div"
disabled
className={`group px-4 py-3 ${
router.query?.tab !== '0' ? 'opacity-70' : 'bg-th-secondary-200'
} hover:bg-th-secondary-200`}
>
<Link href="/account?tab=0" legacyBehavior>
<a
className="flex cursor-pointer items-center gap-2"
onClick={() => {
closeModal()
setIsOpenSideBar(false)
close()
}}
>
<div className="rounded-[23rem]">
<Account
className={`ml-0.5 w-4 ${
router.query?.tab === '0'
? 'stroke-th-text-primary'
: activeIconClass
}`}
/>
</div>
<span
className={`whitespace-nowrap ${collapsedSideBar} ${
router.query?.tab === '0'
? 'text-th-text-primary'
: activeTextClass
}`}
>
{t('Account')}
</span>
</a>
</Link>
</Menu.Item>
<Menu.Item
as="div"
disabled
className={`group px-4 py-3 ${
router.query?.tab !== '1' ? 'opacity-70' : 'bg-th-secondary-200'
} hover:bg-th-secondary-200`}
>
<Link href="/account?tab=1" legacyBehavior>
<a
className="flex cursor-pointer items-center gap-2"
onClick={() => {
closeModal()
setIsOpenSideBar(false)
close()
}}
>
<div className="rounded-[23rem]">
<Projects
className={`w-5 ${
router.query?.tab === '1'
? 'stroke-th-text-primary'
: activeIconClass
}`}
/>
</div>
<span
className={`${collapsedSideBar} ${
router.query?.tab === '1'
? 'text-th-text-primary'
: activeTextClass
}`}
>
{t('Projects')}
</span>
</a>
</Link>
</Menu.Item>
{user?.is_admin && (
<MenuItemLink
collapsedSideBar={collapsedSideBar}
tab="2"
clear={clear}
Icon={CreateProject}
name={t('CreateProject')}
additionalClassName="hidden md:block"
/>
<Menu.Item
as="div"
disabled
className={`group hidden px-4 py-3 md:block ${
router.query?.tab !== '2'
? 'opacity-70'
: 'bg-th-secondary-200'
} hover:bg-th-secondary-200`}
>
<Link href="/account?tab=2" legacyBehavior>
<a
className="flex cursor-pointer items-center gap-2"
onClick={() => {
closeModal()
setIsOpenSideBar(false)
close()
}}
>
<div className="rounded-[23rem]">
<CreateProject
className={`h-5 w-5 ${
router.query?.tab === '2'
? 'stroke-th-text-primary'
: activeIconClass
}`}
/>
</div>
<div
className={`overflow-hidden ${
collapsed
? 'lg:w-0'
: 'transition-all delay-700 duration-700 lg:w-auto'
}`}
>
<span
className={`whitespace-nowrap ${collapsedSideBar} ${
router.query?.tab === '2'
? 'text-th-text-primary'
: activeTextClass
}`}
>
{t('CreateProject')}
</span>
</div>
</a>
</Link>
</Menu.Item>
)}

{user?.is_admin && (
Expand Down Expand Up @@ -462,7 +559,6 @@ function SideBar({ setIsOpenSideBar, access, isOpenSideBar }) {
className="flex w-full cursor-pointer items-center gap-2"
onClick={() => {
openModal('aboutVersion')
setShowAbout(false)
}}
>
<div className="rounded-[23rem]">
Expand Down Expand Up @@ -505,34 +601,3 @@ function SideBar({ setIsOpenSideBar, access, isOpenSideBar }) {
}

export default SideBar

function MenuItemLink({ collapsedSideBar, tab, clear, Icon, name, additionalClassName }) {
const router = useRouter()
const iconClassName = `w-5 ${
router.query?.tab === tab ? 'stroke-th-text-primary' : activeIconClass
}`
return (
<Menu.Item
as="div"
disabled
className={`group px-4 ${
router.query?.tab !== tab ? 'opacity-70' : 'bg-th-secondary-200'
} hover:bg-th-secondary-200 ${additionalClassName}`}
>
<Link href={`/account?tab=${tab}`} legacyBehavior shallow>
<a className="flex cursor-pointer items-center gap-2 py-3" onClick={clear}>
<div className="rounded-[23rem]">
<Icon className={iconClassName} />
</div>
<span
className={`whitespace-nowrap ${collapsedSideBar} ${
router.query?.tab === tab ? 'text-th-text-primary' : activeTextClass
}`}
>
{name}
</span>
</a>
</Link>
</Menu.Item>
)
}
2 changes: 1 addition & 1 deletion components/SignOut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function SignOut({ collapsed }) {
/>

<p
className={`opacity-70 lg:text-th-secondary-300 ${
className={`whitespace-nowrap opacity-70 lg:text-th-secondary-300 ${
collapsed ? 'lg:hidden' : ''
} group-hover:text-th-text-primary group-hover:opacity-70`}
>
Expand Down