cinny/src/app/pages/client/SidebarNav.tsx

import React, { useRef } from 'react';
import { Scroll } from 'folds';
import classNames from 'classnames';

import {
  Sidebar,
  SidebarContent,
  SidebarStackSeparator,
  SidebarStack,
} from '../../components/sidebar';
import { SidebarGlass } from '../../components/sidebar/Sidebar.css';
import {
  DirectTab,
  HomeTab,
  SpaceTabs,
  InboxTab,
  ExploreTab,
  SettingsTab,
  UnverifiedTab,
  SearchTab,
  BookmarksTab,
} from './sidebar';
import { CreateTab } from './sidebar/CreateTab';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';

export function SidebarNav() {
  const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
  const [glassmorphismSidebar] = useSetting(settingsAtom, 'glassmorphismSidebar');

  return (
    <Sidebar className={classNames(glassmorphismSidebar && SidebarGlass)}>
      <SidebarContent
        scrollable={
          <Scroll ref={scrollRef} variant="Background" size="0">
            <SidebarStack>
              <HomeTab />
              <DirectTab />
            </SidebarStack>
            <SpaceTabs scrollRef={scrollRef} />
            <SidebarStackSeparator />
            <SidebarStack>
              <ExploreTab />
              <CreateTab />
            </SidebarStack>
          </Scroll>
        }
        sticky={
          <>
            <SidebarStackSeparator />
            <SidebarStack>
              <SearchTab />
              <BookmarksTab />
              <UnverifiedTab />
              <InboxTab />
              <SettingsTab />
            </SidebarStack>
          </>
        }
      />
    </Sidebar>
  );
}