Start work on sidebar & more

src-tauri/tauri.conf.json

@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "identifier": "xyz.lncvrt.games-launcher",
   "build": {
-    "beforeDevCommand": "next dev",
+    "beforeDevCommand": "next dev --webpack",
     "devUrl": "http://localhost:3000",
     "beforeBuildCommand": "next build",
     "frontendDist": "../out"

src/app/globals.css

@@ -1 +0,0 @@
-@import "tailwindcss";

src/app/layout.tsx

@@ -1,5 +1,9 @@
+'use client'
+
+import '@/styles/globals.css'
 import { Roboto } from 'next/font/google'
-import './globals.css'
+
+import Sidebar from '@/componets/Sidebar'
 
 const roboto = Roboto({
   variable: '--font-roboto',
@@ -13,7 +17,10 @@ export default function RootLayout ({
 }>) {
   return (
     <html lang='en' className={roboto.className}>
-      <body>{children}</body>
+      <body className='relative dark-theme'>
+        <Sidebar />
+        <main>{children}</main>
+      </body>
     </html>
   )
 }

src/componets/Sidebar.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import '@/styles/Sidebar.css'
+import { Lexend } from 'next/font/google'
+import Image from 'next/image'
+
+import Icon from '@/assets/Icon.png'
+
+const lexend = Lexend({
+  variable: '--font-lexend',
+  subsets: ['latin']
+})
+
+export default function Sidebar () {
+  return (
+    <aside className={'sidebar ' + lexend.className}>
+      <div className='logo'>
+        <Image src={Icon} width={48} height={48} alt='' />
+        <p>Lncvrt Games Launcher</p>
+      </div>
+    </aside>
+  )
+}

src/styles/Sidebar.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+.sidebar {
+  @apply fixed top-0 left-0 w-60 h-screen bg-(--col1) flex flex-col border-e border-(--col2) z-1;
+}
+
+.sidebar .logo {
+  @apply w-full flex flex-row justify-center items-center gap-2 mt-1;
+}
+
+.sidebar .logo p {
+  @apply text-[15px];
+}

src/styles/globals.css

@@ -0,0 +1,57 @@
+@import "tailwindcss";
+
+body {
+  @apply bg-(--col0) text-white select-none;
+}
+
+.dark-theme {
+  --col0: rgb(0, 0, 0);
+  --col1: rgb(8, 8, 8);
+  --col2: rgb(16, 16, 16);
+  --col3: rgb(32, 32, 32);
+  --col4: rgb(48, 48, 48);
+  --col5: rgb(64, 64, 64);
+  --col6: rgb(80, 80, 80);
+  --col7: rgb(96, 96, 96);
+  --col8: rgb(112, 112, 112);
+  --col9: rgb(128, 128, 128);
+}
+
+.red-theme {
+  --col0: rgb(32, 8, 8);
+  --col1: rgb(40, 16, 16);
+  --col2: rgb(56, 32, 32);
+  --col3: rgb(72, 48, 48);
+  --col4: rgb(88, 64, 64);
+  --col5: rgb(104, 80, 80);
+  --col6: rgb(120, 96, 96);
+  --col7: rgb(136, 112, 112);
+  --col8: rgb(152, 128, 128);
+  --col9: rgb(168, 144, 144);
+}
+
+.blue-theme {
+  --col0: rgb(8, 8, 32);
+  --col1: rgb(16, 16, 40);
+  --col2: rgb(32, 32, 56);
+  --col3: rgb(48, 48, 72);
+  --col4: rgb(64, 64, 88);
+  --col5: rgb(80, 80, 104);
+  --col6: rgb(96, 96, 120);
+  --col7: rgb(112, 112, 136);
+  --col8: rgb(128, 128, 152);
+  --col9: rgb(144, 144, 168);
+}
+
+.purple-theme {
+  --col0: rgb(20, 8, 32);
+  --col1: rgb(28, 16, 40);
+  --col2: rgb(44, 32, 56);
+  --col3: rgb(60, 48, 72);
+  --col4: rgb(76, 64, 88);
+  --col5: rgb(92, 80, 104);
+  --col6: rgb(108, 96, 120);
+  --col7: rgb(124, 112, 136);
+  --col8: rgb(140, 128, 152);
+  --col9: rgb(156, 144, 168);
+}