Skip to content

Commit 85ddf0b

Browse files
RostislavDuginRostislavDugin
committed
FEATURE (website): Implement new website
1 parent b3dd5eb commit 85ddf0b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+2554
-2494
lines changed

‎app/access-management/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ export default function AccessManagementPage() {
6767

6868
<DocsNavbarComponent />
6969

70-
<div className="flex min-h-screen">
70+
<div className="flex min-h-screen bg-[#0F1115]">
7171
{/* Sidebar */}
7272
<DocsSidebarComponent />
7373

7474
{/* Main Content */}
75-
<main className="flex-1 px-4 py-6 sm:px-6 sm:py-8 lg:px-12">
75+
<main className="flex-1 min-w-0 px-4 py-6 sm:px-6 sm:py-8 lg:px-12">
7676
<div className="mx-auto max-w-4xl">
7777
<article className="prose prose-blue max-w-none">
7878
<h1 id="settings">Settings</h1>

‎app/components/DocTableOfContentComponent.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function DocTableOfContentComponent() {
7070
}
7171

7272
return (
73-
<aside className="hidden w-64 border-l border-gray-200 bg-white xl:block">
73+
<aside className="hidden w-64 border-l border-[#ffffff20] bg-[#0F1115] xl:block">
7474
<div className="sticky top-0 h-screen overflow-y-auto p-6">
7575
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-500">
7676
On This Page
@@ -87,15 +87,15 @@ export default function DocTableOfContentComponent() {
8787
onClick={() => handleClick(heading.id)}
8888
className={`block w-full text-left transition-all duration-200 cursor-pointer relative pl-3 py-0.5 ${
8989
activeId === heading.id
90-
? "text-gray-900 font-normal"
91-
: "text-gray-500 hover:text-gray-900"
90+
? "text-white font-normal"
91+
: "text-gray-500 hover:text-white"
9292
}`}
9393
>
9494
<span
9595
className={`absolute left-0 top-0 bottom-0 w-0.5 transition-all duration-200 ${
9696
activeId === heading.id
97-
? "bg-blue-500 opacity-100"
98-
: "bg-gray-300 opacity-0"
97+
? "bg-blue-600 opacity-100"
98+
: "bg-gray-600 opacity-0"
9999
}`}
100100
/>
101101
{heading.text}

‎app/components/DocsNavbarComponent.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
"use client";
22

3-
import Image from "next/image";
43
import Link from "next/link";
54

65
export default function DocsNavbarComponent() {
76
return (
8-
<nav className="flex h-[60px] w-full justify-center border-b border-gray-200 bg-white sm:h-[70px] md:h-[80px]">
7+
<nav className="flex h-[60px] w-full justify-center border-b border-[#ffffff20] bg-[#0F1115] sm:h-[70px] md:h-[80px]">
98
<div className="flex min-w-0 grow items-center px-4 sm:px-6 md:px-10">
109
<Link href="/" className="flex items-center">
11-
<Image
10+
<img
1211
src="/logo.svg"
1312
alt="Postgresus logo"
14-
width={30}
15-
height={30}
16-
className="shrink-0 sm:h-[40px] sm:w-[40px] md:h-[50px] md:w-[50px]"
17-
priority
13+
className="shrink-0 sm:h-[35px] sm:w-[35px] md:h-[35px] md:w-[35px]"
14+
fetchPriority="high"
15+
loading="eager"
1816
/>
1917

20-
<div className="ml-2 select-none text-lg font-bold sm:ml-3 sm:text-xl md:ml-3 md:text-2xl">
18+
<div className="ml-4 select-none text-lg font-bold text-white sm:ml-3 sm:text-xl md:ml-4 md:text-2xl">
2119
Postgresus
2220
</div>
2321
</Link>
2422

2523
<div className="ml-auto mr-4 hidden gap-3 sm:mr-6 md:mr-10 lg:flex lg:gap-5">
2624
<a
27-
className="hover:opacity-70"
25+
className="text-gray-300 hover:text-white transition-colors"
2826
href="https://t.me/postgresus_community"
2927
target="_blank"
3028
rel="noopener noreferrer"
@@ -34,27 +32,37 @@ export default function DocsNavbarComponent() {
3432
</div>
3533

3634
<a
37-
className="ml-auto lg:ml-0"
3835
href="https://github.com/RostislavDugin/postgresus"
3936
target="_blank"
4037
rel="noopener noreferrer"
38+
className="ml-auto lg:ml-0 flex items-center gap-2 hover:opacity-70 rounded-lg px-2 md:px-3 py-2 text-[14px] border border-[#ffffff20] bg-[#0C0E13] transition-opacity"
4139
>
42-
<div className="flex items-center rounded-lg border border-gray-200 bg-[#f5f7f9] px-2 py-1 hover:bg-gray-100 md:px-4 md:py-2">
43-
<Image
44-
src="/images/index/github.svg"
45-
className="mr-1 h-4 w-4 sm:mr-2 md:mr-3"
46-
alt="GitHub icon"
47-
width={16}
48-
height={16}
49-
priority
50-
/>
51-
<span className="text-sm sm:text-base">
52-
Star on GitHub
53-
<span className="hidden sm:inline">
54-
, it&apos;s really important ❤️
55-
</span>
56-
</span>
57-
</div>
40+
<svg
41+
aria-hidden={true}
42+
width="24"
43+
height="24"
44+
viewBox="0 0 20 20"
45+
fill="none"
46+
xmlns="http://www.w3.org/2000/svg"
47+
>
48+
<g clipPath="url(#clip0_docs_nav)">
49+
<path
50+
fillRule="evenodd"
51+
clipRule="evenodd"
52+
d="M9.9702 0C4.45694 0 0 4.4898 0 10.0443C0 14.4843 2.85571 18.2427 6.81735 19.5729C7.31265 19.6729 7.49408 19.3567 7.49408 19.0908C7.49408 18.858 7.47775 18.0598 7.47775 17.2282C4.70429 17.8269 4.12673 16.0308 4.12673 16.0308C3.68102 14.8667 3.02061 14.5676 3.02061 14.5676C2.11286 13.9522 3.08673 13.9522 3.08673 13.9522C4.09367 14.0188 4.62204 14.9833 4.62204 14.9833C5.51327 16.5131 6.94939 16.0808 7.52714 15.8147C7.60959 15.1661 7.87388 14.7171 8.15449 14.4678C5.94245 14.2349 3.6151 13.3702 3.6151 9.51204C3.6151 8.41449 4.01102 7.51653 4.63837 6.81816C4.53939 6.56878 4.19265 5.53755 4.73755 4.15735C4.73755 4.15735 5.57939 3.89122 7.47755 5.18837C8.29022 4.9685 9.12832 4.85666 9.9702 4.85571C10.812 4.85571 11.6702 4.97225 12.4627 5.18837C14.361 3.89122 15.2029 4.15735 15.2029 4.15735C15.7478 5.53755 15.4008 6.56878 15.3018 6.81816C15.9457 7.51653 16.3253 8.41449 16.3253 9.51204C16.3253 13.3702 13.998 14.2182 11.7694 14.4678C12.1327 14.7837 12.4461 15.3822 12.4461 16.3302C12.4461 17.6771 12.4298 18.7582 12.4298 19.0906C12.4298 19.3567 12.6114 19.6729 13.1065 19.5731C17.0682 18.2424 19.9239 14.4843 19.9239 10.0443C19.9402 4.4898 15.4669 0 9.9702 0Z"
53+
fill="white"
54+
/>
55+
</g>
56+
<defs>
57+
<clipPath id="clip0_docs_nav">
58+
<rect width="20" height="20" fill="white" />
59+
</clipPath>
60+
</defs>
61+
</svg>
62+
<span className="hidden xl:inline">
63+
Star on GitHub, it&apos;s really important ❤️
64+
</span>
65+
<span className="inline xl:hidden">GitHub</span>
5866
</a>
5967
</div>
6068
</nav>

‎app/components/DocsSidebarComponent.tsx‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -153,21 +153,28 @@ export default function DocsSidebarComponent() {
153153
<Link
154154
href={item.href}
155155
onClick={() => setIsMobileMenuOpen(false)}
156-
className={`flex-1 rounded-md px-2 py-1.5 text-sm transition-colors ${
156+
className={`flex-1 rounded-md px-2 py-1.5 text-sm transition-colors relative pl-4 ${
157157
isActive(item.href)
158-
? "text-blue-600 font-medium"
159-
: "text-gray-600 hover:text-gray-900"
158+
? "text-white font-medium"
159+
: "text-gray-400 hover:text-white"
160160
}`}
161161
>
162+
<span
163+
className={`absolute left-0 top-0 bottom-0 w-0.5 rounded-full transition-all duration-200 ${
164+
isActive(item.href)
165+
? "bg-blue-600 opacity-100"
166+
: "bg-transparent opacity-0"
167+
}`}
168+
/>
162169
{item.title}
163170
</Link>
164171
{item.children && (
165172
<button
166173
onClick={() => toggleSection(item.href, !!item.children)}
167174
className={`ml-1 rounded-md p-1 transition-all duration-200 ${
168175
isActive(item.href)
169-
? "text-gray-900"
170-
: "text-gray-400 hover:text-gray-600"
176+
? "text-white"
177+
: "text-gray-500 hover:text-gray-300"
171178
}`}
172179
aria-label={`Toggle ${item.title} section`}
173180
>
@@ -197,18 +204,25 @@ export default function DocsSidebarComponent() {
197204
: "max-h-0 opacity-0"
198205
}`}
199206
>
200-
<div className="ml-3 mt-0.5 space-y-0.5 border-l border-gray-200 pl-3">
207+
<div className="ml-3 mt-0.5 space-y-0.5 border-l border-[#ffffff20] pl-3">
201208
{item.children.map((child) => (
202209
<Link
203210
key={child.href}
204211
href={child.href}
205212
onClick={() => setIsMobileMenuOpen(false)}
206-
className={`block rounded-md px-2 py-1.5 text-sm transition-colors ${
213+
className={`block rounded-md px-2 py-1.5 text-sm transition-colors relative pl-4 ${
207214
isActive(child.href)
208-
? "text-blue-600 font-medium"
209-
: "text-gray-600 hover:text-gray-900"
215+
? "text-white font-medium"
216+
: "text-gray-400 hover:text-white"
210217
}`}
211218
>
219+
<span
220+
className={`absolute left-0 top-0 bottom-0 w-0.5 rounded-full transition-all duration-200 ${
221+
isActive(child.href)
222+
? "bg-blue-500 opacity-100"
223+
: "bg-transparent opacity-0"
224+
}`}
225+
/>
212226
{child.title}
213227
</Link>
214228
))}
@@ -262,22 +276,22 @@ export default function DocsSidebarComponent() {
262276
{/* Mobile Menu Overlay */}
263277
{isMobileMenuOpen && (
264278
<div
265-
className="fixed inset-0 z-40 backdrop-blur-md bg-white/10 lg:hidden"
279+
className="fixed inset-0 z-40 backdrop-blur-md bg-black/50 lg:hidden"
266280
onClick={() => setIsMobileMenuOpen(false)}
267281
/>
268282
)}
269283

270284
{/* Mobile Menu */}
271285
<aside
272-
className={`fixed bottom-0 left-0 right-0 z-40 max-h-[80vh] overflow-y-auto rounded-t-2xl border-t border-gray-200 bg-white p-6 shadow-2xl transition-transform duration-300 lg:hidden ${
286+
className={`fixed bottom-0 left-0 right-0 z-40 max-h-[80vh] overflow-y-auto rounded-t-2xl border-t border-[#ffffff20] bg-[#0F1115] p-6 shadow-2xl transition-transform duration-300 lg:hidden ${
273287
isMobileMenuOpen ? "translate-y-0" : "translate-y-full"
274288
}`}
275289
>
276290
<div className="mb-4 flex items-center justify-between">
277-
<h2 className="text-lg font-semibold text-gray-900">Navigation</h2>
291+
<h2 className="text-lg font-semibold text-white">Navigation</h2>
278292
<button
279293
onClick={() => setIsMobileMenuOpen(false)}
280-
className="rounded-lg p-2 text-gray-500 hover:bg-gray-100"
294+
className="rounded-lg p-2 text-gray-400 hover:bg-[#1f2937]"
281295
aria-label="Close menu"
282296
>
283297
<svg
@@ -299,7 +313,7 @@ export default function DocsSidebarComponent() {
299313
</aside>
300314

301315
{/* Desktop Sidebar */}
302-
<aside className="hidden w-64 border-r border-gray-200 bg-white lg:block">
316+
<aside className="hidden w-64 border-r border-[#ffffff20] bg-[#0F1115] lg:block">
303317
<div className="sticky top-0 h-screen overflow-y-auto p-6">
304318
{renderSidebarContent()}
305319
</div>

0 commit comments

Comments
 (0)