From 5c65dd3ab37b37f27044c8787fbc374c1211904e Mon Sep 17 00:00:00 2001
From: sunface <cto@188.com>
Date: Wed, 3 Mar 2021 20:53:16 +0800
Subject: [PATCH] update responsive features

---
 layouts/nav/editor-nav.tsx              |  6 +--
 layouts/nav/nav.tsx                     |  6 +--
 layouts/nav/post-nav.tsx                |  2 +-
 layouts/nav/vertical-nav.tsx            | 17 +++++++--
 layouts/page-container1.tsx             |  9 +++--
 layouts/sidebar/sidebar-link.tsx        | 10 ++---
 layouts/sidebar/sidebar.tsx             | 51 ++++++++++++-------------
 pages/[username]/[post_id].tsx          | 51 +++++++++++++------------
 pages/[username]/index.tsx              | 15 ++++----
 pages/admin/tag/[id].tsx                |  8 ++--
 pages/admin/tags.tsx                    |  7 ++--
 pages/editor/posts.tsx                  |  7 ++--
 pages/index.tsx                         |  4 +-
 pages/tags.tsx                          | 24 ------------
 pages/tags/[name].tsx                   |  6 +--
 pages/tags/index.tsx                    | 25 ++++++++++++
 src/components/card.tsx                 |  2 +-
 src/components/comments/comment.tsx     | 17 +++++----
 src/components/comments/reply.tsx       | 15 +++++---
 src/components/empty.tsx                | 13 +++++++
 src/components/posts/post-card.tsx      |  2 +-
 src/components/posts/text-post-card.tsx | 13 ++++---
 src/components/svg-icon.tsx             | 24 ++++++++++++
 src/data/links.tsx                      | 15 +++-----
 24 files changed, 201 insertions(+), 148 deletions(-)
 delete mode 100644 pages/tags.tsx
 create mode 100644 pages/tags/index.tsx
 create mode 100644 src/components/empty.tsx
 create mode 100644 src/components/svg-icon.tsx

