diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx index 6b6d8131..c3bceb09 100644 --- a/packages/frontend/src/components/Logo.tsx +++ b/packages/frontend/src/components/Logo.tsx @@ -1,13 +1,7 @@ -import { Link } from 'react-router-dom'; import { Heading } from './shared/Heading'; -interface LogoProps { - orgSlug?: string; -} - -export const Logo = ({ orgSlug }: LogoProps) => { +export const Logo = () => { return ( -
{ Snowball
- ); }; diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx index 9c0ca570..daad9918 100644 --- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx +++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx @@ -1,6 +1,6 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; -import { NavLink, useNavigate, useParams } from 'react-router-dom'; -import { Organization, User } from 'gql-client'; +import { useCallback, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { User } from 'gql-client'; import { motion } from 'framer-motion'; import { useDisconnect } from 'wagmi'; @@ -19,8 +19,6 @@ import { getInitials } from 'utils/geInitials'; import { Button } from 'components/shared/Button'; import { cn } from 'utils/classnames'; import { useMediaQuery } from 'usehooks-ts'; -import { SIDEBAR_MENU } from './constants'; -import { UserSelect } from 'components/shared/UserSelect'; import { BASE_URL } from 'utils/constants'; interface SidebarProps { @@ -28,7 +26,6 @@ interface SidebarProps { } export const Sidebar = ({ mobileOpen }: SidebarProps) => { - const { orgSlug } = useParams(); const navigate = useNavigate(); const client = useGQLClient(); const isDesktop = useMediaQuery('(min-width: 960px)'); @@ -45,46 +42,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => { fetchUser(); }, []); - const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug); - const [organizations, setOrganizations] = useState([]); - - const fetchUserOrganizations = useCallback(async () => { - const { organizations } = await client.getOrganizations(); - setOrganizations(organizations); - }, [orgSlug]); - - useEffect(() => { - fetchUserOrganizations(); - setSelectedOrgSlug(orgSlug); - }, [orgSlug]); - - const formattedSelected = useMemo(() => { - const selected = organizations.find((org) => org.slug === selectedOrgSlug); - return { - value: selected?.slug ?? '', - label: selected?.name ?? '', - imgSrc: '/logo.svg', - }; - }, [organizations, selectedOrgSlug, orgSlug]); - - const formattedSelectOptions = useMemo(() => { - return organizations.map((org) => ({ - value: org.slug, - label: org.name, - imgSrc: '/logo.svg', - })); - }, [organizations, selectedOrgSlug, orgSlug]); - - const renderMenu = useMemo(() => { - return SIDEBAR_MENU(orgSlug).map(({ title, icon, url }, index) => ( - - - {title} - - - )); - }, [orgSlug]); - const handleLogOut = useCallback(async () => { await fetch(`${BASE_URL}/auth/logout`, { method: 'POST', @@ -115,18 +72,10 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => { > {/* Logo */}
- -
- {/* Switch organization */} -
- - - {renderMenu} - +
+ {/* This element ensures the space between logo and navigation */} +
{/* Bottom navigation */}
diff --git a/packages/frontend/src/pages/org-slug/layout.tsx b/packages/frontend/src/pages/org-slug/layout.tsx index b1bf2226..4cf7955a 100644 --- a/packages/frontend/src/pages/org-slug/layout.tsx +++ b/packages/frontend/src/pages/org-slug/layout.tsx @@ -9,7 +9,7 @@ import { import { Sidebar } from 'components/shared/Sidebar'; import { OctokitProvider } from 'context/OctokitContext'; import { ComponentPropsWithoutRef, useEffect, useState } from 'react'; -import { Outlet, useParams } from 'react-router-dom'; +import { Outlet } from 'react-router-dom'; import { AnimatePresence, motion } from 'framer-motion'; import { cn } from 'utils/classnames'; import { useMediaQuery } from 'usehooks-ts'; @@ -22,7 +22,6 @@ export const DashboardLayout = ({ className, ...props }: DashboardLayoutProps) => { - const { orgSlug } = useParams(); const isDesktop = useMediaQuery('(min-width: 960px)'); const [isSidebarOpen, setIsSidebarOpen] = useState(false); @@ -45,7 +44,7 @@ export const DashboardLayout = ({ > {/* Header on mobile */}
- +
{isSidebarOpen ? (