Merge pull request #29 from kir-dev/feature/21-navbar

Feature/21 navbar

apps/frontend/package.json

@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-switch": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.372.0",
@@ -25,9 +26,9 @@
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
+    "eslint-plugin-react": "^7.34.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
-    "eslint-plugin-react": "^7.34.1"
+    "typescript": "^5.4.5"
   }
 }

apps/frontend/src/app/page.tsx

@@ -1,9 +1,9 @@
-import { HelloWorld } from '@/components/hello-world';
+import LandingNavbar from '@/components/landing-navbar';
 
 export default function Home() {
   return (
-    <main className='flex items-center justify-center'>
-      <HelloWorld className='mt-10' />
+    <main>
+      <LandingNavbar />
     </main>
   );
 }

apps/frontend/src/components/landing-navbar.tsx

@@ -0,0 +1,122 @@
+import Link from 'next/link'; // Import the Link component
+
+import { Switch } from '@/components/ui/switch';
+import { cn } from '@/lib/utils';
+
+export default function LandingNavbar() {
+  return (
+    <div className={cn('flex flex-col md:flex-row')}>
+      <div
+        className={cn(
+          'w-full md:w-[270px] h-screen bg-[#031C30] flex flex-col justify-between items-center shadow-[0px_9px_94px_rgba(0,0,0,0.15)] relative'
+        )}
+      >
+        {/* Logo és cím */}
+        <div className={cn('flex flex-col items-center justify-center w-full pt-4 md:pt-8')}>
+          <div className={cn('flex items-center gap-x-3')}>
+            <img src='/kirlogo.ico' alt='Logo' className={cn('w-[30px] h-[30px] md:w-[41px] md:h-[41px]')} />
+            <div className={cn('text-white text-lg leading-tight')}>
+              <h1 className={cn('text-center text-sm md:text-base')}>Collage Schedule</h1>
+              <h2 className={cn('text-center text-sm md:text-base')}>Planner</h2>
+            </div>
+          </div>
+        </div>
+
+        {/* Menü opciók */}
+        <nav className={cn('flex flex-col w-full mt-4 md:mt-6')}>
+          <Link href='/'>
+            <button
+              className={cn(
+                'flex items-center gap-x-4 py-2 px-4 md:py-2.5 md:px-5 bg-[#4C566A] text-white w-full text-xs md:text-sm rounded-md'
+              )}
+            >
+              <img src='/Home.png' alt='Dashboard' className={cn('w-4 h-4 md:w-5 md:h-5')} />
+              Dashboard
+            </button>
+          </Link>
+          <Link href='/event-focus'>
+            <button
+              className={cn(
+                'flex items-center gap-x-4 py-2 px-4 md:py-2.5 md:px-5 text-white w-full text-xs md:text-sm mt-2'
+              )}
+            >
+              <img src='/Edit%20Square.png' alt='Event focus' className={cn('w-4 h-4 md:w-5 md:h-5')} />
+              Event focus
+            </button>
+          </Link>
+          <Link href='/statistics'>
+            <button
+              className={cn(
+                'flex items-center gap-x-4 py-2 px-4 md:py-2.5 md:px-5 text-white w-full text-xs md:text-sm mt-2'
+              )}
+            >
+              <img src='/Charts.png' alt='Statistics' className={cn('w-4 h-4 md:w-5 md:h-5')} />
+              Statistics
+            </button>
+          </Link>
+          <Link href='/groups'>
+            <button
+              className={cn(
+                'flex items-center gap-x-4 py-2 px-4 md:py-2.5 md:px-5 text-white w-full text-xs md:text-sm mt-2'
+              )}
+            >
+              <img src='/3%20User.png' alt='Groups' className={cn('w-4 h-4 md:w-5 md:h-5')} />
+              Groups
+            </button>
+          </Link>
+        </nav>
+
+        {/* Első szürke vonal */}
+        <div className={cn('w-[90%] h-[1px] bg-[#4C566A] mt-4')} />
+
+        {/* Hét megjelenítése */}
+        <div className={cn('flex items-center justify-center w-full py-4 md:py-6')}>
+          <div
+            className={cn(
+              'relative bg-[#374151] text-white text-center rounded-lg h-[150px] w-[150px] md:h-[200px] md:w-[200px] flex items-center justify-center'
+            )}
+          >
+            {/* Hátterkép */}
+            <img
+              src='/counterbg.png'
+              alt='Background'
+              className={cn('absolute inset-0 w-full h-full rounded-lg object-cover opacity-20')}
+            />
+            {/* Kép előtti szöveg */}
+            <div className={cn('relative')}>
+              <h2 className={cn('text-5xl md:text-6xl opacity-80')}>WEEK</h2>
+              <p className={cn('text-5xl md:text-6xl font-light opacity-80')}>10</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Második szürke vonal */}
+        <div className={cn('w-[90%] h-[1px] bg-[#4C566A]')} />
+
+        {/* Dark Mode és Logout */}
+        <div className={cn('flex flex-col gap-y-4 w-full py-4 md:py-6 px-3 md:px-4')}>
+          <div className={cn('flex items-center justify-between')}>
+            <div className={cn('flex items-center gap-x-2 text-white')}>
+              <img src='/Vector.png' alt='Dark Mode' className={cn('w-4 h-4 md:w-5 md:h-5')} />
+              <h1 className={cn('text-xs md:text-sm')}>Dark Mode</h1>
+            </div>
+            <div>
+              {/* Itt használjuk a switch komponenst */}
+              <Switch defaultChecked />
+            </div>
+          </div>
+          <Link href='/logout'>
+            <button
+              className={cn(
+                'flex items-center gap-x-3 py-2 px-4 md:py-2.5 md:px-5 bg-[#4C566A] text-white w-full text-xs md:text-sm rounded-md'
+              )}
+            >
+              <img src='/Logout.png' alt='Logout' className={cn('w-[18px] h-[18px] md:w-[20px] md:h-[20px]')} />
+              <h1 className={cn('text-xs md:text-sm')}>Logout</h1>
+            </button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = 'Input';
+
+export { Input };

apps/frontend/src/components/ui/switch.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=unchecked]:bg-slate-200 dark:focus-visible:ring-slate-300 dark:focus-visible:ring-offset-slate-950 dark:data-[state=checked]:bg-slate-50 dark:data-[state=unchecked]:bg-slate-800',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-slate-950'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };