fix(web): sidebar layout (#1194)

reearth · Oct 24, 2024 · 88b536e · 88b536e
1 parent 6a0d08d
commit 88b536e
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 88 deletions.
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/StarredProject.tsx
@@ -12,21 +12,18 @@ const StarredProject: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
 
   return (
     <Wrapper>
-      <Collapse
-        iconPosition="left"
-        title={t("Starred")}
-        size="small"
-        weight="bold"
-      >
+      <Collapse iconPosition="left" title={t("Starred")} size="small" noPadding>
         <ProjectsWrapper>
-          {starredProjects?.map((statredProject) =>
-            statredProject ? (
+          {starredProjects?.map((project) =>
+            project ? (
               <Item
-                key={statredProject.id}
-                onClick={() => handleProjectOpen(statredProject?.scene?.id)}
+                key={project.id}
+                onClick={() => handleProjectOpen(project?.scene?.id)}
               >
                 <IconWrapper icon="notebook" color={theme.content.weak} />
-                <TitleWrapper>{statredProject?.name}</TitleWrapper>
+                <TitleWrapper title={project?.name}>
+                  {project?.name}
+                </TitleWrapper>
               </Item>
             ) : null
           )}
@@ -38,18 +35,19 @@ const StarredProject: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
 
 export default StarredProject;
 
-const Wrapper = styled("div")(() => ({
+const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  flexGrow: 1
+  paddingLeft: theme.spacing.smallest,
+  flexGrow: 1,
+  height: 0
 }));
 
 const ProjectsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  paddingLeft: theme.spacing.small,
-  height: "calc(92vh - 400px)",
-  overflowY: "auto"
+  padding: `0 ${theme.spacing.small}px`,
+  flex: 1
 }));
 
 const Item = styled("div")(({ theme }) => ({

diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -1,7 +1,9 @@
 import {
+  SidebarButtonsWrapper,
+  SidebarDivider,
+  SidebarFooterSection,
+  SidebarMainSection,
   SidebarMenuItem,
-  SidebarSection,
-  SidebarTopSectionWrapper,
   SidebarVersion,
   SidebarWrapper
 } from "@reearth/beta/ui/components/Sidebar";
@@ -37,7 +39,7 @@ const LeftSidePanel: FC<Props> = ({
 
   return (
     <SidebarWrapper>
-      <SidebarSection>
+      <SidebarMainSection>
         <Profile
           currentUser={currentWorkspace?.name}
           isPersonal={isPersonal}
@@ -46,7 +48,8 @@ const LeftSidePanel: FC<Props> = ({
           onSignOut={onSignOut}
           onWorkspaceChange={onWorkspaceChange}
         />
-        <SidebarTopSectionWrapper>
+        <SidebarDivider />
+        <SidebarButtonsWrapper>
           {topTabs?.map((tab) => (
             <SidebarMenuItem
               key={tab.id}
@@ -57,11 +60,14 @@ const LeftSidePanel: FC<Props> = ({
               disabled={tab.disabled}
             />
           ))}
-          <StarredProject workspaceId={currentWorkspace?.id} />
-        </SidebarTopSectionWrapper>
-      </SidebarSection>
-      <SidebarSection>
-        <>
+        </SidebarButtonsWrapper>
+        <SidebarDivider />
+        <StarredProject workspaceId={currentWorkspace?.id} />
+      </SidebarMainSection>
+
+      <SidebarFooterSection>
+        <SidebarDivider />
+        <SidebarButtonsWrapper>
           {bottomTabs?.map((tab) => (
             <SidebarMenuItem
               key={tab.id}
@@ -72,9 +78,10 @@ const LeftSidePanel: FC<Props> = ({
               disabled={tab.disabled}
             />
           ))}
-        </>
+        </SidebarButtonsWrapper>
+        <SidebarDivider />
         <SidebarVersion />
-      </SidebarSection>
+      </SidebarFooterSection>
     </SidebarWrapper>
   );
 };

diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/profile.tsx
@@ -110,7 +110,6 @@ const Wrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.normal,
-  borderBottom: `1px solid ${theme.outline.weaker}`,
   alignContent: "center",
   padding: theme.spacing.normal
 }));

diff --git a/web/src/beta/features/ProjectSettings/index.tsx b/web/src/beta/features/ProjectSettings/index.tsx
@@ -2,9 +2,10 @@ import Navbar from "@reearth/beta/features/Navbar";
 import {
   DEFAULT_SIDEBAR_WIDTH,
   SidebarMenuItem,
-  SidebarSection,
+  SidebarMainSection,
   SidebarVersion,
-  SidebarWrapper
+  SidebarWrapper,
+  SidebarButtonsWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -84,17 +85,19 @@ const ProjectSettings: React.FC<Props> = ({ projectId, tab, subId }) => {
       <MainSection>
         <LeftSidePanel>
           <SidebarWrapper>
-            <SidebarSection>
-              {tabs?.map((t) => (
-                <SidebarMenuItem
-                  key={t.id}
-                  path={t.path}
-                  text={t.text}
-                  active={t.id === tab}
-                  icon={t.icon}
-                />
-              ))}
-            </SidebarSection>
+            <SidebarMainSection>
+              <SidebarButtonsWrapper>
+                {tabs?.map((t) => (
+                  <SidebarMenuItem
+                    key={t.id}
+                    path={t.path}
+                    text={t.text}
+                    active={t.id === tab}
+                    icon={t.icon}
+                  />
+                ))}
+              </SidebarButtonsWrapper>
+            </SidebarMainSection>
             <SidebarVersion />
           </SidebarWrapper>
         </LeftSidePanel>

diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/index.tsx
@@ -1,7 +1,8 @@
 import {
   SidebarMenuItem,
-  SidebarSection,
-  SidebarWrapper
+  SidebarMainSection,
+  SidebarWrapper,
+  SidebarButtonsWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
 import { useT } from "@reearth/services/i18n";
@@ -109,18 +110,20 @@ const PublicSettings: React.FC<Props> = ({
     <InnerPage wide>
       <InnerSidebar>
         <SidebarWrapper>
-          <SidebarSection>
-            {menu?.map((s) => (
-              <SidebarMenuItem
-                key={s.id}
-                text={s.title}
-                icon={s.icon}
-                active={s.active}
-                path={s.path}
-                onClick={() => handleTabChange(s.id)}
-              />
-            ))}
-          </SidebarSection>
+          <SidebarMainSection>
+            <SidebarButtonsWrapper>
+              {menu?.map((s) => (
+                <SidebarMenuItem
+                  key={s.id}
+                  text={s.title}
+                  icon={s.icon}
+                  active={s.active}
+                  path={s.path}
+                  onClick={() => handleTabChange(s.id)}
+                />
+              ))}
+            </SidebarButtonsWrapper>
+          </SidebarMainSection>
         </SidebarWrapper>
       </InnerSidebar>
       <SettingsWrapper>

diff --git a/web/src/beta/features/WorkspaceSetting/index.tsx b/web/src/beta/features/WorkspaceSetting/index.tsx
@@ -25,17 +25,19 @@ const WorkspaceSetting: FC<Props> = ({ tab, workspaceId }) => {
   const { tabs } = useAccountSettingsTabs({ workspaceId: workspaceId ?? "" });
 
   return (
-    <SettingBase tabs={tabs} tab={tab} workspaceId={workspaceId}>
-      {tab === "workspace" && (
-        <Workspace
-          handleFetchWorkspaces={handleFetchWorkspaces}
-          handleUpdateWorkspace={handleUpdateWorkspace}
-          handleDeleteWorkspace={handleDeleteWorkspace}
-          projectsCount={filtedProjects?.length}
-        />
-      )}
+    <>
+      <SettingBase tabs={tabs} tab={tab} workspaceId={workspaceId}>
+        {tab === "workspace" && (
+          <Workspace
+            handleFetchWorkspaces={handleFetchWorkspaces}
+            handleUpdateWorkspace={handleUpdateWorkspace}
+            handleDeleteWorkspace={handleDeleteWorkspace}
+            projectsCount={filtedProjects?.length}
+          />
+        )}
+      </SettingBase>
       <CursorStatus />
-    </SettingBase>
+    </>
   );
 };
 

diff --git a/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx b/web/src/beta/lib/reearth-ui/components/Collapse/index.tsx
@@ -157,5 +157,10 @@ const IconWrapper = styled("div")<{
       : isCollapsed
         ? "0deg"
         : "-90deg",
-  transition: "rotate 0.2s ease-in"
+  transition: "rotate 0.2s ease-in",
+  width: 16,
+  height: 16,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
 }));
diff --git a/web/src/beta/ui/components/SettingBase/index.tsx b/web/src/beta/ui/components/SettingBase/index.tsx
@@ -3,9 +3,10 @@ import { IconName } from "@reearth/beta/lib/reearth-ui";
 import {
   DEFAULT_SIDEBAR_WIDTH,
   SidebarMenuItem,
-  SidebarSection,
+  SidebarMainSection,
   SidebarVersion,
-  SidebarWrapper
+  SidebarWrapper,
+  SidebarButtonsWrapper
 } from "@reearth/beta/ui/components/Sidebar";
 import { styled } from "@reearth/services/theme";
 import { FC, ReactNode } from "react";
@@ -30,18 +31,20 @@ const SettingBase: FC<Props> = ({ tabs, tab, children, workspaceId }) => {
       <MainSection>
         <LeftSidePanel>
           <SidebarWrapper>
-            <SidebarSection>
-              {tabs?.map((t) => (
-                <SidebarMenuItem
-                  key={t.id}
-                  path={t.path}
-                  text={t.text}
-                  active={t.id === tab}
-                  icon={t.icon}
-                  disabled={t.disabled}
-                />
-              ))}
-            </SidebarSection>
+            <SidebarMainSection>
+              <SidebarButtonsWrapper>
+                {tabs?.map((t) => (
+                  <SidebarMenuItem
+                    key={t.id}
+                    path={t.path}
+                    text={t.text}
+                    active={t.id === tab}
+                    icon={t.icon}
+                    disabled={t.disabled}
+                  />
+                ))}
+              </SidebarButtonsWrapper>
+            </SidebarMainSection>
             <SidebarVersion />
           </SidebarWrapper>
         </LeftSidePanel>

diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -69,24 +69,42 @@ const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
   })
 );
 
-export const SidebarWrapper = styled("div")(({ theme }) => ({
+export const SidebarWrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
-  padding: `0 ${theme.spacing.smallest}px`,
   flex: 1,
-  justifyContent: "space-between"
+  justifyContent: "space-between",
+  maxHeight: "100vh",
+  minHeight: 542
 }));
 
-export const SidebarTopSectionWrapper = styled("div")(() => ({
+export const SidebarButtonsWrapper = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  justifyContent: "space-between"
+  justifyContent: "space-between",
+  gap: theme.spacing.smallest,
+  padding: `0 ${theme.spacing.smallest}px`
 }));
 
-export const SidebarSection = styled("div")(({ theme }) => ({
+export const SidebarMainSection = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-  gap: theme.spacing.small
+  gap: theme.spacing.smallest,
+  flex: 1
+}));
+
+export const SidebarFooterSection = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.smallest,
+  flexShrink: 0
+}));
+
+export const SidebarDivider = styled("div")(({ theme }) => ({
+  height: "1px",
+  backgroundColor: theme.outline.weaker,
+  margin: `0 ${theme.spacing.smallest}px`,
+  flexShrink: 0
 }));
 
 export const SidebarVersion: FC = () => {
@@ -102,5 +120,5 @@ export const SidebarVersion: FC = () => {
 };
 
 const Version = styled("div")(({ theme }) => ({
-  padding: theme.spacing.small
+  padding: `${theme.spacing.smallest}px ${theme.spacing.normal}px ${theme.spacing.small}px`
 }));