From f1bd1af5255af7bb629dfe7b4ee9fde916e64848 Mon Sep 17 00:00:00 2001 From: Lncvrt Date: Thu, 17 Jul 2025 15:07:46 -0700 Subject: [PATCH] Add sidebar --- package.json | 6 +++- src/App.tsx | 2 ++ src/componets/Sidebar.css | 21 +++++++++++++ src/componets/Sidebar.tsx | 48 +++++++++++++++++++++++++++++ yarn.lock | 63 +++++++++++++++++++++++++++++++++++++-- 5 files changed, 137 insertions(+), 3 deletions(-) create mode 100644 src/componets/Sidebar.css create mode 100644 src/componets/Sidebar.tsx diff --git a/package.json b/package.json index 46d9b99..49dc3c3 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,13 @@ "@tauri-apps/plugin-opener": "2.4.0", "react": "19.1.0", "react-dom": "19.1.0", - "react-router-dom": "^7.7.0" + "react-router-dom": "7.7.0" }, "devDependencies": { + "@fortawesome/fontawesome-svg-core": "6.7.2", + "@fortawesome/free-brands-svg-icons": "6.7.2", + "@fortawesome/free-solid-svg-icons": "6.7.2", + "@fortawesome/react-fontawesome": "0.2.2", "@tailwindcss/postcss": "4.1.11", "@tauri-apps/cli": "2.6.2", "@types/react": "19.1.8", diff --git a/src/App.tsx b/src/App.tsx index 324f7d4..dc65681 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,12 @@ import { HashRouter, Route, Routes } from 'react-router-dom' import './App.scss' import Home from './routes/Home' +import Sidebar from './componets/Sidebar' export default function App () { return ( + } /> diff --git a/src/componets/Sidebar.css b/src/componets/Sidebar.css new file mode 100644 index 0000000..c8c2d5a --- /dev/null +++ b/src/componets/Sidebar.css @@ -0,0 +1,21 @@ +@import 'tailwindcss'; + +.sidebar { + @apply w-60 h-screen bg-[#191919] flex flex-col; +} + +.logo { + @apply text-2xl font-bold p-4; +} + +.nav-links { + @apply flex flex-col p-4 space-y-1; +} + +.link { + @apply text-white p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s]; +} + +.link.active, .link:hover { + @apply bg-[#313131]; +} \ No newline at end of file diff --git a/src/componets/Sidebar.tsx b/src/componets/Sidebar.tsx new file mode 100644 index 0000000..63c2836 --- /dev/null +++ b/src/componets/Sidebar.tsx @@ -0,0 +1,48 @@ +import './Sidebar.css' +import Icon from '../Icon.png' +import { openUrl } from '@tauri-apps/plugin-opener' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faCog, faServer } from '@fortawesome/free-solid-svg-icons' +import { faDiscord } from '@fortawesome/free-brands-svg-icons' +import { useState } from 'react' + +const Sidebar = () => { + const [rot, setRot] = useState(0) + const [dir, setDir] = useState(1) + + return ( + + ) +} + +export default Sidebar \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ab4e27b..9356a97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -330,6 +330,39 @@ resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.2.6.tgz#93a2a5ef98cc79880355de0aac71def215b873e7" integrity sha512-hzarG7yAhMoP418smNgfY4fO7UmuUEm5JUtbxCoCcFHT0hOJB+d/qAEyoNjz7YkPU5OjM2LM8rJnW8hfm0JLaA== +"@fortawesome/fontawesome-common-types@6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470" + integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg== + +"@fortawesome/fontawesome-svg-core@6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2" + integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/free-brands-svg-icons@6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz#4ebee8098f31da5446dda81edc344025eb59b27e" + integrity sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/free-solid-svg-icons@6.7.2": + version "6.7.2" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6" + integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.7.2" + +"@fortawesome/react-fontawesome@0.2.2": + version "0.2.2" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4" + integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g== + dependencies: + prop-types "^15.8.1" + "@isaacs/fs-minipass@^4.0.0": version "4.0.1" resolved "https://registry.yarnpkg.com/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz#2d59ae3ab4b38fb4270bfa23d30f8e2e86c7fe32" @@ -1008,7 +1041,7 @@ jiti@^2.4.2: resolved "https://registry.yarnpkg.com/jiti/-/jiti-2.4.2.tgz#d19b7732ebb6116b06e2038da74a55366faef560" integrity sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A== -js-tokens@^4.0.0: +"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -1091,6 +1124,13 @@ lightningcss@1.30.1: lightningcss-win32-arm64-msvc "1.30.1" lightningcss-win32-x64-msvc "1.30.1" +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" @@ -1150,6 +1190,11 @@ node-releases@^2.0.19: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314" integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw== +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== + picocolors@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" @@ -1174,6 +1219,15 @@ postcss@8.5.6, postcss@^8.4.41, postcss@^8.5.6: picocolors "^1.1.1" source-map-js "^1.2.1" +prop-types@^15.8.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + react-dom@19.1.0: version "19.1.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.0.tgz#133558deca37fa1d682708df8904b25186793623" @@ -1181,12 +1235,17 @@ react-dom@19.1.0: dependencies: scheduler "^0.26.0" +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-refresh@^0.17.0: version "0.17.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.17.0.tgz#b7e579c3657f23d04eccbe4ad2e58a8ed51e7e53" integrity sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ== -react-router-dom@^7.7.0: +react-router-dom@7.7.0: version "7.7.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.7.0.tgz#25be91ba474b934cdeb36b54551789c2361fbcad" integrity sha512-wwGS19VkNBkneVh9/YD0pK3IsjWxQUVMDD6drlG7eJpo1rXBtctBqDyBm/k+oKHRAm1x9XWT3JFC82QI9YOXXA==