From 5bd5e15aa5ce787c434740470791cc44b150fc29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Kir=C3=A1ly?= <balintkiraly.dev@gmail.com>
Date: Fri, 13 Dec 2024 16:55:00 +0100
Subject: [PATCH] Sidebar redesign

---
 .../frontend/src/components/layout/header.tsx | 24 +++--------
 .../src/components/layout/sidebar.tsx         | 43 +++++++++++++------
 .../src/components/ui/action-button.tsx       | 32 ++++++++++++++
 apps/frontend/src/components/ui/button.tsx    |  3 ++
 4 files changed, 72 insertions(+), 30 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/action-button.tsx

diff --git a/apps/frontend/src/components/layout/header.tsx b/apps/frontend/src/components/layout/header.tsx
index 537fc8b..c1a80a7 100644
--- a/apps/frontend/src/components/layout/header.tsx
+++ b/apps/frontend/src/components/layout/header.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { motion } from 'framer-motion';
 import { GeistSans } from 'geist/font/sans';
 import { ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 
 import { ThemeToggle } from '@/components/layout/theme-toggle';
+import ActionButton from '@/components/ui/action-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -31,22 +31,12 @@ export function Header() {
       </Link>
 
       <div className='w-80 pl-8 flex items-center justify-between'>
-        <motion.div className='group transition-colors' whileHover='hover'>
-          <Button
-            variant='outline'
-            className='relative h-10 text-primary rounded-full font-light hover:text-primary hover:bg-transparent'
-          >
-            My Bands
-            <motion.div
-              variants={{
-                hover: { x: 4 },
-              }}
-              transition={{ duration: 0.2 }}
-            >
-              <ChevronRight />
-            </motion.div>
-          </Button>
-        </motion.div>
+        <ActionButton
+          text='My Bands'
+          icon={<ChevronRight />}
+          variant='outline'
+          className='h-10 rounded-full font-light hover:bg-transparent'
+        />
 
         <div className='flex gap-3 items-center'>
           <ThemeToggle />
diff --git a/apps/frontend/src/components/layout/sidebar.tsx b/apps/frontend/src/components/layout/sidebar.tsx
index 40daccf..8761beb 100644
--- a/apps/frontend/src/components/layout/sidebar.tsx
+++ b/apps/frontend/src/components/layout/sidebar.tsx
@@ -1,20 +1,31 @@
-import { BarChart3, CalendarPlus, Heart, KeyboardMusic, ListMusic, MicVocal, Radio } from 'lucide-react';
+import {
+  BarChart3,
+  BookAudio,
+  CalendarPlus,
+  Heart,
+  KeyboardMusic,
+  ListMusic,
+  MicVocal,
+  Plus,
+  Radio,
+} from 'lucide-react';
 import Link from 'next/link';
 
+import ActionButton from '@/components/ui/action-button';
 import { Button } from '@/components/ui/button';
 
 export function Sidebar() {
   return (
     <div className='w-64 p-4 flex flex-col'>
-      <div className='space-y-4'>
+      <div className='mt-10 space-y-10'>
         <div className='space-y-2'>
-          <Button variant='ghost' className='w-full justify-start' asChild>
+          <Button variant='blastActive' className='w-full justify-start' asChild>
             <Link href='/apps/frontend/public'>
               <Radio className='mr-2 h-4 w-4' />
               Feed
             </Link>
           </Button>
-          <Button variant='ghost' className='w-full justify-start' asChild>
+          <Button variant='blast' className='w-full justify-start' asChild>
             <Link href='/apps/frontend/public'>
               <ListMusic className='mr-2 h-4 w-4' />
               Bands
@@ -25,31 +36,37 @@ export function Sidebar() {
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>About Us</h2>
           <div className='space-y-2'>
-            <Button variant='ghost' className='w-full justify-start' asChild>
+            <Button variant='blast' className='w-full justify-start' asChild>
               <Link href='/apps/frontend/public'>
                 <Heart className='mr-2 h-4 w-4' />
                 MMMK
               </Link>
             </Button>
-            <Button variant='ghost' className='w-full justify-start' asChild>
+            <Button variant='blast' className='w-full justify-start' asChild>
               <Link href='/apps/frontend/public'>
                 <MicVocal className='mr-2 h-4 w-4' />
                 The Room
               </Link>
             </Button>
+            <Button variant='blast' className='w-full justify-start' asChild>
+              <Link href='/apps/frontend/public'>
+                <BookAudio className='mr-2 h-4 w-4' />
+                Rules
+              </Link>
+            </Button>
           </div>
         </div>
 
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>For Members</h2>
           <div className='space-y-2'>
-            <Button variant='ghost' className='w-full justify-start' asChild>
+            <Button variant='blast' className='w-full justify-start' asChild>
               <Link href='/apps/frontend/public'>
                 <CalendarPlus className='mr-2 h-4 w-4' />
                 New Reservations
               </Link>
             </Button>
-            <Button variant='ghost' className='w-full justify-start' asChild>
+            <Button variant='blast' className='w-full justify-start' asChild>
               <Link href='/apps/frontend/public'>
                 <BarChart3 className='mr-2 h-4 w-4' />
                 Statistics
@@ -61,7 +78,7 @@ export function Sidebar() {
         <div className='pt-4'>
           <h2 className='text-xs uppercase text-zinc-400 font-bold mb-2'>Admin</h2>
           <div className='space-y-2'>
-            <Button variant='ghost' className='w-full justify-start' asChild>
+            <Button variant='blast' className='w-full justify-start' asChild>
               <Link href='/apps/frontend/public'>
                 <KeyboardMusic className='mr-2 h-4 w-4' />
                 Super View
@@ -69,11 +86,11 @@ export function Sidebar() {
             </Button>
           </div>
         </div>
-      </div>
 
-      <Button className='mt-auto' variant='outline'>
-        Make new Reservation
-      </Button>
+        <div className='pt-4'>
+          <ActionButton text='Make new Reservation' icon={<Plus />} variant='ghostPrimary' />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/frontend/src/components/ui/action-button.tsx b/apps/frontend/src/components/ui/action-button.tsx
new file mode 100644
index 0000000..19c8fbf
--- /dev/null
+++ b/apps/frontend/src/components/ui/action-button.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import React from 'react';
+
+import { Button, ButtonProps } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ActionButtonProps extends ButtonProps {
+  text: string;
+  icon: React.ReactNode;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({ text, variant, icon, className }) => {
+  return (
+    <motion.div className='group transition-colors' whileHover='hover'>
+      <Button variant={variant} className={cn('relative text-primary hover:text-primary', className)}>
+        {text}
+        <motion.div
+          variants={{
+            hover: { x: 4 },
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          {icon}
+        </motion.div>
+      </Button>
+    </motion.div>
+  );
+};
+
+export default ActionButton;
diff --git a/apps/frontend/src/components/ui/button.tsx b/apps/frontend/src/components/ui/button.tsx
index 8c5cab9..b78aa38 100644
--- a/apps/frontend/src/components/ui/button.tsx
+++ b/apps/frontend/src/components/ui/button.tsx
@@ -15,6 +15,9 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        blast: 'hover:text-primary hover:bg-gradient-to-r from-orange-500/20 via-orange-500/10 to-transparent',
+        blastActive: 'text-primary bg-gradient-to-r from-orange-500/20 via-orange-500/10 to-transparent',
+        ghostPrimary: 'text-primary bg-orange-500/10 hover:bg-orange-500/20',
       },
       size: {
         default: 'h-9 px-4 py-2',