wip: wallet view | hide tower

src/App/App.tsx

@@ -62,6 +62,7 @@ const CurrentAppSection = memo(function CurrentAppSection() {
 });
 
 export default function App() {
+    const view = useUIStore((s) => s.view);
     const setError = useAppStateStore((s) => s.setError);
     const setIsWebglNotSupported = useUIStore((s) => s.setIsWebglNotSupported);
 
@@ -75,7 +76,7 @@ export default function App() {
     return (
         <ThemeProvider>
             <GlobalReset />
-            <GlobalStyle />
+            <GlobalStyle $view={view} />
             <LazyMotion features={domAnimation} strict>
                 <FloatingElements />
                 <CurrentAppSection />

src/containers/main/Dashboard/styles.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import * as m from 'motion/react-m';
+import styled from 'styled-components';
 
 export const DashboardContentContainer = styled(m.div)`
     display: flex;

src/containers/main/SidebarNavigation/SidebarNavigation.styles.ts

@@ -17,6 +17,7 @@ export const SidebarWrapper = styled(m.div)`
     flex-direction: column;
     border-radius: 20px;
     height: 100%;
+    position: relative;
     overflow: hidden;
 `;
 

src/containers/main/SidebarNavigation/SidebarNavigation.tsx

@@ -1,33 +1,19 @@
 import { memo } from 'react';
 import { AnimatePresence } from 'motion/react';
-
-import { setShowWalletHistory, useUIStore } from '@app/store/useUIStore.ts';
+import { useUIStore } from '@app/store/useUIStore.ts';
+import { SidebarNavigationWrapper } from './SidebarNavigation.styles.ts';
 import Sidebar from './Sidebars/Sidebar.tsx';
 import SidebarMini from './Sidebars/SidebarMini.tsx';
-import { SidebarCover, SidebarNavigationWrapper } from './SidebarNavigation.styles.ts';
 
 const SidebarNavigation = memo(function SidebarNavigation() {
-    const showSidebarCover = useUIStore((s) => s.showSidebarCover);
-    const sidebarOpen = useUIStore((s) => s.sidebarOpen);
-
-    function handleCoverClick() {
-        setShowWalletHistory(false);
-    }
-
+    const { sidebarOpen, view } = useUIStore((s) => ({
+        sidebarOpen: s.sidebarOpen,
+        view: s.view,
+    }));
     return (
         <SidebarNavigationWrapper>
             <SidebarMini />
-            <AnimatePresence>{sidebarOpen && <Sidebar />}</AnimatePresence>
-            <AnimatePresence>
-                {showSidebarCover ? (
-                    <SidebarCover
-                        onClick={handleCoverClick}
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                    />
-                ) : null}
-            </AnimatePresence>
+            <AnimatePresence>{sidebarOpen && view === 'mining' && <Sidebar />}</AnimatePresence>
         </SidebarNavigationWrapper>
     );
 });

src/containers/main/SidebarNavigation/Sidebars/Navigation.tsx

@@ -0,0 +1,84 @@
+import { memo, ReactNode } from 'react';
+import { IoChevronForwardOutline } from 'react-icons/io5';
+import { setAnimationProperties } from '@app/visuals.ts';
+
+import { useUIStore } from '@app/store/useUIStore.ts';
+import { WalletOutlineSVG } from '@app/assets/icons/wallet-outline.tsx';
+import { CubeOutlineSVG } from '@app/assets/icons/cube-outline.tsx';
+import { SB_MINI_WIDTH, SB_SPACING, SB_WIDTH } from '@app/theme/styles.ts';
+import { HoverIconWrapper, MiningIconWrapper, NavigationWrapper, StyledIconButton } from './SidebarMini.styles.ts';
+
+interface NavButtonProps {
+    children: ReactNode;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+function NavButton({ children, isActive, onClick }: NavButtonProps) {
+    return (
+        <StyledIconButton variant="secondary" active={isActive} onClick={onClick}>
+            {children}
+        </StyledIconButton>
+    );
+}
+
+const transition = { rotate: { type: 'spring' }, opacity: { delay: 0.05 } };
+const Navigation = memo(function Navigation() {
+    const { setSidebarOpen, sidebarOpen, setView, view } = useUIStore((s) => ({
+        setSidebarOpen: s.setSidebarOpen,
+        sidebarOpen: s.sidebarOpen,
+        setView: s.setView,
+        view: s.view,
+    }));
+
+    const miningActive = view === 'mining';
+
+    function handleMiningClick() {
+        if (!miningActive) {
+            setView('mining');
+        } else {
+            setSidebarOpen(!sidebarOpen);
+            const offset = ((sidebarOpen ? SB_MINI_WIDTH : SB_WIDTH) + SB_SPACING) / window.innerWidth;
+            setAnimationProperties([{ property: 'cameraOffsetX', value: offset }]);
+        }
+    }
+    const rotate = sidebarOpen ? '180deg' : '0deg';
+    const minerActiveIcon = miningActive ? (
+        <>
+            <HoverIconWrapper
+                whileHover={{ opacity: 1 }}
+                animate={{ rotate, transition }}
+                style={{
+                    opacity: 0,
+                    rotate,
+                }}
+            >
+                <IoChevronForwardOutline size={28} />
+            </HoverIconWrapper>
+        </>
+    ) : null;
+
+    function handleWalletClick() {
+        setView('wallet');
+    }
+    const miningSection = (
+        <NavButton onClick={handleMiningClick} isActive={miningActive}>
+            {minerActiveIcon}
+            <MiningIconWrapper>
+                <CubeOutlineSVG />
+            </MiningIconWrapper>
+        </NavButton>
+    );
+    const walletSection = (
+        <NavButton onClick={handleWalletClick} isActive={!miningActive}>
+            <WalletOutlineSVG />
+        </NavButton>
+    );
+    return (
+        <NavigationWrapper>
+            {miningSection}
+            {walletSection}
+        </NavigationWrapper>
+    );
+});
+
+export default Navigation;

src/containers/main/SidebarNavigation/Sidebars/Sidebar.tsx

@@ -10,14 +10,22 @@ import Miner from '../components/Miner/Miner.tsx';
 
 import { GridAreaBottom, GridAreaTop, SidebarGrid, WalletSpacer } from './Sidebar.styles.ts';
 import { SB_WIDTH } from '@app/theme/styles.ts';
-import { SidebarWrapper } from '../SidebarNavigation.styles.ts';
+import { SidebarCover, SidebarWrapper } from '../SidebarNavigation.styles.ts';
+import { setShowWalletHistory, useUIStore } from '@app/store/useUIStore.ts';
+import { AnimatePresence } from 'motion/react';
 
 const variants = {
     open: { opacity: 1, left: 0, transition: { duration: 0.3, ease: 'easeIn' } },
     closed: { opacity: 0.5, left: -50, transition: { duration: 0.05, ease: 'easeOut' } },
 };
 
 const Sidebar = memo(function Sidebar() {
+    const showSidebarCover = useUIStore((s) => s.showSidebarCover);
+
+    function handleCoverClick() {
+        setShowWalletHistory(false);
+    }
+
     return (
         <SidebarWrapper style={{ width: SB_WIDTH }} variants={variants} initial="closed" exit="closed" animate="open">
             <SidebarGrid>
@@ -34,6 +42,16 @@ const Sidebar = memo(function Sidebar() {
                     <Wallet />
                 </GridAreaBottom>
             </SidebarGrid>
+            <AnimatePresence>
+                {showSidebarCover ? (
+                    <SidebarCover
+                        onClick={handleCoverClick}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                    />
+                ) : null}
+            </AnimatePresence>
         </SidebarWrapper>
     );
 });

src/containers/main/SidebarNavigation/Sidebars/SidebarMini.styles.ts

@@ -1,4 +1,6 @@
+import * as m from 'motion/react-m';
 import styled from 'styled-components';
+import { IconButton } from '@app/components/elements/buttons/IconButton.tsx';
 
 export const MinimizedWrapper = styled.div`
     display: flex;
@@ -8,14 +10,42 @@ export const MinimizedWrapper = styled.div`
     justify-content: space-between;
     padding: 30px 0;
 `;
-export const LogoWwrapper = styled.div`
+
+export const MiningIconWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    transition: 0.2s ease;
+    z-index: 1;
+`;
+
+export const HoverIconWrapper = styled(m.div)`
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    z-index: 2;
+
+    &:hover + {
+        & ${MiningIconWrapper} {
+            opacity: 0;
+        }
+    }
+`;
+
+export const LogoWrapper = styled.div`
     width: 32px;
     svg {
         max-width: 100%;
     }
 `;
-export const CTAWrapper = styled.div`
+export const NavigationWrapper = styled.div`
     display: flex;
     flex-direction: column;
     gap: 10px;
 `;
+
+export const StyledIconButton = styled(IconButton)`
+    position: relative;
+`;

src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx

@@ -1,69 +1,19 @@
-import { memo, useState } from 'react';
-import * as m from 'motion/react-m';
-
-import OpenSettingsButton from '@app/containers/floating/Settings/components/OpenSettingsButton.tsx';
-import { CubeOutlineSVG } from '@app/assets/icons/cube-outline.tsx';
-import { WalletOutlineSVG } from '@app/assets/icons/wallet-outline.tsx';
-import { CTAWrapper, LogoWwrapper, MinimizedWrapper } from './SidebarMini.styles.ts';
-import { SidebarWrapper } from '@app/containers/main/SidebarNavigation/SidebarNavigation.styles.ts';
-import { SB_MINI_WIDTH, SB_SPACING, SB_WIDTH } from '@app/theme/styles.ts';
-import { useUIStore } from '@app/store/useUIStore.ts';
-import { setAnimationProperties } from '@app/visuals.ts';
-import { IconButton } from '@app/components/elements/buttons/IconButton.tsx';
+import { memo } from 'react';
+import { SB_MINI_WIDTH } from '@app/theme/styles.ts';
 import { TariOutlineSVG } from '@app/assets/icons/tari-outline.tsx';
-import { IoChevronForwardOutline } from 'react-icons/io5';
+import { SidebarWrapper } from '../SidebarNavigation.styles.ts';
+import { LogoWrapper, MinimizedWrapper } from './SidebarMini.styles.ts';
+import OpenSettingsButton from '@app/containers/floating/Settings/components/OpenSettingsButton.tsx';
+import Navigation from './Navigation.tsx';
 
 const SidebarMini = memo(function SidebarMini() {
-    const setSidebarOpen = useUIStore((s) => s.setSidebarOpen);
-    const sidebarOpen = useUIStore((s) => s.sidebarOpen);
-    const setView = useUIStore((s) => s.setView);
-    const view = useUIStore((s) => s.view);
-
-    const miningActive = view === 'mining';
-
-    const [minerHovered, setMinerHovered] = useState(false);
-
-    function handleMiningClick() {
-        if (!miningActive) {
-            setView('mining');
-        } else {
-            setSidebarOpen(!sidebarOpen);
-            const offset = ((sidebarOpen ? SB_MINI_WIDTH : SB_WIDTH) + SB_SPACING) / window.innerWidth;
-            setAnimationProperties([{ property: 'cameraOffsetX', value: offset }]);
-        }
-    }
-    const rotate = sidebarOpen ? '180deg' : '0deg';
-    const minerIcon =
-        minerHovered && miningActive ? (
-            <m.div
-                animate={{ rotate, transition: { type: 'spring' } }}
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', rotate }}
-            >
-                <IoChevronForwardOutline size={28} />
-            </m.div>
-        ) : (
-            <CubeOutlineSVG />
-        );
     return (
         <SidebarWrapper style={{ width: SB_MINI_WIDTH }}>
             <MinimizedWrapper>
-                <LogoWwrapper>
+                <LogoWrapper>
                     <TariOutlineSVG />
-                </LogoWwrapper>
-                <CTAWrapper>
-                    <IconButton
-                        variant="secondary"
-                        active={view === 'mining'}
-                        onClick={handleMiningClick}
-                        onMouseEnter={() => setMinerHovered(true)}
-                        onMouseLeave={() => setMinerHovered(false)}
-                    >
-                        {minerIcon}
-                    </IconButton>
-                    <IconButton variant="secondary" active={view === 'wallet'} onClick={() => setView('wallet')}>
-                        <WalletOutlineSVG />
-                    </IconButton>
-                </CTAWrapper>
+                </LogoWrapper>
+                <Navigation />
                 <OpenSettingsButton iconSize={22} size="large" />
             </MinimizedWrapper>
         </SidebarWrapper>

src/theme/GlobalStyle.ts

@@ -1,4 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
+import { ViewType } from '@app/store/types.ts';
 
 export const GlobalReset = createGlobalStyle`
     *:focus {
@@ -48,7 +49,7 @@ export const GlobalReset = createGlobalStyle`
     }
 `;
 
-export const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle<{ $view?: ViewType }>`
     html,
     main,
     body,
@@ -95,7 +96,7 @@ export const GlobalStyle = createGlobalStyle`
 
     
     html {
-        background: ${({ theme }) => theme.palette.base};
+        background: ${({ theme }) => theme.palette.background.main};
     }
     #canvas {
         z-index: 0;
@@ -104,6 +105,9 @@ export const GlobalStyle = createGlobalStyle`
         pointer-events: auto;
         width: 100vw;
         background: none;
+        transition: visibility .1s ease;
+
+        visibility: ${({ $view }) => ($view === 'wallet' ? 'hidden' : 'visible')};
     }
 
     #root {