Sidebar Navigation

.meteor/versions

@@ -43,9 +43,6 @@ localstorage@1.2.1
 logging@1.3.6
 meteor@2.1.1
 meteor-base@1.5.2
-meteortesting:browser-tests@1.8.0
-meteortesting:mocha@3.3.0
-meteortesting:mocha-core@8.2.0
 minifier-css@2.0.1
 minifier-js@3.0.1
 minimongo@2.0.2

GEMINI.md

@@ -340,7 +340,7 @@ Users can go to "/" to discover new sounds that they haven't heard before.
   * For each block add a description + title
   * Main title for page is "Discover"
 
-# Collab Finder
+### Collab Finder
 
 The user can use a collab finder to find their next collaboration (producer, musicians, vocalists) etc. It's like a tinder for musicians.
 
@@ -360,7 +360,7 @@ The user can use a collab finder to find their next collaboration (producer, mus
 * Add a new NavLink called "Match" to the right of "Hot" and the left of Search which displays the collab finder
 * Style it similarly to the "Battle Pit"
 
-# Feedback for Feedback
+### Feedback for Feedback
 
 Give 2 pieces of feedback for tracks, get "one feedback coin" to request feedbacks from others.
 
@@ -394,3 +394,16 @@ Give 2 pieces of feedback for tracks, get "one feedback coin" to request feedbac
     * Sort the feedbacks by createdAt
     * Display the createdAt timestamp with date-fns: formatDistanceToNow
     * Each feedback is linked to the detail feedback page (more info below)
+
+### Audio Sample Market
+
+Provide a free (for now) sample market that is used by the users to share their sounds with each other.
+
+* Add "isSample" field (default: false, optional: true), bpm (optional, number) to sound collection
+* Add isSample doesn't equal true to the sound publications, so that samples aren't listed in the existing sound lists (hot, explore, discover, following)
+* Add "Is Sample" checkbox to both Sound Add and Edit form (update the Meteor.methods too)
+* If "isSample" is true, display BPM and Key Fields in a section called "Sample Data" in the edit and add form (reuse code if possible)
+* Create new page called "Samples"
+* On the "Samples" page, only show sounds where isSample = true
+* By default sort the samples by "hottest" (most plays in the last 30 days) and display a select dropdown that allows the user to sort by "newest" and "random"
+* Add a filter for BPM

imports/ui/App.jsx

@@ -50,6 +50,7 @@ import Footer from './components/Footer';
 import AudioPlayer from './components/AudioPlayer';
 import TermsOfService from './pages/TermsOfService';
 import PrivacyPolicy from './pages/PrivacyPolicy';
+import SidebarComponent from "./components/Sidebar";
 
 // Import AudioPlayerContext
 import { AudioPlayerProvider, useAudioPlayer } from './contexts/AudioPlayerContext';
@@ -91,10 +92,12 @@ export const App = () => {
             {emailSent && <p className="text-sm mt-2">Verification email sent!</p>}
           </div>
         )}
-        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route path="/about" component={About} />
+        <div className="flex max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <SidebarComponent />
+          <main className="w-full px-4 sm:px-6 lg:px-8 py-8 !pr-0">
+            <Switch>
+              <Route exact path="/" component={Home} />
+              <Route path="/about" component={About} />
         <Route path="/sign-in" component={SignIn} />
         <Route path="/sign-up" component={SignUp} />
         <Route path="/forgot-password" component={ForgotPassword} />
@@ -169,7 +172,8 @@ export const App = () => {
         }} />
         <Route component={NotFound} />
       </Switch>
-        </main>
+          </main>
+        </div>
         {currentSound && (
           <AudioPlayer />
         )}

imports/ui/components/Navbar.jsx

@@ -19,15 +19,6 @@ const Navbar = ({ user }) => {
 
   const handleDropdownClick = () => setIsOpen(false);
 
-  const loggedInLinks = (
-    <>
-      <NavLink exact onClick={handleDropdownClick} to="/" activeStyle={activeLinkStyle} className="text-gray-600 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Home</NavLink>
-      <NavLink onClick={handleDropdownClick} to="/match" activeStyle={activeLinkStyle} className="text-gray-600 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Match</NavLink>
-      <NavLink onClick={handleDropdownClick} to="/feedback" activeStyle={activeLinkStyle} className="text-gray-600 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Feedback</NavLink>
-      <NavLink onClick={handleDropdownClick} to="/sound/add" activeStyle={activeLinkStyle} className="text-gray-600 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Upload</NavLink>
-    </>
-  );
-
   const loggedOutLinks = (
     <>
       <NavLink exact onClick={handleDropdownClick} to="/" activeStyle={activeLinkStyle} className="text-gray-600 hover:text-blue-500 px-3 py-2 rounded-md text-sm font-medium">Home</NavLink>
@@ -71,12 +62,9 @@ const Navbar = ({ user }) => {
           <div className="flex items-center">
             <Link onClick={handleDropdownClick} to="/" className="text-xl font-bold text-blue-500">Sounds Social</Link>
             <div className="hidden md:block">
-              <div className="ml-10 flex items-baseline">
+              <div className="ml-24 flex items-baseline">
                 {user ? (
                   <>
-                    <div className="flex items-baseline space-x-4">
-                      {loggedInLinks}
-                    </div>
                     <SearchBar />
                   </>
                 ) : (
@@ -133,7 +121,6 @@ const Navbar = ({ user }) => {
           <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
             {user ? (
               <>
-                {loggedInLinks}
                 <div className="mt-4">
                   <SearchBar />
                 </div>

imports/ui/components/Sidebar.jsx

@@ -0,0 +1,32 @@
+
+import React from 'react';
+import { Sidebar, SidebarItem, SidebarItemGroup, SidebarItems } from "flowbite-react";
+import { FiHome, FiUsers } from "react-icons/fi";
+import { MdOutlineFeedback } from "react-icons/md";
+import { LuFileMusic } from "react-icons/lu";
+import { Link } from 'react-router-dom';
+
+const SidebarComponent = () => {
+  return (
+    <Sidebar className="mt-1" aria-label="Default sidebar example">
+      <SidebarItems>
+        <SidebarItemGroup>
+          <SidebarItem as={Link} to="/" icon={FiHome}>
+            Home
+          </SidebarItem>
+          <SidebarItem as={Link} to="/match" icon={FiUsers}>
+            Collab Finder
+          </SidebarItem>
+          <SidebarItem as={Link} to="/feedback" icon={MdOutlineFeedback}>
+            Feedback
+          </SidebarItem>
+          <SidebarItem as={Link} to="/sound/add" icon={LuFileMusic}>
+            Sound Upload
+          </SidebarItem>
+        </SidebarItemGroup>
+      </SidebarItems>
+    </Sidebar>
+  );
+};
+
+export default SidebarComponent;