sidebar adjustments

aleph-im · Nov 6, 2023 · 822fe60 · 822fe60
1 parent a5b0332
commit 822fe60
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/src/components/common/Sidebar/cmp.tsx b/src/components/common/Sidebar/cmp.tsx
@@ -175,8 +175,8 @@ export const Sidebar = memo(() => {
           </div>
           <StyledStorageContainer onClick={handlePreventToggle}>
             <div tw="mb-4 flex gap-1 flex-wrap">
-              {consumedSize.toFixed(3)} GB
-              <span tw="opacity-60 font-normal">
+              <span tw="whitespace-nowrap">{consumedSize.toFixed(3)} GB</span>
+              <span tw="opacity-60 font-normal whitespace-nowrap">
                 of {allowedSize.toFixed(3)}
               </span>
             </div>

diff --git a/src/components/common/Sidebar/styles.tsx b/src/components/common/Sidebar/styles.tsx
@@ -35,9 +35,9 @@ export const StyledNav1Link = styled(Link).attrs(addClasses('tp-nav'))<{
 
 export const StyledNav2 = styled.nav`
   ${tw`flex flex-col h-full overflow-hidden z-10`}
-  padding-top: 7rem;
   background-color: #00000020;
 
+  box-sizing: content-box;
   padding-left: 0;
   box-shadow: 0px 0px 0px 0px #00000020;
 `
@@ -48,6 +48,7 @@ export const StyledNav2Title = styled.div.attrs(addClasses('tp-nav'))`
 
 export const StyledNav2LinkContainer = styled.div`
   ${tw`flex flex-col items-start cursor-auto`}
+  margin-top: 7rem;
 `
 
 export const StyledNav2Link = styled(Link).attrs(addClasses('tp-nav'))<{
@@ -86,9 +87,7 @@ export const StyledToggleButton = styled(Icon).attrs((props) => {
   `}
 `
 
-export const StyledStorageContainer = styled.div.attrs(
-  addClasses('tp-body3 fs-12'),
-)`
+export const StyledStorageContainer = styled.div.attrs(addClasses('tp-body3'))`
   ${tw`w-[10.5rem] max-w-full mx-auto px-1 cursor-auto`}
 `
 
@@ -230,7 +229,14 @@ export const StyledSidebar = styled.aside<{
           }
 
           & ${StyledStorageContainer} {
+            font-size: 0.625rem;
+            transition: font-size linear 0s ${0.3 / $speed}s;
             animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn2Reverse};
+
+            & > :first-child {
+              max-width: 100%;
+              transition: max-width linear 0s ${0.3 / $speed}s;
+            }
           }
         `
       : css`
@@ -297,7 +303,14 @@ export const StyledSidebar = styled.aside<{
           }
 
           & ${StyledStorageContainer} {
+            font-size: 0.5rem;
+            transition: font-size linear 0s ${0.46 / $speed}s;
             animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn2};
+
+            & > :first-child {
+              max-width: 0;
+              transition: max-width linear 0s ${0.46 / $speed}s;
+            }
           }
         `};