feat: Opening of corresponding apps upon clicking. (#805)

* feat: Opening of corresponding apps upon clicking.

* fix: Closing of window when app is opened.

src/components/start/index.jsx

@@ -80,9 +80,29 @@ export const BandPane = () => {
       style={{ "--prefix": "BAND" }}
     >
       <div className="bandContainer">
-        <Icon className="hvlight" src="defender" width={17} />
-        <Icon className="hvlight" src="spotify" width={17} />
-        <Icon className="hvlight" src="teams" width={17} />
+        <Icon
+          className="hvlight"
+          width={17}
+          click="CALCUAPP"
+          payload="togg"
+          open="true"
+          src="calculator"
+        />
+        <Icon
+          className="hvlight"
+          width={17}
+          click="SPOTIFY"
+          payload="togg"
+          open="true"
+          src="spotify"
+        />
+        <Icon
+          className="hvlight"
+          width={17}
+          click="NOTEPAD"
+          payload="togg"
+          src="notepad"
+        />
       </div>
     </div>
   );
@@ -128,7 +148,7 @@ export const SidePane = () => {
   function sliderBackground(elem, e) {
     elem.style.setProperty(
       "--track-color",
-      `linear-gradient(90deg, var(--clrPrm) ${e - 3}%, #888888 ${e}%)`,
+      `linear-gradient(90deg, var(--clrPrm) ${e - 3}%, #888888 ${e}%)`
     );
   }
 

src/utils/general.jsx

@@ -24,6 +24,8 @@ String.prototype.count = function (c) {
 };
 
 export const Icon = (props) => {
+  const sidepane = useSelector((state) => state.sidepane);
+
   const dispatch = useDispatch();
   var src = `img/icon/${props.ui != null ? "ui/" : ""}${props.src}.png`;
   if (props.ext != null || (props.src && props.src.includes("http"))) {
@@ -38,6 +40,8 @@ export const Icon = (props) => {
   }
 
   const clickDispatch = (event) => {
+    if (!sidepane.banhide) dispatch({ type: "BANDHIDE" });
+
     var action = {
       type: event.currentTarget.dataset.action,
       payload: event.currentTarget.dataset.payload,