diff --git a/layouts/nav/editor-nav.tsx b/layouts/nav/editor-nav.tsx
index 922370e7..f6201d24 100644
--- a/layouts/nav/editor-nav.tsx
+++ b/layouts/nav/editor-nav.tsx
@@ -47,8 +47,8 @@ function HeaderContent(props: Props) {
 
     return (
         <>
-            <Flex w="100%" h="100%" align="center" justify="space-between" px={{ base: "4", md: "6" }}>
-                <Flex align="center">
+            <Flex w="100%" h="100%" align="center" justify="space-between" px={{ base: "2", md: "6" }}>
+                <Flex align="center" display={{ base: "none", md: "flex" }}>
                     <NextLink href="/" passHref>
                         <chakra.a display={{ base: "none", md: "block" }} style={{ marginTop: '-5px' }} aria-label="Chakra UI, Back to homepage">
                             <Logo width="130" />
@@ -61,7 +61,7 @@ function HeaderContent(props: Props) {
                     </NextLink>
                 </Flex>
                 <Box>
-                    <Input value={props.ar.title} placeholder="Title..." onChange={props.changeTitle} focusBorderColor={useColorModeValue('teal.400', 'teal.100')} variant="flushed" />
+                    <Input width={{base: '100px', md: '187px'}} value={props.ar.title} placeholder="Title..." onChange={props.changeTitle} focusBorderColor={useColorModeValue('teal.400', 'teal.100')} variant="flushed" />
                 </Box>
                 <EditModeSelect onChange={props.changeEditMode}/>
                 <Box
diff --git a/layouts/nav/nav.tsx b/layouts/nav/nav.tsx
index 5a306a90..bf5aa698 100644
--- a/layouts/nav/nav.tsx
+++ b/layouts/nav/nav.tsx
@@ -71,12 +71,12 @@ function HeaderContent() {
         </Flex>
 
         <HStack
-          w="100%"
+          // w="100%"
           maxW="600px"
           align="center"
           color={useColorModeValue("gray.500", "gray.400")}
         >
-          <AlgoliaSearch />
+          <AlgoliaSearch /> 
           <Link
             aria-label="Go to Chakra UI GitHub page"
             href={siteConfig.repo.url}
@@ -100,7 +100,7 @@ function HeaderContent() {
           /> */}
         </HStack>
       </Flex>
-      <MobileNavContent isOpen={mobileNav.isOpen} onClose={mobileNav.onClose} />
+      {/* <MobileNavContent isOpen={mobileNav.isOpen} onClose={mobileNav.onClose} /> */}
     </>
   )
 }
diff --git a/layouts/nav/post-nav.tsx b/layouts/nav/post-nav.tsx
index 53d352f4..a651e092 100644
--- a/layouts/nav/post-nav.tsx
+++ b/layouts/nav/post-nav.tsx
@@ -40,7 +40,7 @@ function HeaderContent() {
 
                 <HStack
                     color={useColorModeValue("gray.500", "gray.400")}
-                    spacing="2"
+                    spacing={[1,1,2,2]}
                 >
                     <IconButton
                         size="md"
diff --git a/layouts/nav/vertical-nav.tsx b/layouts/nav/vertical-nav.tsx
index cf4c33f2..0866808d 100644
--- a/layouts/nav/vertical-nav.tsx
+++ b/layouts/nav/vertical-nav.tsx
@@ -8,7 +8,8 @@ import {
     useUpdateEffect,
     Box,
     VStack,
-    useMediaQuery
+    useMediaQuery,
+    Text
   } from "@chakra-ui/react"
   import siteConfig from "configs/site-config"
   import { useViewportScroll } from "framer-motion"
@@ -23,18 +24,22 @@ import {
   import Link from "next/link"
   import DarkMode from "components/dark-mode"
   import AccountMenu from "components/account-menu"
+import { getSvgIcon } from "components/svg-icon"
   
   const navLinks = [{
     title: '主页',
     url: '/',
+    icon: getSvgIcon("home","1.4rem")
   },
   {
     title: '标签',
     url: ReserveUrls.Tags,
+    icon: getSvgIcon("tags","1.2rem")
   },
   {
     title: '学习资料',
     url: ReserveUrls.Courses,
+    icon: getSvgIcon("explore","1.4rem")
   },
   ]
   
@@ -62,8 +67,14 @@ import {
               </chakra.a>
             </NextLink>
   
-            <VStack pt="6"  ml={{ base: 1, md: 4, lg: 12 }} fontSize="1rem" minWidth="250px">
-              {navLinks.map(link => <Box px="4" py="0.7rem" rounded="md" key={link.url} color={useColorModeValue("gray.700", "whiteAlpha.900")} aria-current={asPath === link.url ? "page" : undefined} _activeLink={{ bg: useColorModeValue("transparent", "rgba(48, 140, 122, 0.3)"), color: useColorModeValue("teal.500", "teal.200"), fontWeight: "bold", }} ><Link href={link.url}>{link.title}</Link></Box>)}
+            <VStack pt="6"  ml={{ base: 1, md: 4, lg: 12 }} fontSize="1rem" alignItems="left">
+              {navLinks.map(link => 
+               <Link href={link.url}>
+                  <HStack cursor="pointer" px="4" py="0.7rem" rounded="md" key={link.url} color={useColorModeValue("gray.700", "whiteAlpha.900")} aria-current={asPath === link.url ? "page" : undefined} _activeLink={{ bg: useColorModeValue("transparent", "rgba(48, 140, 122, 0.3)"), color: useColorModeValue("teal.500", "teal.200"), fontWeight: "bold", }} >
+                    <Box width="25px">{link.icon}</Box><Text>{link.title}</Text>
+                  </HStack>
+                </Link>
+                )}
             </VStack>
           </VStack>
   
diff --git a/layouts/page-container1.tsx b/layouts/page-container1.tsx
index bb597966..fe47742e 100644
--- a/layouts/page-container1.tsx
+++ b/layouts/page-container1.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, chakra,Flex,PropsOf } from "@chakra-ui/react"
+import { Badge, Box, chakra,Flex,PropsOf, useMediaQuery } from "@chakra-ui/react"
 import { SkipNavContent, SkipNavLink } from "@chakra-ui/skip-nav"
 import Container from "components/container"
 import Footer from "./footer"
@@ -34,7 +34,8 @@ type PageContainerProps = PropsOf<typeof chakra.div> &  {
 function PageContainer1(props: PageContainerProps) {
   const { children ,nav, ...rest} = props
   useHeadingFocusOnRouteChange()
-
+  const [isSmallScreen] = useMediaQuery("(max-width: 768px)")
+  const header = isSmallScreen ? <Nav /> : <VerticalNav width={["100px","100px","200px","200px"]} /> 
   return (
     <>
       <SEO
@@ -42,8 +43,8 @@ function PageContainer1(props: PageContainerProps) {
         description={siteConfig.seo.description}
       />
       <Flex px={[0,0,16,16]}>
-      <VerticalNav width={["100px","100px","200px","200px"]}/>
-      <Box width="100%" ml={["100px","100px","150px","150px"]} pb="8">
+      {header}
+      <Box width="100%" ml={["0px","0px","150px","150px"]} pb="8" p={["1","1","4","4"]} mt={["70px","70px","0px","0px"]} {...rest}>
         {children}
       </Box>
     </Flex>
diff --git a/layouts/sidebar/sidebar-link.tsx b/layouts/sidebar/sidebar-link.tsx
index f89452fe..53a29295 100644
--- a/layouts/sidebar/sidebar-link.tsx
+++ b/layouts/sidebar/sidebar-link.tsx
@@ -16,19 +16,19 @@ const StyledLink = React.forwardRef(function StyledLink(
       py="2"
       rounded="md"
       ref={ref}
-      fontSize="14px"
-      fontWeight="500"
+      fontSize="1rem"
+      fontWeight="bold"
       color={useColorModeValue("gray.700", "whiteAlpha.900")}
       transition="all 0.2s"
       display="flex"
       alignItems="center"
       _activeLink={{
-        bg: useColorModeValue("teal.50", "rgba(48, 140, 122, 0.3)"),
-        color: useColorModeValue("teal.700", "teal.200"),
+        // bg: useColorModeValue("teal.50", "rgba(48, 140, 122, 0.3)"),
+        color: useColorModeValue("teal", "teal.200"),
         fontWeight: "600",
       }}
       {...rest}
-    ><chakra.span fontSize="1.1rem">{icon}</chakra.span> <chakra.span ml="5">{children}</chakra.span></chakra.a>
+    ><chakra.span mr="5" fontSize="1.1rem" display={{base:"none",md:"block"}}>{icon}</chakra.span> <chakra.span>{children}</chakra.span></chakra.a>
   )
 })
 
diff --git a/layouts/sidebar/sidebar.tsx b/layouts/sidebar/sidebar.tsx
index 786c4f7e..4209d70e 100644
--- a/layouts/sidebar/sidebar.tsx
+++ b/layouts/sidebar/sidebar.tsx
@@ -11,9 +11,9 @@ export function SidebarContent(props) {
     return (
         <>
             <Stack as="ul">
-                {routes.map((route:Route) => {
-                    if (route.disabled) {return null}
-                    return  <SidebarLink as="li" key={route.path} href={route.path} icon={route.icon}>
+                {routes.map((route: Route) => {
+                    if (route.disabled) { return null }
+                    return <SidebarLink as="li" key={route.path} href={route.path} icon={route.icon}>
                         <span>{route.title}</span>
                     </SidebarLink>
                 })}
@@ -22,35 +22,32 @@ export function SidebarContent(props) {
     )
 }
 
-const Sidebar = ({ routes,title, ...props }) => {
+const Sidebar = ({ routes, title, ...props }) => {
     const { pathname } = useRouter()
     const ref = React.useRef<HTMLDivElement>(null)
 
     return (
-        <VStack alignItems="left">
-        <Card p="5"><Heading size="sm">{title}</Heading></Card>
-        <Card p="0" {...props}>
-            <Box
-                ref={ref}
-                as="nav"
-                aria-label="Main Navigation"
-                pos="sticky"
-                sx={{
-                    overscrollBehavior: "contain",
-                }}
-                top="8.5rem"
-                pr="3"
-                pb="6"
-                pl="3"
-                pt="6"
-                overflowY="auto"
-                className="sidebar-content"
-                flexShrink={0}
+        <VStack alignItems="left" width={["180px","180px","250px","250px"]}  height="fit-content" >
+            <Card p="5"><Heading size="md">{title}</Heading></Card>
+            <Card p="0" {...props}>
+                <Box
+                    ref={ref}
+                    as="nav"
+                    aria-label="Main Navigation"
+                    pos="sticky"
+                    sx={{
+                        overscrollBehavior: "contain",
+                    }}
+                    top="8.5rem"
+                    p="3"
+                    overflowY="auto"
+                    className="sidebar-content"
+                    flexShrink={0}
                 // display={{ base: "none", md: "block" }}
-            >
-                <SidebarContent routes={routes} pathname={pathname} contentRef={ref} />
-            </Box>
-        </Card>
+                >
+                    <SidebarContent routes={routes} pathname={pathname} contentRef={ref} />
+                </Box>
+            </Card>
         </VStack>
     )
 }
diff --git a/pages/[username]/[post_id].tsx b/pages/[username]/[post_id].tsx
index 245972da..25bc29b7 100644
--- a/pages/[username]/[post_id].tsx
+++ b/pages/[username]/[post_id].tsx
@@ -94,6 +94,32 @@ const PostPage = () => {
                 </Box>
                 <HStack ml="4" spacing="3">{post.rawTags.map(tag => <TagTextCard tag={tag}/>)}</HStack>
 
+                <HStack display={{ base: "flex", md: 'none' }} spacing="4" justifyContent="center">
+              <Box>
+                {/* <LikeButton type="like" count={post.likes} onClick={onLike}/> */}
+                <UnicornLike count={post.likes}  onClick={onLike} liked={post.liked}/>
+              </Box>
+              <Box>
+                <IconButton
+                  aria-label="go to github"
+                  variant="ghost"
+                  layerStyle="textSecondary"
+                  _focus={null}
+                  fontSize="1.7rem"
+                  fontWeight="300"
+                  icon={<svg height="1.8rem" fill="currentColor" viewBox="0 0 384 512"><path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path></svg>}
+                />
+                <IconButton
+                  aria-label="go to github"
+                  variant="ghost"
+                  layerStyle="textSecondary"
+                  _focus={null}
+                  fontWeight="300"
+                  icon={<svg height="1.8rem" fill="currentColor" viewBox="0 0 448 512"><path d="M352 320c-28.6 0-54.2 12.5-71.8 32.3l-95.5-59.7c9.6-23.4 9.7-49.8 0-73.2l95.5-59.7c17.6 19.8 43.2 32.3 71.8 32.3 53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 13 2.6 25.3 7.2 36.6l-95.5 59.7C150.2 172.5 124.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c28.6 0 54.2-12.5 71.8-32.3l95.5 59.7c-4.7 11.3-7.2 23.6-7.2 36.6 0 53 43 96 96 96s96-43 96-96c-.1-53-43.1-96-96.1-96zm0-288c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm256 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"></path></svg>}
+                />
+              </Box>
+            </HStack>
+            
                 <Box mt="6" p="2"><Comments storyID={post.id} comments={comments} onChange={() => getComments(post.id)}/></Box>
               </Box>
               <Box>
@@ -147,31 +173,6 @@ const PostPage = () => {
               </Box>
             </HStack>
 
-            <HStack display={{ base: "flex", md: 'none' }} spacing="4" justifyContent="center">
-              <Box>
-                {/* <LikeButton type="like" count={post.likes} onClick={onLike}/> */}
-                <UnicornLike count={post.likes}  onClick={onLike} liked={post.liked}/>
-              </Box>
-              <Box>
-                <IconButton
-                  aria-label="go to github"
-                  variant="ghost"
-                  layerStyle="textSecondary"
-                  _focus={null}
-                  fontSize="1.7rem"
-                  fontWeight="300"
-                  icon={<svg height="1.8rem" fill="currentColor" viewBox="0 0 384 512"><path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path></svg>}
-                />
-                <IconButton
-                  aria-label="go to github"
-                  variant="ghost"
-                  layerStyle="textSecondary"
-                  _focus={null}
-                  fontWeight="300"
-                  icon={<svg height="1.8rem" fill="currentColor" viewBox="0 0 448 512"><path d="M352 320c-28.6 0-54.2 12.5-71.8 32.3l-95.5-59.7c9.6-23.4 9.7-49.8 0-73.2l95.5-59.7c17.6 19.8 43.2 32.3 71.8 32.3 53 0 96-43 96-96S405 0 352 0s-96 43-96 96c0 13 2.6 25.3 7.2 36.6l-95.5 59.7C150.2 172.5 124.6 160 96 160c-53 0-96 43-96 96s43 96 96 96c28.6 0 54.2-12.5 71.8-32.3l95.5 59.7c-4.7 11.3-7.2 23.6-7.2 36.6 0 53 43 96 96 96s96-43 96-96c-.1-53-43.1-96-96.1-96zm0-288c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zM96 320c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64zm256 160c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"></path></svg>}
-                />
-              </Box>
-            </HStack>
           </>
         }
       </PageContainer>
diff --git a/pages/[username]/index.tsx b/pages/[username]/index.tsx
index e734e099..3572ddea 100644
--- a/pages/[username]/index.tsx
+++ b/pages/[username]/index.tsx
@@ -20,6 +20,7 @@ import PostCard from "components/posts/post-card"
 import userCustomTheme from "theme/user-custom"
 import Posts from "components/posts/posts"
 import Link from "next/link"
+import Empty from "components/empty"
 
 const UserPage = () => {
   const router = useRouter()
@@ -48,7 +49,7 @@ const UserPage = () => {
         title={siteConfig.seo.title}
         description={siteConfig.seo.description}
       />
-      <PageContainer1>
+      <PageContainer1 p="0">
         {
           user &&
           <Box alignItems="left">
@@ -125,19 +126,19 @@ const UserPage = () => {
               </VStack>
 
 
-              {
-                posts.length === 0 ?
+              
+                <Box width={["100%","100%","70%","70%"]}>
+                  { posts.length === 0 ?
                   <Card width="100%" height="fit-content">
-                    <VStack spacing="16" py="16">
-                      <Text fontSize="1.2rem">There doesn't seem to be anything here!</Text>
-                      <Image src="/not-found.png" width="300px" />
-                    </VStack>
+                    <Empty />
                   </Card>
                   :
                   <Card width="100%" height="fit-content" p="0" px="3">
                     <Posts posts={posts} />
                   </Card>
               }
+                </Box>
+               
 
             </HStack>
           </Box>
diff --git a/pages/admin/tag/[id].tsx b/pages/admin/tag/[id].tsx
index 4b6dd92b..9e736de2 100644
--- a/pages/admin/tag/[id].tsx
+++ b/pages/admin/tag/[id].tsx
@@ -30,7 +30,7 @@ function PostEditPage() {
     const toast = useToast()
     useEffect(() => {
         if (id && id !== 'new') {
-            requestApi.get(`/tag/${id}`).then(res => setTag(res.data))
+            requestApi.get(`/tag/info/${id}`).then(res => setTag(res.data))
         }
     }, [id])
 
@@ -64,7 +64,7 @@ function PostEditPage() {
                 publish={() => publish()}
             />}
         >
-            <Flex style={{ height: 'calc(100vh - 145px)' }}>
+            <HStack style={{ height: 'calc(100vh - 145px)' }} alignItems="top">
                 <Card width="65%">
                     {editMode === EditMode.Edit ?
                         <MarkdownEditor
@@ -83,7 +83,7 @@ function PostEditPage() {
                         </Box>
                     }
                 </Card>
-                <Card ml="6" width="35%">      
+                <Card width="35%">      
                         <Heading size="xs">
                             Title
                             </Heading>
@@ -104,7 +104,7 @@ function PostEditPage() {
                             </Heading>
                         <Input value={tag.icon} onChange={(e) => { tag.icon = e.target.value; onChange()}} mt="4" variant="flushed" size="sm" placeholder="图片链接" focusBorderColor="teal.400" />
                 </Card>
-            </Flex>
+            </HStack>
         </PageContainer>
     );
 }
diff --git a/pages/admin/tags.tsx b/pages/admin/tags.tsx
index 161cd1ac..9320d707 100644
--- a/pages/admin/tags.tsx
+++ b/pages/admin/tags.tsx
@@ -13,6 +13,7 @@ import Link from "next/link"
 import { ReserveUrls } from "src/data/reserve-urls"
 import { Tag } from "src/types/tag"
 import { route } from "next/dist/next-server/server/router"
+import PageContainer1 from "layouts/page-container1"
 
 
 const PostsPage = () => {
@@ -44,9 +45,9 @@ const PostsPage = () => {
 
     return (
         <>
-            <PageContainer>
+            <PageContainer1>
                 <Box display="flex">
-                    <Sidebar routes={adminLinks} width="250px" height="fit-content" title="管理员" />
+                    <Sidebar routes={adminLinks} title="管理员" />
                     <Card ml="4" p="6" width="100%">
                         <Flex alignItems="center" justify="space-between">
                             <Heading size="md">标签列表({tags.length})</Heading>
@@ -77,7 +78,7 @@ const PostsPage = () => {
                         }
                     </Card>
                 </Box>
-            </PageContainer>
+            </PageContainer1>
         </>
     )
 }
diff --git a/pages/editor/posts.tsx b/pages/editor/posts.tsx
index 41803599..1a768218 100644
--- a/pages/editor/posts.tsx
+++ b/pages/editor/posts.tsx
@@ -15,6 +15,7 @@ import { FaExternalLinkAlt, FaRegEdit } from "react-icons/fa"
 import { useRouter } from "next/router"
 import { ReserveUrls } from "src/data/reserve-urls"
 import Link from "next/link"
+import PageContainer1 from "layouts/page-container1"
 var validator = require('validator');
 
 const newPost: Post = { title: '', url: '', cover: '' }
@@ -97,9 +98,9 @@ const PostsPage = () => {
 
     return (
         <>
-            <PageContainer>
+            <PageContainer1 >
                 <Box display="flex">
-                    <Sidebar routes={editorLinks} width="250px" height="fit-content" title="创作中心"/>
+                    <Sidebar routes={editorLinks}   title="创作中心"/>
                     <Card ml="4" p="6" width="100%">
                         <Flex alignItems="center" justify="space-between">
                             <Heading size="md">文章列表({posts.length})</Heading>
@@ -141,7 +142,7 @@ const PostsPage = () => {
                         }
                     </Card>
                 </Box>
-            </PageContainer>
+            </PageContainer1>
 
             <Modal isOpen={isOpen} onClose={onClose}>
                 <ModalOverlay />
diff --git a/pages/index.tsx b/pages/index.tsx
index 4364418f..daafabce 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -16,7 +16,7 @@ import SEO from "components/seo"
 import siteConfig from "configs/site-config"
 import PageContainer1 from "layouts/page-container1"
 import React, { useEffect, useState } from "react"
-import { PostFilter } from "src/types/posts"
+import { PostFilter } from "src/types/posts" 
 import { requestApi } from "utils/axios/request"
 
 const HomePage = () => {
@@ -38,7 +38,7 @@ const HomePage = () => {
         description={siteConfig.seo.description}
       />
       <PageContainer1>
-        <HStack alignItems="top" p="4" spacing="3">
+        <HStack alignItems="top" spacing="3">
           <VStack alignItems="left" width={["100%", "100%", "70%", "70%"]} spacing="3">
             <Card p="2">
               <Flex justifyContent="space-between" alignItems="center">
diff --git a/pages/tags.tsx b/pages/tags.tsx
deleted file mode 100644
index d6a18135..00000000
--- a/pages/tags.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { chakra } from "@chakra-ui/react"
-import Container from "components/container"
-import SEO from "components/seo"
-import siteConfig from "configs/site-config"
-import Nav from "layouts/nav/nav"
-import PageContainer from "layouts/page-container"
-import React from "react"
-
-const TagsPage = () => (
-  <>
-    <SEO
-      title={siteConfig.seo.title}
-      description={siteConfig.seo.description}
-    />
-    <Nav />
-    <PageContainer>
-      <chakra.h1>Tags</chakra.h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </PageContainer>
-  </>
-)
-
-export default TagsPage
-
diff --git a/pages/tags/[name].tsx b/pages/tags/[name].tsx
index 4c049349..ff8c738a 100644
--- a/pages/tags/[name].tsx
+++ b/pages/tags/[name].tsx
@@ -1,6 +1,7 @@
 import { Box, Button, chakra, Flex, Heading, HStack, Image, Text, VStack } from "@chakra-ui/react"
 import Card from "components/card"
 import Container from "components/container"
+import Empty from "components/empty"
 import { MarkdownRender } from "components/markdown-editor/render"
 import Posts from "components/posts/posts"
 import SEO from "components/seo"
@@ -66,10 +67,7 @@ const UserPage = () => {
                             {
                                 posts.length === 0 ?
                                     <Card width="100%" height="fit-content">
-                                        <VStack spacing="16" py="16">
-                                            <Text fontSize="1.2rem">There doesn't seem to be anything here!</Text>
-                                            <Image src="/not-found.png" width="300px" />
-                                        </VStack>
+                                        <Empty />
                                     </Card>
                                     :
                                     <Card width="100%" height="fit-content" p="0" px="3">
diff --git a/pages/tags/index.tsx b/pages/tags/index.tsx
new file mode 100644
index 00000000..f1d40462
--- /dev/null
+++ b/pages/tags/index.tsx
@@ -0,0 +1,25 @@
+import { chakra, HStack, VStack } from "@chakra-ui/react"
+import SEO from "components/seo"
+import siteConfig from "configs/site-config"
+import PageContainer1 from "layouts/page-container1"
+import React from "react"
+import {HomeSidebar} from 'pages/index'
+
+const TagsPage = () => (
+  <>
+    <SEO
+      title={siteConfig.seo.title}
+      description={siteConfig.seo.description}
+    />
+    <PageContainer1>
+      <HStack alignItems="top" p="4" spacing="3">
+        <VStack alignItems="left" width={["100%", "100%", "70%", "70%"]} spacing="3">
+        </VStack>
+        <HomeSidebar />
+      </HStack>
+    </PageContainer1>
+  </>
+)
+
+export default TagsPage
+
diff --git a/src/components/card.tsx b/src/components/card.tsx
index c6790521..035e7241 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -8,7 +8,7 @@ export const Card = (props: BoxProps) => {
       bg={bg}
       borderRadius=".5rem"
       borderWidth="1px"
-      p={["0rem",".5rem","1rem"]}
+      p={[2,2,4,4]}
       boxShadow="0 1px 1px 0 rgb(0 0 0 / 5%)"
       {...props}
     />
diff --git a/src/components/comments/comment.tsx b/src/components/comments/comment.tsx
index 835b2eb1..645fe20d 100644
--- a/src/components/comments/comment.tsx
+++ b/src/components/comments/comment.tsx
@@ -11,6 +11,7 @@ import { User } from "src/types/session"
 import CommentEditor from "./editor"
 import { requestApi } from "utils/axios/request"
 import Reply from "./reply"
+import Link from "next/link"
 
 interface Props {
     user: User
@@ -50,13 +51,15 @@ export const CommentCard = (props: Props) => {
                 <Card>
                     <VStack alignItems="left">
                         <Flex justifyContent="space-between" width="100%" alignItems="top">
-                            <HStack spacing="4">
-                                <Avatar src={comment.creator.avatar}></Avatar>
-                                <VStack alignItems="left">
-                                    <Heading size="sm" fontSize="1.2rem">{getUserName(comment.creator)}</Heading>
-                                    <Text layerStyle="textSecondary" fontSize=".9rem">about this user</Text>
-                                </VStack>
-                            </HStack>
+                            <Link href={`/${comment.creator.username}`}>
+                                <HStack spacing="4" cursor="pointer">
+                                    <Avatar src={comment.creator.avatar}></Avatar>
+                                    <VStack alignItems="left">
+                                        <Heading size="sm" fontSize="1.2rem">{getUserName(comment.creator)}</Heading>
+                                        <Text layerStyle="textSecondary" fontSize=".9rem">about this user</Text>
+                                    </VStack>
+                                </HStack>
+                            </Link>
                             <Text layerStyle="textSecondary" marginTop="2px">{moment(comment.created).fromNow()}</Text>
                         </Flex>
 
diff --git a/src/components/comments/reply.tsx b/src/components/comments/reply.tsx
index 9f19a555..087b7cc0 100644
--- a/src/components/comments/reply.tsx
+++ b/src/components/comments/reply.tsx
@@ -10,6 +10,7 @@ import { FaRegEdit, FaRegFlag, FaRegTrashAlt, FaReply, FaTrash } from "react-ico
 import { User } from "src/types/session"
 import CommentEditor from "./editor"
 import { requestApi } from "utils/axios/request"
+import Link from "next/link"
 
 interface Props {
     user: User
@@ -61,12 +62,14 @@ export const Reply = (props: Props) => {
             editorVisible ? (user && <CommentEditor user={user} md={comment.md} onSubmit={md => {setEditorVisible(false);changeReply(md)}} onCancel={() => setEditorVisible(false)} menu={false} />) :
                     <VStack alignItems="left">
                         <Flex width="100%" alignItems="center" justifyContent="space-between">
-                            <HStack spacing="4">
-                                <Avatar src={comment.creator.avatar} width="40px" height="40px"></Avatar>
-                                <VStack alignItems="left">
-                                    <Heading size="sm" fontSize="1.1rem">{getUserName(comment.creator)}</Heading>
-                                </VStack>
-                            </HStack>
+                            <Link href={`/${comment.creator.username}`}>
+                                <HStack spacing="4" cursor="pointer">
+                                    <Avatar src={comment.creator.avatar} width="40px" height="40px"></Avatar>
+                                    <VStack alignItems="left">
+                                        <Heading size="sm" fontSize="1.1rem">{getUserName(comment.creator)}</Heading>
+                                    </VStack>
+                                </HStack>
+                            </Link>
                             <Text layerStyle="textSecondary" ml="2" fontSize=".9rem">{moment(comment.created).fromNow()}</Text>
                         </Flex>
 
diff --git a/src/components/empty.tsx b/src/components/empty.tsx
new file mode 100644
index 00000000..ccbf46c4
--- /dev/null
+++ b/src/components/empty.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { Image, Text, useColorModeValue, VStack } from "@chakra-ui/react"
+
+export const Empty = () => {
+  return (
+    <VStack spacing="16" py="16">
+    <Text fontSize="1.2rem">There doesn't seem to be anything here!</Text>
+    <Image src="/not-found.png" height="260px" />
+  </VStack>
+  )
+} 
+
+export default Empty
diff --git a/src/components/posts/post-card.tsx b/src/components/posts/post-card.tsx
index d186bc9a..db117c09 100644
--- a/src/components/posts/post-card.tsx
+++ b/src/components/posts/post-card.tsx
@@ -23,7 +23,7 @@ export const PostCard = (props: Props) => {
                 <Layout alignItems={isLargeScreen ? "top" : "left"} cursor="pointer" pl="2" pt="1">
                     <VStack alignItems="left" spacing="3" width={isLargeScreen ? "calc(100% - 18rem)" : '100%'}>
                         <Heading size="md">{post.title}</Heading>
-                        <Text layerStyle="textSecondary">{post.brief}</Text>
+                        <Text layerStyle="textSecondary" maxW="400px">{post.brief}</Text>
                     </VStack>
                     {post.cover && <Image src={post.cover} width="18rem" height="120px" pt={isLargeScreen ? 0 : 2} borderRadius="4px" />}
                 </Layout>
diff --git a/src/components/posts/text-post-card.tsx b/src/components/posts/text-post-card.tsx
index 85ac2504..8396391a 100644
--- a/src/components/posts/text-post-card.tsx
+++ b/src/components/posts/text-post-card.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import {chakra, Heading, VStack, Text, HStack,Button, Flex,PropsOf, Tag } from "@chakra-ui/react"
+import {chakra, Heading, VStack, Text, HStack,Button, Flex,PropsOf, Tag, useMediaQuery } from "@chakra-ui/react"
 import { Post } from "src/types/posts"
 import moment from 'moment'
 
@@ -14,21 +14,24 @@ type Props = PropsOf<typeof chakra.div> & {
 export const TextPostCard= (props:Props) =>{
     const {post,showActions,onEdit,onDelete, ...rest} = props
 
+    const [isSmallScreen] = useMediaQuery("(max-width: 768px)")
+    const Lay = isSmallScreen ? VStack : Flex
     const gap = moment(post.created).fromNow()
     return (
-        <Flex justifyContent="space-between"  {...rest}>
-            <VStack alignItems="left" as="a" href={post.url ? post.url : `/${post.creator.username}/${post.id}`}>
+        //@ts-ignore
+        <Lay justifyContent="space-between" alignItems={isSmallScreen? "left" : "center"}  {...rest}>
+            <VStack alignItems="left" as="a" href={post.url ? post.url : `/${post.creator.username}/${post.id}`} spacing={{base: 4, md: 2}}>
                 <Heading size="sm" display="flex" alignItems="center">
                     {post.url ? <Tag size="sm" mr="2">外部</Tag> : <Tag size="sm" mr="2">原创</Tag>}
                     {post.title}
                 </Heading>
                 <Text fontSize=".9rem">发布于{gap}</Text>
             </VStack>
-            {props.showActions && <HStack>
+            {props.showActions && <HStack pt={{base: 3, md: 0}}>
                 <Button size="sm" colorScheme="teal" variant="outline" onClick={onEdit}>Edit</Button>
                 <Button size="sm" onClick={props.onDelete} variant="ghost">Delete</Button>
             </HStack>}
-        </Flex>  
+        </Lay>  
     )
 } 
 
diff --git a/src/components/svg-icon.tsx b/src/components/svg-icon.tsx
new file mode 100644
index 00000000..f15e57c7
--- /dev/null
+++ b/src/components/svg-icon.tsx
@@ -0,0 +1,24 @@
+export function getSvgIcon(name,height="1.4rem") {
+    let svg
+    switch (name) {
+        case "home":
+            svg = <svg fill="currentColor" height={height} viewBox="0 0 576 512"><path d="M541 229.16l-232.85-190a32.16 32.16 0 00-40.38 0L35 229.16a8 8 0 00-1.16 11.24l10.1 12.41a8 8 0 0011.2 1.19L96 220.62v243a16 16 0 0016 16h128a16 16 0 0016-16v-128l64 .3V464a16 16 0 0016 16l128-.33a16 16 0 0016-16V220.62L520.86 254a8 8 0 0011.25-1.16l10.1-12.41a8 8 0 00-1.21-11.27zm-93.11 218.59h.1l-96 .3V319.88a16.05 16.05 0 00-15.95-16l-96-.27a16 16 0 00-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path></svg>
+            break
+        case "tags":
+            svg = <svg fill="currentColor" height={height}  viewBox="0 0 640 512"><path d="M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 00380.117 32h-19.549l-32-32h51.549a48 48 0 0133.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 00252.118 32m0-32a48 48 0 0133.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 010 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z"></path></svg>
+            break
+        case "post":
+            svg = <svg fill="currentColor" height={height} viewBox="0 0 384 512"><path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z"></path></svg>
+            break;
+        case "series":
+            svg = <svg fill="currentColor" height={height} viewBox="0 0 512 512"><path d="M512 256.01c0-9.98-5.81-18.94-14.77-22.81l-99.74-43.27 99.7-43.26c9-3.89 14.81-12.84 14.81-22.81s-5.81-18.92-14.77-22.79L271.94 3.33c-10.1-4.44-21.71-4.45-31.87-.02L14.81 101.06C5.81 104.95 0 113.9 0 123.87s5.81 18.92 14.77 22.79l99.73 43.28-99.7 43.26C5.81 237.08 0 246.03 0 256.01c0 9.97 5.81 18.92 14.77 22.79l99.72 43.26-99.69 43.25C5.81 369.21 0 378.16 0 388.14c0 9.97 5.81 18.92 14.77 22.79l225.32 97.76a40.066 40.066 0 0015.9 3.31c5.42 0 10.84-1.1 15.9-3.31l225.29-97.74c9-3.89 14.81-12.84 14.81-22.81 0-9.98-5.81-18.94-14.77-22.81l-99.72-43.26 99.69-43.25c9-3.89 14.81-12.84 14.81-22.81zM45.23 123.87l208.03-90.26.03-.02c1.74-.71 3.65-.76 5.45.02l208.03 90.26-208.03 90.27c-1.81.77-3.74.77-5.48 0L45.23 123.87zm421.54 264.27L258.74 478.4c-1.81.77-3.74.77-5.48 0L45.23 388.13l110.76-48.06 84.11 36.49a40.066 40.066 0 0015.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.11-36.49 110.76 48.07zm-208.03-41.87c-1.81.77-3.74.77-5.48 0L45.23 256 156 207.94l84.1 36.5a40.066 40.066 0 0015.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.1-36.49 110.77 48.07-208.03 90.25z"></path></svg>
+            break
+        case "explore":
+            svg = <svg fill="currentColor" height={height}  viewBox="0 0 496 512"><path d="M264.97 272.97c9.38-9.37 9.38-24.57 0-33.94-9.37-9.37-24.57-9.37-33.94 0-9.38 9.37-9.38 24.57 0 33.94 9.37 9.37 24.57 9.37 33.94 0zM351.44 125c-2.26 0-4.51.37-6.71 1.16l-154.9 55.85c-7.49 2.7-13.1 8.31-15.8 15.8l-55.85 154.91c-5.65 15.67 10.33 34.27 26.4 34.27 2.26 0 4.51-.37 6.71-1.16l154.9-55.85c7.49-2.7 13.1-8.31 15.8-15.8l55.85-154.9c5.64-15.67-10.33-34.28-26.4-34.28zm-58.65 175.79l-140.1 50.51 50.51-140.11 140.11-50.51-50.52 140.11zM248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216z"></path></svg>
+            break
+        default:
+            break; 
+    }
+
+    return svg
+}
\ No newline at end of file
diff --git a/src/data/links.tsx b/src/data/links.tsx
index e0454ed9..6ea90532 100644
--- a/src/data/links.tsx
+++ b/src/data/links.tsx
@@ -1,23 +1,18 @@
+import {getSvgIcon } from 'components/svg-icon'
 import React from 'react'
-import { FaFileAlt, FaScroll, FaBookOpen, FaTags, FaUserCircle } from 'react-icons/fa'
+import { FaFileAlt, FaScroll, FaBookOpen, FaTags, FaUserCircle, FaRegFile } from 'react-icons/fa'
 import { Route } from 'src/types/route'
 import { ReserveUrls } from './reserve-urls'
 export const editorLinks: Route[] = [{
     title: '文章',
     path: `${ReserveUrls.Editor}/posts`,
-    icon: <FaFileAlt />,
+    icon: getSvgIcon("post"),
     disabled: false
 },
 {
     title: '系列',
     path: `${ReserveUrls.Editor}/series`,
-    icon: <FaBookOpen />,
-    disabled: false
-},
-{
-    title: '课程',
-    path: `${ReserveUrls.Editor}/course`,
-    icon: <FaScroll />,
+    icon: getSvgIcon("series"),
     disabled: false
 }
 ]
@@ -25,7 +20,7 @@ export const editorLinks: Route[] = [{
 export const adminLinks: Route[] = [{
     title: '标签管理',
     path: `${ReserveUrls.Admin}/tags`,
-    icon: <FaTags />,
+    icon: getSvgIcon("tags"),
     disabled: false
 }]