diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index fe2492451a..ea9cee1636 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -74,6 +74,15 @@ export const WorkSpaceSliderBar = () => {
   const [showTip, setShowTip] = useState(false);
   const [show, setShow] = useLocalStorage('AFFINE_SLIDE_BAR', false, true);
   const { t } = useTranslation();
+
+  const paths = {
+    all: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
+    favorite: currentWorkspaceId
+      ? `/workspace/${currentWorkspaceId}/favorite`
+      : '',
+    trash: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
+  };
+
   return (
     <>
       <StyledSliderBar show={show}>
@@ -88,21 +97,13 @@ export const WorkSpaceSliderBar = () => {
         >
           <SearchIcon /> Quick search
         </StyledListItem>
-        <Link href={{ pathname: `/workspace/${currentWorkspaceId}/all` }}>
-          <StyledListItem
-            active={router.pathname === `/workspace/${currentWorkspaceId}/all`}
-          >
+        <Link href={{ pathname: paths.all }}>
+          <StyledListItem active={router.pathname === paths.all}>
             <AllPagesIcon /> <span>All pages</span>
           </StyledListItem>
         </Link>
-        <StyledListItem
-          active={
-            router.pathname === `/workspace/${currentWorkspaceId}/favorite`
-          }
-        >
-          <StyledLink
-            href={{ pathname: `/workspace/${currentWorkspaceId}/favorite` }}
-          >
+        <StyledListItem active={router.pathname === paths.favorite}>
+          <StyledLink href={{ pathname: paths.favorite }}>
             <FavouritesIcon />
             Favourites
           </StyledLink>
@@ -132,12 +133,8 @@ export const WorkSpaceSliderBar = () => {
           </StyledListItem>
         </Tooltip>
 
-        <Link href={{ pathname: `/workspace/${currentWorkspaceId}/trash` }}>
-          <StyledListItem
-            active={
-              router.pathname === `/workspace/${currentWorkspaceId}/trash`
-            }
-          >
+        <Link href={{ pathname: paths.trash }}>
+          <StyledListItem active={router.pathname === paths.trash}>
             <TrashIcon /> Trash
           </StyledListItem>
         </Link>
diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts
index 064590e93d..acc936f7ea 100644
--- a/packages/app/src/components/workspace-slider-bar/style.ts
+++ b/packages/app/src/components/workspace-slider-bar/style.ts
@@ -43,7 +43,7 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   }
 );
 
-export const StyledListItem = styled.button<{
+export const StyledListItem = styled.div<{
   active?: boolean;
   disabled?: boolean;
 }>(({ theme, active, disabled }) => {