integration of win98 bottombar menu

package.json

@@ -34,6 +34,7 @@
     "react-draggable": "^4.4.5",
     "react-ga4": "^2.1.0",
     "react-helmet-async": "^1.3.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
     "react-spring": "^9.7.0",

src/components/CustomBottomBar/index.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react'
+import styled from 'styled-components/macro'
+
+import Paper from '../TaskBar/MenuComponents/book.png'
+import Tree from '../TaskBar/MenuComponents/discord.png'
+import Setting from '../TaskBar/MenuComponents/settings.png'
+import Shutdown from '../TaskBar/MenuComponents/shutdown.png'
+import { StartMenuListItem } from '../TaskBar/MenuComponents/startMenuListItem'
+import StartButton from '../TaskBar/StartButton'
+
+interface CustomBottomBarProps {
+  setSelected: (selected: string) => void
+  bottomBarVisible: boolean
+}
+
+const ParentContainer = styled.div`
+  margin-top: 265px;
+`
+
+const BottomBarMenuStyled = styled.div`
+  background-color: #adaac9;
+  width: 20%;
+  border-bottom: 2px solid #555;
+  border-right: 3px solid #090808;
+`
+
+const CustomBottomBar: React.FC<CustomBottomBarProps> = ({ setSelected, bottomBarVisible }) => {
+  const [showSide, setShowSide] = useState(false)
+  const [showConnectWalletModal, setShowConnectWalletModal] = useState(false)
+
+  const settingsSubMenu = (
+    <div>
+      <StartMenuListItem
+        haveSub={false}
+        onSelected={(selected) => {
+          setSelected(selected)
+          setShowConnectWalletModal(selected === 'C') // Show Connect Wallet modal when 'Connect Wallet' is selected
+        }}
+        onShowSide={(showSide) => setShowSide(showSide)}
+        icon={Setting}
+        name="<u>C</u>ollections"
+        menu="submenu"
+      />
+      {/* Add more sub-menu items as needed */}
+    </div>
+  )
+
+  const menuItems = [
+    { id: '1', menu: 'farm', icon: Tree, name: '<u>D</u>iscord' },
+    { id: '2', menu: 'paper', icon: Paper, name: '<u>D</u>ocs' },
+    {
+      id: '3',
+      menu: 'cp',
+      icon: Setting,
+      name: '<u>A</u>pplications',
+      haveSub: true,
+      subMenu: settingsSubMenu,
+    },
+
+    { id: '4', menu: 'shutdown', icon: Shutdown, name: '<u>M</u>ints' },
+    { id: '5', menu: 'startButton', component: <StartButton />, name: '<u>S</u>tart' },
+  ]
+
+  if (!bottomBarVisible) {
+    return null // Hide the component if bottomBarVisible is false
+  }
+
+  return (
+    <ParentContainer>
+      <BottomBarMenuStyled>
+        {menuItems.map((item) => (
+          <React.Fragment key={item.id}>
+            {item.component ? (
+              item.component
+            ) : (
+              <StartMenuListItem
+                haveSub={item.haveSub}
+                onSelected={(selected) => {
+                  setSelected(selected)
+                  setShowConnectWalletModal(selected === 'C')
+                }}
+                onShowSide={(showSide) => setShowSide(showSide)}
+                icon={item.icon}
+                name={item.name}
+                menu={item.menu}
+                subMenu={item.subMenu}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </BottomBarMenuStyled>
+
+      {/* Connect Wallet modal content */}
+      {showConnectWalletModal && (
+        <div>
+          {/* Add your Connect Wallet modal content here */}
+          Connect Wallet Modal
+        </div>
+      )}
+    </ParentContainer>
+  )
+}
+
+export default CustomBottomBar

src/components/TaskBar/MenuComponents/bottombar.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+
+import Paper from './book.png'
+import Setting from './settings.png'
+import Shutdown from './shutdown.png'
+import { StartMenuListItem } from './startMenuListItem'
+import Tree from './three.png'
+
+interface Props {
+  setSelected: (selected: string) => void
+}
+
+const BottomBar = (props: Props) => {
+  const [showSide, setShowSide] = useState<boolean>(false)
+
+  const list = [
+    {
+      menu: 'farm',
+      icon: Tree,
+      name: '<u>F</u>arm',
+    },
+    {
+      menu: 'paper',
+      icon: Paper,
+      name: '<u>P</u>aper',
+    },
+    {
+      menu: 'heartbreak',
+      icon: '/assets/start-icon.png',
+      name: '<u>M</u>EMECOIN',
+    },
+    {
+      menu: 'cp',
+      icon: Setting,
+      name: '<u>S</u>ettings',
+      haveSub: true,
+    },
+    {
+      menu: 'shutdown',
+      icon: Shutdown,
+      name: 'Sh<u>u</u>t Down',
+    },
+  ]
+
+  return (
+    <div className="flex flex-row relative w-[372px] sm:w-[47px]">
+      <div className="bg-[#C1C1C1] w-[185px] sm:w-[240px] border-r-2 border border-b-2 border-b-black border-r-black border-t-white border-l-white">
+        {list.map((item, index) => (
+          <StartMenuListItem
+            key={`start-menu-list-item-${index}`}
+            haveSub={item.haveSub}
+            onSelected={(selected) => props.setSelected(selected)}
+            onShowSide={(showSide) => setShowSide(showSide)}
+            icon={item.icon}
+            name={item.name}
+            menu={item.menu}
+          />
+        ))}
+      </div>
+
+      {showSide ? (
+        <div>
+          <div
+            onClick={() => {
+              props.setSelected('cp')
+            }}
+            className={`flex flex-row justify-between font-windows hover:text-white  hover:bg-[#0A0080] cursor-pointer  bg-gray-400 w-[187px] h-[39px] absolute bottom-[40px] right-0 border-r-2 border border-b-2 border-b-black border-r-black border-t-white border-l-white  
+          }`}
+          >
+            <div className="flex flex-row w-full items-center">
+              <div className="w-1/3 flex flex-row justify-center ">
+                <img src={Setting} width={29} height={29} alt="icon" />
+              </div>
+              <div className="text-[22px]">
+                <span>
+                  <u>C</u>ontrol Panel
+                </span>
+              </div>
+            </div>
+            <div className="mt-2"></div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default BottomBar

src/components/TaskBar/MenuComponents/startMenuListItem.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react'
+import { MdArrowRight } from 'react-icons/md'
+import styled from 'styled-components/macro'
+
+// Define interface for props
+interface IStartMenuListItemProps {
+  haveSub: boolean | undefined
+  onSelected: (selected: string) => void
+  onShowSide: (showSide: boolean) => void
+  icon: any
+  name: string
+  menu: string
+  subMenu?: React.ReactNode // Allow subMenu to be optional
+}
+
+// Include the Google Font VT323 using createGlobalStyle
+
+// Define styled components
+const StartMenuListItemContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: 'font-windows';
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  position: relative; /* Added position relative */
+
+  &:hover {
+    background-color: #39327a;
+    border: none; /* Add this line to remove the border on hover */
+    color: white;
+  }
+`
+
+const MenuItemText = styled.div`
+  font-size: 22px;
+  margin-left: 16px; /* Adjust margin as needed */
+`
+
+const IconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 39px;
+  height: 39px;
+
+  img {
+    border: none; /* Remove the border */
+  }
+
+  &:hover {
+    img {
+      border: none; /* Remove the border on hover */
+    }
+  }
+`
+
+const ArrowContainer = styled.div`
+  margin-left: auto; /* Move to the right end */
+  transform: scale(3); /* Adjust the scale as needed */
+  margin-top: 6px;
+`
+
+const SubMenuContainer = styled.div<{ show?: boolean }>`
+  position: absolute;
+  top: 0;
+  left: 100%; /* Position to the right of the menu item */
+  display: ${(props) => (props.show ? 'block' : 'none')};
+  background-color: #adaac9;
+  color: black;
+  /* Additional styling for the submenu */
+`
+
+// Export the functional component
+export const StartMenuListItem = ({
+  haveSub,
+  onSelected,
+  onShowSide,
+  icon,
+  name,
+  menu,
+  subMenu,
+}: IStartMenuListItemProps) => {
+  const [showSubMenu, setShowSubMenu] = useState(false)
+
+  return (
+    <>
+      <StartMenuListItemContainer
+        onMouseEnter={() => {
+          if (haveSub) {
+            setShowSubMenu(true)
+            onShowSide(true)
+          }
+        }}
+        onMouseLeave={() => {
+          if (haveSub) {
+            setShowSubMenu(false)
+            onShowSide(false)
+          }
+        }}
+        onClick={() => {
+          if (!haveSub) {
+            onSelected(menu)
+          }
+        }}
+      >
+        <IconContainer>
+          <img src={icon} alt="icon" />
+        </IconContainer>
+        <MenuItemText>
+          <span dangerouslySetInnerHTML={{ __html: name }}></span>
+        </MenuItemText>
+        <ArrowContainer>{haveSub && <MdArrowRight className="text-black" />}</ArrowContainer>
+        <SubMenuContainer show={showSubMenu}>{subMenu}</SubMenuContainer>
+      </StartMenuListItemContainer>
+    </>
+  )
+}

src/components/TaskBar/StartButton.tsx

@@ -3,14 +3,15 @@ import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { HighlightButton } from '../Button'
 
 export default function StartButton() {
-  // const { disconnect } = useDisconnect()
+  // const { disconnect } = useDisconnect();
 
   return (
     <>
       <ConnectButton.Custom>
         {({ account, chain, openChainModal, openConnectModal, mounted }) => {
           const ready = mounted
           const connected = ready && account && chain
+
           return (
             <div
               {...(!ready
@@ -26,37 +27,34 @@ export default function StartButton() {
             >
               {connected && !chain?.unsupported && <></>}
               {(() => {
+                const buttonStyle = {
+                  height: '400%',
+                  paddingLeft: 6,
+                  paddingRight: 10,
+                  width: '100%',
+                  // Set the width to 100% for a wider button
+                }
+
                 if (!connected) {
                   return (
-                    <HighlightButton
-                      onClick={openConnectModal}
-                      className="free-height free-width"
-                      style={{ height: '100%', paddingLeft: 6, paddingRight: 10 }}
-                    >
-                      <span style={{ marginTop: -1 }}>🖤 Start</span>
+                    <HighlightButton onClick={openConnectModal} className="free-height free-width" style={buttonStyle}>
+                      <span style={{ marginTop: -1 }}>Click to Connect Wallet</span>
                     </HighlightButton>
                   )
                 }
 
                 if (chain.unsupported) {
                   return (
-                    <HighlightButton
-                      onClick={openChainModal}
-                      className="free-height free-width"
-                      style={{ height: '100%', paddingLeft: 10, paddingRight: 10 }}
-                    >
+                    <HighlightButton onClick={openChainModal} className="free-height free-width" style={buttonStyle}>
                       <span style={{ marginTop: -1 }}>Wrong network</span>
                     </HighlightButton>
                   )
                 }
 
                 return (
                   <div style={{ height: '100%' }}>
-                    <HighlightButton
-                      className="free-height free-width"
-                      style={{ height: '100%', paddingLeft: 6, paddingRight: 10 }}
-                    >
-                      <span style={{ marginTop: -1 }}>🖤 Start</span>
+                    <HighlightButton className="free-height free-width" style={buttonStyle}>
+                      <span style={{ marginTop: -1 }}>Click to Connect Wallet</span>
                     </HighlightButton>
                   </div>
                 )