Skip to content

Commit 0cf7d6f

Browse files
fezcodefezcode
committed
sidebar
1 parent 0253d2c commit 0cf7d6f

File tree

5 files changed

+394
-46
lines changed

5 files changed

+394
-46
lines changed

‎src/components/Footer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import { version } from '../version';
34

45
const Footer = () => {
56
return (
@@ -33,7 +34,7 @@ const Footer = () => {
3334
<Link to="/logs" className="text-primary-400 hover:text-white transition-colors" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>Logs</Link>
3435
</div>
3536
<p className="text-sm text-gray-500">
36-
&copy; {new Date().getFullYear()} fezcode. All rights reserved. <code> v0.0.8 </code>
37+
&copy; {new Date().getFullYear()} fezcode. All rights reserved. <code> v{version} </code>
3738
</p>
3839
</div>
3940
</div>

‎src/components/Layout.js‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import Navbar from './Navbar';
33
import Footer from './Footer';
4+
import Sidebar from './Sidebar';
5+
import { List } from '@phosphor-icons/react';
46

57
const Layout = ({ children }) => {
8+
const [isSidebarOpen, setIsSidebarOpen] = useState(window.innerWidth > 768);
9+
10+
useEffect(() => {
11+
const handleResize = () => {
12+
if (window.innerWidth <= 768) {
13+
setIsSidebarOpen(false);
14+
}
15+
};
16+
17+
window.addEventListener('resize', handleResize);
18+
19+
return () => {
20+
window.removeEventListener('resize', handleResize);
21+
};
22+
}, []);
23+
24+
const toggleSidebar = () => {
25+
setIsSidebarOpen(!isSidebarOpen);
26+
};
27+
628
return (
7-
<div className="bg-gray-950 min-h-screen font-sans">
8-
<Navbar />
9-
<main className="flex-grow">
10-
{children}
11-
</main>
12-
<Footer />
29+
<div className="bg-gray-950 min-h-screen font-sans flex">
30+
<Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
31+
<div className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen ? 'md:ml-64' : 'md:ml-0'}`}>
32+
<Navbar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
33+
<main className="flex-grow">
34+
{children}
35+
</main>
36+
<Footer />
37+
</div>
1338
</div>
1439
);
1540
};

‎src/components/Navbar.js‎

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import Fez from './Fez';
4-
import { List, X } from '@phosphor-icons/react';
4+
import { List, User, BookOpen } from '@phosphor-icons/react';
55

6-
const Navbar = () => {
6+
const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
77
const [isScrolled, setIsScrolled] = useState(false);
8-
const [isMenuOpen, setIsMenuOpen] = useState(false);
98

109
useEffect(() => {
1110
const handleScroll = () => {
@@ -17,47 +16,45 @@ const Navbar = () => {
1716
};
1817
}, []);
1918

20-
const toggleMenu = () => {
21-
setIsMenuOpen(!isMenuOpen);
22-
};
23-
2419
return (
25-
<header className={`backdrop-blur-sm sticky top-0 z-40 transition-colors border-b ${isScrolled ? 'border-gray-700/50' : 'border-transparent'}`}>
20+
<header className={`backdrop-blur-sm sticky top-0 z-30 transition-colors border-b ${isScrolled ? 'border-gray-700/50' : 'border-transparent'} relative`}>
21+
<button onClick={toggleSidebar} className="absolute top-1/2 -translate-y-1/2 left-4 text-red-500 focus:outline-none hidden md:block">
22+
<List size={24} />
23+
</button>
2624
<div className="container mx-auto flex justify-between items-center p-4 text-white">
27-
<Link to="/" className="flex items-center space-x-2">
28-
<Fez />
29-
<span className="text-2xl font-semibold tracking-tight">fez<span className="text-primary-400">codex</span></span>
30-
</Link>
31-
<div className="hidden md:flex items-center space-x-6">
32-
<Link to="/" className="text-sm font-medium hover:text-gray-300 transition-colors">Home</Link>
33-
<Link to="/about" className="text-sm font-medium hover:text-gray-300 transition-colors">About</Link>
34-
<Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
35-
<Link to="/projects" className="text-sm font-medium hover:text-gray-300 transition-colors">Projects</Link>
36-
<Link to="/logs" className="text-sm font-medium text-primary-400 hover:text-gray-300 transition-colors">Logs</Link>
37-
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
38-
Play Wordle
39-
</a>
40-
</div>
41-
<div className="md:hidden">
42-
<button onClick={toggleMenu} className="text-white focus:outline-none">
43-
{isMenuOpen ? <X size={24} /> : <List size={24} />}
25+
<div className="md:hidden flex items-center space-x-2">
26+
<button onClick={toggleSidebar} className="text-white focus:outline-none">
27+
<List size={24} />
4428
</button>
29+
<Link to="/" className="flex items-center space-x-2">
30+
<Fez />
31+
<span className="text-2xl font-semibold tracking-tight">fez<span className="text-primary-400">codex</span></span>
32+
</Link>
4533
</div>
46-
</div>
47-
{isMenuOpen && (
48-
<div className="md:hidden bg-gray-900/90 backdrop-blur-sm">
49-
<div className="container mx-auto flex flex-col items-center space-y-4 p-4">
50-
<Link to="/" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Home</Link>
51-
<Link to="/about" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>About</Link>
52-
<Link to="/blog" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Blog</Link>
53-
<Link to="/projects" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Projects</Link>
54-
<Link to="/logs" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Logs</Link>
55-
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors" onClick={toggleMenu}>
56-
Play Wordle
57-
</a>
34+
<div className="hidden md:flex items-center space-x-2 ml-16">
35+
{!isSidebarOpen && (
36+
<Link to="/" className="flex items-center space-x-2">
37+
<Fez />
38+
<span className="text-2xl font-semibold tracking-tight">fez<span className="text-primary-400">codex</span></span>
39+
</Link>
40+
)}
41+
</div>
42+
{isSidebarOpen && (
43+
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
44+
<span className="text-lg font-semibold tracking-tight">A Fez of Code</span>
5845
</div>
46+
)}
47+
<div className="hidden md:flex items-center space-x-6">
48+
<Link to="/about" className="flex items-center space-x-3 text-gray-300 hover:text-white hover:bg-gray-800 px-3 py-2 rounded-md transition-colors">
49+
<User size={24} />
50+
<span>About</span>
51+
</Link>
52+
<Link to="/blog" className="flex items-center space-x-3 text-gray-300 hover:text-white hover:bg-gray-800 px-3 py-2 rounded-md transition-colors">
53+
<BookOpen size={24} />
54+
<span>Blog</span>
55+
</Link>
5956
</div>
60-
)}
57+
</div>
6158
</header>
6259
);
6360
};

0 commit comments

Comments
 (0)