feat:sidebar fixed

Author: yashxita

src/app/idea/page.tsx

@@ -1,14 +1,14 @@
 "use client";
-import React, { useState, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { fetchSubmission, type Submission } from "@/api/fetchIdeas";
+import { fetchTeams } from "@/api/fetchTeams";
 import { DataTable } from "@/components/table/data-table";
 import { DataTableColumnHeader } from "@/components/table/data-table-column-header";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { fetchTeams } from "@/api/fetchTeams";
-import { fetchSubmission, type Submission } from "@/api/fetchIdeas";
 import { type Team } from "@/data/schema";
+import { useQuery } from '@tanstack/react-query';
 import { type ColumnDef } from "@tanstack/react-table";
+import { useEffect, useState } from 'react';
 
 interface TeamData {
   id: string;
@@ -186,11 +186,11 @@ export default function TeamsIdeasTable() {
             value={selectedTrack || "all"}
             onValueChange={(value) => setSelectedTrack(value === "all" ? "" : value)}
           >
-            <SelectTrigger className="w-48">
+            <SelectTrigger className="w-48 p-6">
               <SelectValue placeholder="Filter by track" />
             </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Tracks</SelectItem>
+            <SelectContent >
+              <SelectItem value="all" >All Tracks</SelectItem>
               {availableTracks.map((track) => (
                 <SelectItem key={track} value={track}>
                   {track}

src/app/team/[id]/page.tsx

@@ -1,16 +1,16 @@
 "use client";
+import { createScore, deleteScore, fetchScores, updateScore } from "@/api/fetchScores";
 import { fetchTeamDetails } from "@/api/fetchTeamDetails";
-import Image from "next/image";
-import { useParams } from "next/navigation";
 import loading from "@/assets/images/loading.gif";
-import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useEffect, useState } from "react";
 import useToast from "@/lib/toast";
-import {  useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { createScore, deleteScore, fetchScores, updateScore } from "@/api/fetchScores";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import Image from "next/image";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 
 interface Score {
@@ -285,14 +285,14 @@ function ScoreSection({ teamId }: { teamId: string }) {
               Total Score: {calculateTotalScore(score)}
             </div>
             <div className="space-x-2">
-              <Button 
+              {/* <Button 
                 size="sm" 
                 variant="secondary"
                 onClick={() => handleEdit(score)}
                 disabled={editMode}
               >
                 Edit
-              </Button>
+              </Button> */}
               <Button 
                 size="sm" 
                 variant="destructive"

src/components/navbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Link from "next/link";
+import { logout } from "@/api/auth";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -17,7 +17,6 @@ import {
 import { LogOutIcon, MenuIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { Sidebar } from "./sidebar";
-import { logout } from "@/api/auth";
 
 export function Navbar() {
     const router = useRouter();

src/components/navigation-wrapper.tsx

@@ -1,9 +1,9 @@
 // app/components/navigation-wrapper.tsx
-"use client"
+"use client";
 
 import { usePathname } from 'next/navigation';
-import { Sidebar } from './sidebar';
 import { Navbar } from './navbar';
+import { Sidebar } from './sidebar';
 
 export function NavigationWrapper({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
@@ -14,8 +14,11 @@ export function NavigationWrapper({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="flex h-screen bg-black">
-      <Sidebar />
+    <div className="flex min-h-screen bg-black ">
+      {/* Sidebar is hidden on smaller screens and visible on medium screens and larger */}
+      <div className="hidden md:block">
+        <Sidebar />
+      </div>
       <div className="flex flex-col flex-1">
         <Navbar />
         <main className="p-8 overflow-y-scroll">
@@ -24,4 +27,4 @@ export function NavigationWrapper({ children }: { children: React.ReactNode }) {
       </div>
     </div>
   );
-}
+}

src/components/sidebar.tsx

@@ -16,7 +16,7 @@ export function Sidebar() {
   ];
 
   return (
-    <aside className="border-r border-gray-200 h-full w-64 dark:border-gray-700">
+    <aside className="md:border-r md:border-gray-700 h-full w-64">
       <ScrollArea className="h-full">
         <div className="p-4">
           <Link href="/" className="text-2xl font-bold mb-6 block">