Skip to content

Commit ce37d69

Browse files
emirikoemiriko
committed
feat: adding sider
1 parent 5897b09 commit ce37d69

File tree

6 files changed

+45
-22
lines changed

6 files changed

+45
-22
lines changed

‎src/components/elements/Footer/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export const Footer = () => {
3535
className="animated-underline text-xs font-semibold hover:text-secondary duration-200 sm:text-sm"
3636
title={
3737
<>
38-
<span className="block md:hidden">{item.name}</span>
39-
<span className="hidden md:block">{item.username}</span>
38+
<span className="block lg:hidden">{item.name}</span>
39+
<span className="hidden lg:block">{item.username}</span>
4040
</>
4141
}
4242
/>
@@ -49,7 +49,7 @@ export const Footer = () => {
4949

5050
<div className="border-t lg:border-gray flex justify-center px-8">
5151
<div className="container">
52-
<div className="flex md:flex-row flex-col gap-4 items-center justify-between py-6">
52+
<div className="flex lg:flex-row flex-col gap-4 items-center justify-between py-6">
5353
<div className="flex items-center gap-x-2">
5454
<FaGithub />
5555
<CustomLink
@@ -58,11 +58,11 @@ export const Footer = () => {
5858
className="text-xs font-semibold sm:text-sm"
5959
title={
6060
<>
61-
<span className="hidden md:block hover:text-secondary duration-200">
61+
<span className="hidden lg:block hover:text-secondary duration-200">
6262
{' '}
6363
github.com/emiriko{' '}
6464
</span>
65-
<span className="block md:hidden hover:text-secondary duration-200">
65+
<span className="block lg:hidden hover:text-secondary duration-200">
6666
{' '}
6767
My GitHub{' '}
6868
</span>

‎src/components/modules/AboutMeModule/sections/HeroSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import FormalPicture from '../../../../assets/Formal.png';
77
export const HeroSection: React.FC = () => {
88
return (
99
<section className="flex flex-col gap-x-8 gap-y-8 relative" id="about">
10-
<div className="flex md:flex-row flex-col w-full gap-8 md:items-start items-center">
10+
<div className="flex lg:flex-row flex-col w-full gap-8 lg:items-start items-center">
1111
<div className="w-full flex flex-col gap-y-12">
1212
<h1 className="text-secondary text-4xl font-bold">
1313
{' '}

‎src/components/modules/HomeModule/sections/AchievementSection.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import { ACHIEVEMENTS } from '../constant';
33

44
export const AchievementSection: React.FC = () => (
5-
<section className="md:mx-0 mx-auto">
6-
<div className="grid grid-cols-2 gap-8 md:flex md:justify-around items-center pt-20 pb-10">
5+
<section className="lg:mx-0 mx-auto">
6+
<div className="grid grid-cols-2 gap-8 lg:flex lg:justify-around items-center pt-20 pb-10">
77
{ACHIEVEMENTS.map((achievement, index) => (
88
<React.Fragment key={index}>
99
<div className="text-center">
@@ -13,7 +13,7 @@ export const AchievementSection: React.FC = () => (
1313
<p className="text-gray-700">{achievement.title}</p>
1414
</div>
1515
{index < ACHIEVEMENTS.length - 1 && (
16-
<div className="border h-20 md:flex hidden border-primary"></div>
16+
<div className="border h-20 lg:flex hidden border-primary"></div>
1717
)}
1818
</React.Fragment>
1919
))}

‎src/components/modules/HomeModule/sections/HeroSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { URL_CV } from '../../AboutMeModule/constant';
77

88
export const HeroSection: React.FC = () => (
99
<section className="flex flex-col gap-y-16">
10-
<div className="flex md:flex-row flex-col gap-16 w-full items-center justify-between">
10+
<div className="flex lg:flex-row flex-col gap-16 w-full items-center justify-between">
1111
<div className="flex flex-col gap-y-8 w-full">
1212
<div className="flex flex-col gap-y-2 w-full">
1313
<Typography.Text className="text-black text-3xl font-bold">

‎src/components/modules/HomeModule/sections/ProjectSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const ProjectSection: React.FC = () => {
2323
}
2424
/>
2525
</div>
26-
<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 grid-flow-row gap-4">
26+
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 grid-flow-row gap-4">
2727
{APP_DATA.slice(0, width >= 768 ? 3 : width >= 640 ? 2 : 1).map(
2828
(project, key) => (
2929
<ProjectCard key={key} {...project} />

‎src/routes.tsx

+34-11
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { Fragment } from 'react';
2-
import { Route, Routes } from 'react-router-dom';
3-
import { ConfigProvider } from 'antd';
2+
import { Route, Routes, useNavigate } from 'react-router-dom';
3+
import { ConfigProvider, Layout, Menu } from 'antd';
44
import { Footer } from './components/elements';
5+
import Sider from 'antd/es/layout/Sider';
6+
import { HomeOutlined, InfoCircleOutlined, ProjectOutlined } from '@ant-design/icons';
7+
58

69
const PRESERVED: {
710
[key: string]: { default: React.ComponentType };
@@ -31,9 +34,11 @@ const routes = Object.keys(ROUTES).map((route) => {
3134
return { path, component: ROUTES[route].default };
3235
});
3336

37+
3438
function App() {
3539
const App = preserved?.['_app'] || Fragment;
3640
const NotFound = preserved?.['_404'] || Fragment;
41+
const navigate = useNavigate();
3742

3843
return (
3944
<ConfigProvider
@@ -43,15 +48,33 @@ function App() {
4348
}
4449
}}
4550
>
46-
<App>
47-
<Routes>
48-
{routes.map(({ path, component: Component = Fragment }) => (
49-
<Route key={path} path={path} element={<Component />} />
50-
))}
51-
<Route path="*" element={<NotFound />} />
52-
</Routes>
53-
<Footer />
54-
</App>
51+
<Layout style={{ minHeight: '100vh' }}>
52+
<Sider collapsible>
53+
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" className='flex flex-col justify-center items-center py-8 px-4 fixed'>
54+
<Menu.Item key="1" icon={<HomeOutlined />} onClick={() => navigate('/')}>
55+
Home
56+
</Menu.Item>
57+
<Menu.Item key="2" icon={<InfoCircleOutlined />} onClick={() => navigate('/about')}>
58+
About
59+
</Menu.Item>
60+
<Menu.Item key="3" icon={<ProjectOutlined />} onClick={() => navigate('/works')}>
61+
Work
62+
</Menu.Item>
63+
</Menu>
64+
</Sider>
65+
66+
<main className = "flex flex-col">
67+
<App>
68+
<Routes>
69+
{routes.map(({ path, component: Component = Fragment }) => (
70+
<Route key={path} path={path} element={<Component />} />
71+
))}
72+
<Route path="*" element={<NotFound />} />
73+
</Routes>
74+
</App>
75+
<Footer />
76+
</main>
77+
</Layout>
5578
</ConfigProvider>
5679
);
5780
}

0 commit comments

Comments
 (0)