diff --git a/components/Drawer.js b/components/Drawer.js new file mode 100644 index 00000000..7c45ea99 --- /dev/null +++ b/components/Drawer.js @@ -0,0 +1,61 @@ +import Link from 'next/link' +import BLOG from '@/blog.config' +import SearchInput from '@/components/SearchInput' +import MenuButtonGroup from '@/components/MenuButtonGroup' +import TocBar from '@/components/TocBar' +import React, { useState } from 'react' + +/** + * 抽屉面板，可以从侧面拉出 + * @returns {JSX.Element} + * @constructor + */ +const Drawer = ({ post, currentTag }) => { + const [showDrawer, switchShowDrawer] = useState(false) + // 点击按钮更改侧边抽屉状态 + const handleMenuClick = () => { + switchShowDrawer(!showDrawer) + } + return
+ {/* 触发抽屉按钮 */} +
+ +
+
+
+ {/* LOGO */} +
+
+ +
+ + {BLOG.title} + +
+
+ {/* 侧边菜单 */} +
+
+
+ +
+ {/* 菜单 */} + + {post && ( +
+ +
+ )} +
+
+
+ {/* 背景蒙版 */} +
+
+} +export default Drawer diff --git a/components/Footer.js b/components/Footer.js index a0e5332c..89eb99e3 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -14,13 +14,13 @@ const Footer = ({ fullWidth = true }) => {
99999 pv + href='https://www.cnzz.com/stat/website.php?web_id=1279970751'>99999pv - 99999 uv + 99999uv ) diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js new file mode 100644 index 00000000..a8509810 --- /dev/null +++ b/components/MenuButtonGroup.js @@ -0,0 +1,41 @@ +import React from 'react' +import { useLocale } from '@/lib/locale' +import Link from 'next/link' + +const MenuButtonGroup = ({ allowCollapse = false }) => { + const locale = useLocale() + const links = [ + { id: 0, icon: 'fa-home', name: locale.NAV.INDEX, to: '/' || '/', show: true }, + { id: 1, icon: 'fa-info-circle', name: locale.NAV.ABOUT, to: '/article/about', show: true }, + { id: 2, icon: 'fa-rss-square', name: locale.NAV.RSS, to: '/feed', show: true }, + { id: 3, icon: 'fa-compass', name: '发现', to: 'https://search.tangly1024.com/', show: true }, + { id: 4, icon: 'fa-envelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }, + { id: 5, icon: 'fa-weibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true }, + { id: 6, icon: 'fa-map-marker', name: 'Fuzhou', to: '#', show: true }, + { id: 7, icon: 'fa-github', name: 'Github', to: 'https://github.com/tangly1024', show: true }, + { id: 8, icon: 'fa-twitter', name: 'Twitter', to: 'https://twitter.com/troy1024_1', show: true }, + { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true } + ] + return +} +export default MenuButtonGroup diff --git a/components/SearchInput.js b/components/SearchInput.js new file mode 100644 index 00000000..c25e6498 --- /dev/null +++ b/components/SearchInput.js @@ -0,0 +1,42 @@ +import React, { useState } from 'react' +import { useLocale } from '@/lib/locale' +import Router, { useRouter } from 'next/router' + +const SearchInput = ({ currentTag }) => { + const locale = useLocale() + const router = useRouter() + const [searchValue, setSearchValue] = useState('') + const handleSearch = () => { + if (searchValue && searchValue !== '') { + Router.push({ pathname: '/', query: { s: searchValue } }).then(r => { + console.log(r) + }) + } else { + Router.push({ pathname: '/' }).then(r => { + console.log(r) + }) + } + } + const handleKeyUp = (e) => { + if (e.keyCode === 13) { + handleSearch() + } + } + + return
+ setSearchValue(e.target.value)} + defaultValue={router.query.s ?? ''} + /> +
+ +
+
+} + +export default SearchInput diff --git a/components/SideBar.js b/components/SideBar.js new file mode 100644 index 00000000..08ae2b71 --- /dev/null +++ b/components/SideBar.js @@ -0,0 +1,22 @@ +import React from 'react' +import TocBar from '@/components/TocBar' +import MenuButtonGroup from '@/components/MenuButtonGroup' + +const SideBar = ({ tags, currentTag, post }) => { + return +} +export default SideBar diff --git a/components/SideBarEmbed.js b/components/SideBarEmbed.js deleted file mode 100644 index 023faa9f..00000000 --- a/components/SideBarEmbed.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import Footer from '@/components/Footer' -import TocBar from '@/components/TocBar' -import SocialButton from '@/components/SocialButton' - -const SideBarEmbed = ({ tags, currentTag, post }) => { - return -} -export default SideBarEmbed diff --git a/components/SideBarResponsive.js b/components/SideBarResponsive.js deleted file mode 100644 index 49c666af..00000000 --- a/components/SideBarResponsive.js +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import Footer from '@/components/Footer' -import TocBar from '@/components/TocBar' -import SocialButton from '@/components/SocialButton' - -const SideBarResponsive = ({ tags, currentTag, post }) => { - return -} -export default SideBarResponsive diff --git a/components/SocialButton.js b/components/SocialButton.js index c101a3d3..9bfc0dd3 100644 --- a/components/SocialButton.js +++ b/components/SocialButton.js @@ -23,7 +23,6 @@ const SocialButton = () => { href={'https://weibo.com/tangly1024'} >
-
} diff --git a/components/TagItem.js b/components/TagItem.js index 8935e0e3..8eb53684 100644 --- a/components/TagItem.js +++ b/components/TagItem.js @@ -3,7 +3,7 @@ import Link from 'next/link' const TagItem = ({ tag }) => ( -

{tag}

diff --git a/components/Tags.js b/components/Tags.js index c8bab369..039bcd7e 100644 --- a/components/Tags.js +++ b/components/Tags.js @@ -11,7 +11,7 @@ const Tags = ({ tags, currentTag }) => { if (!tags) return <> return (