design

src/renderer/components/nav-bar/nav-bar.component.css

@@ -0,0 +1,23 @@
+#logo-bottom{
+  position: absolute;
+  /* width: 200px; height: 200px; */
+  display: block;
+  background-image: url('../../../../assets/logo1.png');
+  -webkit-mask-image: url('../../../../assets/logo1.png');
+  -webkit-mask-size: cover;
+  -webkit-mask-mode: alpha;
+  background-blend-mode: luminosity;
+  background-size: 100%;
+}
+
+#logo-top{
+  position: absolute;
+  /* width: 200px; height: 200px; */
+  display: block;
+  background-image: url('../../../../assets/logo2.png');
+  -webkit-mask-image: url('../../../../assets/logo2.png');
+  -webkit-mask-size: cover;
+  -webkit-mask-mode: alpha;
+  background-blend-mode: luminosity;
+  background-size: 100%;
+}

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { FaPlus, } from 'react-icons/fa';
+import { AiFillSetting } from 'react-icons/ai'
+import './nav-bar.component.css'
+
+export function NavBar() {
+  return (
+    <div className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
+      <div className='w-full flex items-start content-start justify-center relative mb-3'>
+        <div className='relative aspect-square w-16'>
+          <span id='logo-bottom' className='bg-green-400 aspect-square w-16'> </span>
+          <span id='logo-top' className='bg-purple-500 aspect-square w-16'> </span>
+        </div>
+      </div>
+      <div className='grow overflow-y-scroll scrollbar-hide'>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div><div className='grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+
+      </div>
+      <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
+        <span className='cursor-pointer mb-3'>
+          <FaPlus className='text-2xl text-blue-500 drop-shadow-lg'/>
+        </span>
+        <span className='cursor-pointer'>
+          <AiFillSetting className='text-2xl text-blue-500 drop-shadow-lg'/>
+        </span>
+
+      </div>
+    </div>
+  )
+}

src/renderer/components/title-bar/title-bar.component.css

@@ -0,0 +1,34 @@
+#titlebar {
+  height: 30px;
+  width: 100%;
+}
+
+#titlebar #drag-region {
+  -webkit-app-region: drag;
+}
+
+#window-title{
+  height: 100%;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
+#window-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 46px);
+  height: 100%;
+}
+
+#window-controls .button {
+  grid-row: 1 / span 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+#close-button:hover {
+  background: #E81123 !important;
+}

src/renderer/components/title-bar/title-bar.component.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import './title-bar.component.css'
+
+export default function TitleBar() {
+
+  const [maximized, setMaximized] = useState(false);
+
+  const closeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.close', null);
+  }
+
+  const maximizeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.maximize', null);
+  }
+
+  const minimizeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.minimize', null);
+  }
+
+  const resetWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.reset', null);
+  }
+
+  const toogleMaximize = () => {
+    if(maximized){ resetWindow(); }
+    else{ maximizeWindow(); }
+    setMaximized(!maximized);
+  }
+
+  return (
+    <header id="titlebar" className="dark:bg-[#202225] w-screen flex content-center items-center justify-start">
+      <div id="drag-region" className='grow basis-0'>
+        <div id="window-title" className='pl-1'>
+          <span className='text-gray-100 font-bold text-sm'>BSManager</span>
+        </div>
+      </div>
+      <div id="window-controls" className=''>
+          <div onClick={minimizeWindow} className="button button text-gray-200 hover:bg-[#4F545C]" id="min-button" >
+            <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"> </rect></svg>
+          </div>
+          <div onClick={toogleMaximize} className="button text-gray-200 hover:bg-[#4F545C]" id="max-button">
+          <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"> </rect></svg>
+          </div>
+          <div onClick={closeWindow} className="button text-gray-200 cursor-pointer" id="close-button" draggable="false">
+            <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"> </polygon></svg>
+          </div>
+        </div>
+    </header>
+  )
+}