Refactoring : Refacto Custom Menu

+ DotLines component for Drag section
+ Sizes ajustments
+ Styles ajustments

.github/workflows/NextJS.yml

@@ -1,55 +1,55 @@
 name: NextJS CI
 
 on:
-  push:
-    paths:
-    - 'src/**'
-  pull_request:
-    paths:
-    - 'src/**'
+    push:
+        paths:
+            - "src/**"
+    pull_request:
+        paths:
+            - "src/**"
 
 jobs:
-  format:
-    runs-on: ubuntu-latest
+    format:
+        runs-on: ubuntu-latest
 
-    steps:
-    - uses: actions/checkout@v2
+        steps:
+            - uses: actions/checkout@v2
 
-    - name: Use Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: 20
+            - name: Use Node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 20
 
-    - name: Install pnpm
-      run: npm install -g pnpm
+            - name: Install pnpm
+              run: npm install -g pnpm
 
-    - name: Install dependencies
-      run: pnpm install
-      working-directory: src
+            - name: Install dependencies
+              run: pnpm install
+              working-directory: src
 
-    - name: Check formatting
-      run: pnpx prettier .
-      working-directory: src
+            - name: Check formatting
+              run: pnpx prettier .
+              working-directory: src
 
-  lint:
-    needs: format
-    runs-on: ubuntu-latest
+    lint:
+        needs: format
+        runs-on: ubuntu-latest
 
-    steps:
-    - uses: actions/checkout@v2
+        steps:
+            - uses: actions/checkout@v2
 
-    - name: Use Node.js
-      uses: actions/setup-node@v2
-      with:
-        node-version: 20
+            - name: Use Node.js
+              uses: actions/setup-node@v2
+              with:
+                  node-version: 20
 
-    - name: Install pnpm
-      run: npm install -g pnpm
+            - name: Install pnpm
+              run: npm install -g pnpm
 
-    - name: Install dependencies
-      run: pnpm install
-      working-directory: src
+            - name: Install dependencies
+              run: pnpm install
+              working-directory: src
 
-    - name: Lint
-      run: pnpm run lint
-      working-directory: src
+            - name: Lint
+              run: pnpm run lint
+              working-directory: src

src/app/layout.tsx

@@ -39,7 +39,7 @@ export default function RootLayout({
                     <div>
                         <LateralBar />
                     </div>
-                    <div className="bg-secondary relative rounded-3xl">
+                    <div className="bg-background relative rounded-3xl">
                         <CustomMenu />
                         {children}
                     </div>

src/app/settings/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { motion } from "framer-motion";
+
+export default function Page() {
+    return (
+        <motion.div
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{
+                duration: 0.8,
+                delay: 0.2,
+                ease: [0, 0.71, 0.2, 1.01],
+            }}
+            className="flex min-h-screen flex-col items-center justify-center"
+        >
+            <h1 className="text-2xl">Settings</h1>
+        </motion.div>
+    );
+}

src/components/custom/CustomMenu.tsx

@@ -2,8 +2,11 @@
 import { WebviewWindow } from "@tauri-apps/api/window";
 import { useEffect, useState } from "react";
 
-import { X, Minus } from "lucide-react";
+import { X, Minus, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import Style from "./CustomMenu.module.css";
+import Link from "next/link";
+import { DotPattern } from "./DotEffect";
 
 export const CustomMenu = () => {
     const [appWindow, setAppWindow] = useState<WebviewWindow>();
@@ -24,24 +27,33 @@ export const CustomMenu = () => {
         <>
             {appWindow ? (
                 <div className="static">
-                    <div
-                        className="absolute left-0 top-0 flex gap-2 w-full h-content p-5"
-                        data-tauri-drag-region
-                    >
-                        <Button
-                            variant="ghost"
-                            size="menuButton"
-                            onClick={close}
-                        >
-                            <X className="h-4 w-4" />
-                        </Button>
-                        <Button
-                            variant="ghost"
-                            size="menuButton"
-                            onClick={minimize}
-                        >
-                            <Minus className="h-4 w-4" />
-                        </Button>
+                    <div className="absolute left-0 top-0 grid grid-cols-12 w-full h-20 p-5">
+                        <div className="flex gap-2 col-span-1 items-center">
+                            <Button
+                                variant="ghost"
+                                size="menuButton"
+                                onClick={close}
+                            >
+                                <X />
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="menuButton"
+                                onClick={minimize}
+                            >
+                                <Minus />
+                            </Button>
+                        </div>
+                        <div className="col-span-10 p-4" data-tauri-drag-region>
+                            <DotPattern rows={3} dotsPerRow={500} />
+                        </div>
+                        <div className="col-span-1 flex justify-end items-center">
+                            <Link href="/settings">
+                                <Button variant="ghost" size="menuButton">
+                                    <Settings />
+                                </Button>
+                            </Link>
+                        </div>
                     </div>
                 </div>
             ) : null}

src/components/custom/DotEffect.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Circle } from "lucide-react";
+
+interface DotLineProps {
+    count?: number;
+}
+
+const DotLine: React.FC<DotLineProps> = ({ count = 50 }) => {
+    return (
+        <div className="flex justify-between w-1/2 overflow-hidden">
+            {Array.from({ length: count }).map((_, index) => (
+                <Circle
+                    key={index}
+                    size={4}
+                    fill="currentColor"
+                    style={{
+                        opacity: 0.1,
+                    }}
+                />
+            ))}
+        </div>
+    );
+};
+
+interface DotPatternProps {
+    rows?: number;
+    dotsPerRow?: number;
+}
+
+export const DotPattern: React.FC<DotPatternProps> = ({
+    rows = 3,
+    dotsPerRow = 50,
+}) => {
+    return (
+        <div className="flex flex-col items-center">
+            {Array.from({ length: rows }).map((_, index) => (
+                <DotLine key={index} count={dotsPerRow} />
+            ))}
+        </div>
+    );
+};

src/components/ui/button.tsx

@@ -25,7 +25,7 @@ const buttonVariants = cva(
                 sm: "h-9 rounded-md px-3",
                 lg: "h-11 rounded-md px-8",
                 icon: "h-10 w-10",
-                menuButton: "rounded-full p-1",
+                menuButton: "rounded-full p-1 h-6 w-6",
             },
         },
         defaultVariants: {