Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Avendaosander/Plataforma-social/llms.txt

Use this file to discover all available pages before exploring further.

The Navbar is a fixed left-sidebar navigation component rendered inside app/home/layout.tsx. It provides primary navigation links, a collapsible notification panel, a user menu (“Mas”) with secondary actions, and a dark mode toggle. Every /home/* page (except /home/my-profile/settings) displays the Navbar on the left edge of the viewport.

​
Rendering Context

The Navbar is mounted once inside the home layout’s <aside> element: 
// app/home/layout.tsx
<aside className="w-52">
  <Navbar />
</aside>
Because the Navbar is a "use client" component, it has full access to React state, browser events, and Next.js client-side hooks (usePathname, useRouter).
The Navbar is hidden on the /home/my-profile/settings route. This is implemented directly in the component: when pathname === '/home/my-profile/settings' the outermost <section> receives the hidden Tailwind class, giving the settings page full horizontal space.
Above the primary nav, the sidebar has a logo button (“UVM Dev House”) rendered with HomeIcon at large size. This button uses the same widthCondition sizing as the nav links and collapses to icon-only mode when the notification panel is open. The primary <nav> lists six items. Each link is a Next.js <Link> wrapping a <Button> component. The active link is highlighted with bg-lima-400/30 dark:bg-biscay-950 background classes. The current pathname is detected with usePathname() from next/navigation.
LabelIconRouteDescription
Para tiHomeIcon/homeMain “for you” feed — all public posts.
SiguiendoUserCheck/home/followersPosts from users the current user follows.
PopularesTrendingIcon/home/trendingTrending / most-popular components. Note: the active-state check in the source currently compares against "/home?page=trending" rather than "/home/trending", so the active highlight does not fire on this route.
BuscarSearchIcon/home/searchSearch results page with filter panel.
NotificacionesBellIcon(no href — toggles panel)Toggles the notifications side panel.
PerfilUserIcon/home/my-profileCurrent user’s profile page.
Active link classes applied when the current pathname matches the link’s route: 
// Active state classes (applied to the Button className)
"bg-lima-400/30 dark:bg-biscay-950 hover:bg-lima-400/50 dark:hover:bg-biscay-900"

// Inactive hover classes
"hover:bg-lima-400/30 dark:hover:bg-biscay-900"

​
Collapse Behavior (Notification Panel Open)

When the notification panel is open (notifyOpen === true), the Navbar collapses to icon-only mode. Every link button shrinks from w-full to w-auto h-11, and all text labels are hidden using a conditional expression directly in JSX: 
{!notifyOpen && "Para ti"}
{!notifyOpen && "Siguiendo"}
{!notifyOpen && "Notificaciones"}
// … and so on for every label
The widthCondition variable drives the button sizing: 
const widthCondition = notifyOpen ? "w-auto h-11" : "w-full"
This keeps the Navbar tidy when the notification panel is expanded to its 300 px width alongside it.

​
Notifications Panel

Clicking the Notificaciones button (BellIcon) calls notifyHandle(), which flips the notifyOpen state boolean. When open, a panel is rendered immediately to the right of the sidebar: 
{notifyOpen && (
  <div
    className="absolute left-full w-[300px] h-screen bg-seagreen-900 dark:bg-storm-950 text-storm-100 py-2 pr-4 flex flex-col gap-3"
    id="notify"
  >
    <h3 className="text-lg font-semibold">Notificaciones</h3>
    <p className="border-t-[1px] border-white/40">Esta semana</p>
  </div>
)}
The panel mounts at left-full (immediately right of the sidebar column), is 300px wide, and spans the full viewport height. It uses text-storm-100 for its text and bg-seagreen-900 (light mode) / dark:bg-storm-950 (dark mode) backgrounds. Clicking anywhere outside the panel closes it. The Navbar registers a "click" event listener in a useEffect that checks whether the click target is outside the #notify element and sets notifyOpen to false if so. The same pattern applies to the “Mas” user menu (#main).

​
User Menu (“Mas”)

The Mas button at the bottom of the sidebar (MenuIcon) toggles a mainActive state boolean. When active, a popover appears just above the button: 
// Popover position
className="absolute bottom-16 z-30 w-[12rem] py-3 bg-seagreen-900 dark:bg-storm-900 shadow-medium rounded-xl"
The popover contains four items:
ItemIconAction
ConfiguracionesSettingsIconNavigate to /home/my-profile/settings
GuardadosBookmarksIconNavigate to /home/my-profile?bookmarks
(Dark mode toggle)—Renders <ButtonDarkMode /> inline
SalirLogoutIconCalls the logout() function

​
Logout

The logout flow uses NextAuth’s signOut with redirect: false so the redirect URL can be handled programmatically by the router: 
const logout = async () => {
  const data = await signOut({ redirect: false, callbackUrl: '/login' })
  router.push(data.url)
}
signOut returns an object containing the resolved callbackUrl. The component then uses router.push(data.url) to navigate to /login after the session is cleared, giving the client-side router control over the transition instead of a hard browser redirect.

​
Dark Mode Toggle

The <ButtonDarkMode /> component is rendered inside the “Mas” user menu. It is a self-contained client component that reads and writes localStorage to persist the dark mode preference across page loads. Dark mode in Plataforma Social is class-based: toggling it adds or removes the dark class directly on document.documentElement (the <html> element). The component tracks its own isDarkMode boolean state, initialized from localStorage.getItem('darkMode') on first render: 
const [isDarkMode, setIsDarkMode] = useState(() => {
  const savedMode = localStorage.getItem('darkMode');
  return savedMode ? JSON.parse(savedMode) : false;
});

const toggleDarkMode = () => {
  const newMode = !isDarkMode;
  setIsDarkMode(newMode);
  localStorage.setItem('darkMode', JSON.stringify(newMode));
  document.documentElement.classList.toggle('dark', newMode);
};
The button label and icon change dynamically based on the current state:
StateLabelIcon
Dark mode offModo ClaroLightIcon
Dark mode onModo OscuroMoonIcon
A useEffect ensures document.documentElement stays in sync with the isDarkMode state value whenever it changes.
Dark mode is configured in tailwind.config.ts with darkMode: 'class'. This means all dark: utility variants activate only when an ancestor element carries the dark class — ButtonDarkMode is the sole component responsible for setting and persisting this class on document.documentElement.

​
SwitchButton Component

SwitchButton is a small custom toggle used on the /home/my-profile/settings page for privacy and notification preferences. It renders a pill-shaped toggle track with a sliding white knob: 
function SwitchButton() {
  const [checked, setChecked] = useState(true)
  const handleChecked = () => { setChecked(!checked) }
  return (
    <div
      className={`rounded-full w-12 h-6 p-0.5 ${checked ? 'bg-seagreen-900' : 'bg-storm-950'}`}
      onClick={handleChecked}
    >
      <div className={`w-5 h-full bg-white rounded-full transition duration-500 ${checked ? 'translate-x-6' : 'translate-x-0'}`} />
    </div>
  )
}
The knob slides right (translate-x-6) when checked is true (active) and returns to the left (translate-x-0) when false. The track background switches between seagreen-900 (on) and storm-950 (off). Each SwitchButton instance manages its own independent state — there is no shared store or form submission wired up yet.

​
Custom Color Palette

The Navbar uses several custom Tailwind color tokens defined in the project’s theme:
TokenUsage
seagreen-900Navbar background (light mode), notification panel background, “Mas” popover background
lima-400Active and hover tint for navigation links (bg-lima-400/30, bg-lima-400/50)
biscay-950Dark mode active link background
biscay-900Dark mode hover background for links
storm-950Dark mode notification panel background
storm-100Notification panel text color
storm-900Dark mode “Mas” popover background

​
Settings Page Visibility

The Navbar hides itself entirely when the user is on /home/my-profile/settings. The check runs on every render using the live pathname value from usePathname(): 
<section
  className={`fixed flex gap-5 bg-seagreen-900 dark:bg-transparent ${
    pathname === '/home/my-profile/settings' ? 'hidden' : ''
  }`}
>
Because the settings layout has its own back-navigation button (an ArrowLeft button positioned at right-full of the content area), hiding the Navbar prevents layout overlap and provides the settings page with a clean full-width experience.

Build docs developers (and LLMs) love

Get started for freeTalk to us