Skip to content

NAVBAR_README.md

Latest commit

 

History

History
115 lines (87 loc) · 3.99 KB

NAVBAR_README.md

File metadata and controls

115 lines (87 loc) · 3.99 KB

Navbar with Collapsible Notebook List

What's Implemented

✅ Collapsible Notebook Sidebar: The navbar now shows a collapsible list of notebooks instead of navigation pages ✅ Modern UI with Mantine 8: Beautiful design using Mantine components and modern CSS ✅ Demo Data: Working with realistic demo notebook data ✅ Authentication Integration: Shows different content based on Supabase authentication status ✅ Interactive Elements: Hover effects, context menus, and smooth animations ✅ TypeScript Types: Proper type definitions for notebooks and related interfaces ✅ Future-Ready Structure: Prepared for TanStack Query + Supabase integration

Features

Navbar Components

  • Header Section: App branding with gradient icon
  • Collapsible Notebook List: Click to expand/collapse
  • Notebook Items: Each shows title, description, last updated date, and sharing status
  • Context Menus: Right-click actions for rename, duplicate, delete
  • Create Button: Quick action to create new notebooks
  • Authentication State: Different views for logged in/out users

Styling

  • Responsive Design: Works on mobile and desktop
  • Modern Animations: Smooth hover effects and transitions
  • Mantine 8 Design System: Uses proper CSS variables and color schemes
  • Dark/Light Theme Support: Automatically adapts to user preferences

Files Created/Modified

Components

  • src/components/navbar/navbar.tsx - Main navbar component
  • src/components/navbar/navbar.module.css - Styling for the navbar

Types

  • src/types/notebook.ts - TypeScript interfaces for notebook data

Hooks (Ready for Supabase)

  • src/hooks/useNotebooks.ts - TanStack Query hooks for notebook CRUD operations

Configuration Templates

  • src/lib/supabase.template.ts - Template for Supabase setup

Next Steps for Supabase Integration

When you're ready to connect to Supabase:

  1. Install Dependencies:

    npm install @supabase/supabase-js @tanstack/react-query

  2. Set up Environment Variables (.env.local):

    VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

  3. Create Database Schema (run in Supabase SQL editor):

    CREATE TABLE notebooks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  content JSONB DEFAULT '{"cells": []}'::jsonb,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  user_id TEXT NOT NULL,
  is_shared BOOLEAN DEFAULT FALSE,
  shared_with TEXT[] DEFAULT '{}',
  tags TEXT[] DEFAULT '{}'
);

ALTER TABLE notebooks ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can access own notebooks" ON notebooks
  FOR ALL USING (auth.jwt() ->> 'sub' = user_id);

  4. Update Configuration:

    • Rename src/lib/supabase.template.ts to src/lib/supabase.ts
    • Add your actual Supabase credentials

  5. Enable TanStack Query (in main.tsx):

    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

// Wrap your app with QueryClientProvider

  6. Update Navbar Component:

    • Uncomment the hook imports in navbar.tsx
    • Replace demo data with actual hooks

Current Demo Data

The navbar currently shows 4 demo notebooks:

  • Financial Analysis
  • Data Science Workshop
  • Math Playground
  • Quick Calculations

Each has realistic metadata like creation dates, descriptions, and sharing status.

UI/UX Features

  • Smooth Animations: Hover effects and state transitions
  • Context-Aware: Different states for authenticated/unauthenticated users
  • Accessible: Proper focus management and keyboard navigation
  • Mobile-Friendly: Responsive design that works on small screens
  • Visual Feedback: Clear indication of active states and interactions

The navbar is now ready for production use with demo data, and can be easily connected to Supabase when you're ready!