Skip to content

Commit 1cb47ff

Browse files
GizmotronnGizmotronn
committed
🍀🌚 ↝ [SSG-63 SSM-54]: Testing out some new layout ideas
1 parent 4df2c42 commit 1cb47ff

File tree

5 files changed

+122
-79
lines changed

5 files changed

+122
-79
lines changed

‎app/page.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,6 @@ export default function Home() {
9696
</center>
9797
</div>
9898
<div className="w-full py-2">
99-
<center>
100-
<VerticalToolbar />
101-
</center>
10299
</div>
103100
</EarthViewLayout>
104101
// 60: <SaturnView />,

‎components/(scenes)/planetScene/layout.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from "@/constants/backgrounds";
1212
import backgroundImage from "@/public/assets/Backdrops/Negotiations.jpg";
1313
import Header from "@/components/ui/Header";
14+
import VerticalToolbar from "@/components/Layout/Toolbar";
1415

1516
interface PlanetViewLayoutProps {
1617
children: React.ReactNode[];
@@ -167,8 +168,10 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
167168
src="/assets/Backdrops/Earth.png"
168169
alt="Earth Background"
169170
/>
170-
171+
171172
<div className="relative flex flex-1 z-10">
173+
<VerticalToolbar />
174+
172175
<div className="relative flex flex-col flex-1">
173176
{children.slice(0, 2).map((child, index) => (
174177
<div

‎components/Layout/Starnet.tsx

+44-35
Original file line numberDiff line numberDiff line change
@@ -34,44 +34,53 @@ export default function StarnetLayout({ children }: { children: React.ReactNode
3434
);
3535

3636
return (
37-
<div className="flex h-screen squiggly-bg bg-background text-foreground">
38-
<aside className="hidden md:flex flex-col items-center justify-center w-16 bg-squiggly py-4 space-y-8 border-r border-gray-200">
39-
{menuItems.map((item, index) => (
40-
<MenuIcon
41-
key={index}
42-
Icon={item.icon}
43-
label={item.label}
44-
isActive={index === activeItem}
45-
onClick={() => router.push(item.route)}
46-
/>
47-
))}
48-
</aside>
37+
<div className="relative min-h-screen w-full flex">
38+
<img
39+
className="absolute inset-0 w-full h-full object-cover z-0"
40+
src="/assets/Backdrops/Earth.png"
41+
alt="Earth Background"
42+
/>
4943

50-
<div className="flex-1 flex flex-col h-screen">
51-
<header className="bg-squiggly border-b border-gray-200 p-4">
52-
<center><h1 className="text-xl font-bold text-gray-100 text-center md:text-left">Starnet</h1></center>
53-
</header>
44+
<div className="relative flex flex-1 z-10 squiggly-bg bg-background text-foreground h-[99vh] w-[99vw] shadow-lg"> {/* [m-3%] */}
45+
<aside className="hidden md:flex flex-col items-center justify-center w-16 bg-squiggly py-4 space-y-8 border-r border-gray-200">
46+
{menuItems.map((item, index) => (
47+
<MenuIcon
48+
key={index}
49+
Icon={item.icon}
50+
label={item.label}
51+
isActive={index === activeItem}
52+
onClick={() => router.push(item.route)}
53+
/>
54+
))}
55+
</aside>
5456

55-
<nav className="md:hidden bg-gray-50 border-b border-gray-200">
56-
<div className="flex justify-between items-center">
57-
{menuItems.map((item, index) => (
58-
<div
59-
key={index}
60-
className={`flex-1 p-2 flex flex-col items-center justify-center ${index === activeItem ? 'text-blue-500' : 'text-gray-600'}`}
61-
onClick={() => router.push(item.route)}
62-
>
63-
<item.icon className="w-6 h-6" />
64-
<span className="text-xs mt-1">{item.label.split(' ')[0]}</span>
65-
</div>
66-
))}
67-
</div>
68-
</nav>
57+
{/* Main Content */}
58+
<div className="flex-1 flex flex-col h-full">
59+
<header className="bg-squiggly border-b border-gray-200 p-4">
60+
<h1 className="text-xl font-bold text-gray-100 text-center md:text-left">Starnet</h1>
61+
</header>
6962

70-
<main className="flex-1 overflow-y-auto p-8 squiggly-bg">
71-
<div className="max-w-3xl mx-auto w-full">
72-
{children}
73-
</div>
74-
</main>
63+
<nav className="md:hidden bg-gray-50 border-b border-gray-200">
64+
<div className="flex justify-between items-center">
65+
{menuItems.map((item, index) => (
66+
<div
67+
key={index}
68+
className={`flex-1 p-2 flex flex-col items-center justify-center ${index === activeItem ? 'text-blue-500' : 'text-gray-600'}`}
69+
onClick={() => router.push(item.route)}
70+
>
71+
<item.icon className="w-6 h-6" />
72+
<span className="text-xs mt-1">{item.label.split(' ')[0]}</span>
73+
</div>
74+
))}
75+
</div>
76+
</nav>
77+
78+
<main className="flex-1 overflow-y-auto p-8">
79+
<div className="max-w-3xl mx-auto w-full">
80+
{children}
81+
</div>
82+
</main>
83+
</div>
7584
</div>
7685
</div>
7786
);

‎components/Layout/Toolbar.tsx

+73-39
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,92 @@
11
'use client';
22

3-
import { Globe, Rss, HelpCircle, Star, Building2Icon, Construction, CloudDrizzleIcon, HandMetalIcon } from "lucide-react";
3+
import { Building2Icon, Construction, CloudDrizzleIcon, HandMetalIcon, Settings } from "lucide-react";
44
import { usePathname } from "next/navigation";
55
import Link from "next/link";
66
import { useState } from "react";
7-
import FreeformUploadData from "../Projects/(classifications)/FreeForm";
87
import TutorialPopup from "@/content/Dialogue/helpButton";
98

109
const menuItems = [
1110
{ icon: Building2Icon, label: "Structures", href: "/" },
1211
{ icon: Construction, label: "Mining", href: "/#" },
1312
{ icon: CloudDrizzleIcon, label: "Weather", href: "/#" },
14-
{
15-
icon: HandMetalIcon,
16-
label: "Topography",
17-
href: "/#",
18-
},
13+
{ icon: HandMetalIcon, label: "Topography", href: "/#" },
1914
];
2015

2116
export default function VerticalToolbar() {
22-
const pathname = usePathname();
17+
const pathname = usePathname();
2318
const [hovered, setHovered] = useState<string | null>(null);
19+
const [isMenuOpen, setIsMenuOpen] = useState(false);
2420

2521
return (
26-
<div className="fixed left-4 top-1/4 transform -translate-y-1/2 z-50">
27-
<nav className="bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
28-
<ul className="flex flex-col space-y-4">
29-
{menuItems.map(({ icon: Icon, label, href }) => (
30-
<li key={label}>
31-
<Link legacyBehavior href={href}>
32-
<a
33-
onMouseEnter={() => setHovered(label)}
34-
onMouseLeave={() => setHovered(null)}
35-
className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300
36-
${pathname === href
37-
? "bg-white text-[#1E3A4C] shadow-md"
38-
: "text-white hover:bg-white/10"}`}
39-
aria-label={label}
40-
>
41-
<Icon className="w-6 h-6" />
42-
{(pathname === href || hovered === label) && (
43-
<span className="text-sm font-medium">{label}</span>
44-
)}
45-
</a>
46-
</Link>
47-
</li>
48-
))}
49-
</ul>
50-
<div className="mt-4">
51-
<center>
52-
<TutorialPopup />
53-
</center>
54-
</div>
55-
</nav>
22+
<div className="z-50">
23+
{/* Desktop Toolbar */}
24+
<div className="hidden md:block fixed left-4 top-1/4 transform -translate-y-1/2">
25+
<nav className="bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
26+
<ul className="flex flex-col space-y-4">
27+
{menuItems.map(({ icon: Icon, label, href }) => (
28+
<li key={label}>
29+
<Link legacyBehavior href={href}>
30+
<a
31+
onMouseEnter={() => setHovered(label)}
32+
onMouseLeave={() => setHovered(null)}
33+
className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300
34+
${pathname === href
35+
? "bg-white text-[#1E3A4C] shadow-md"
36+
: "text-white hover:bg-white/10"}`}
37+
aria-label={label}
38+
>
39+
<Icon className="w-6 h-6" />
40+
{(pathname === href || hovered === label) && (
41+
<span className="text-sm font-medium">{label}</span>
42+
)}
43+
</a>
44+
</Link>
45+
</li>
46+
))}
47+
</ul>
48+
<div className="mt-4">
49+
<center>
50+
<TutorialPopup />
51+
</center>
52+
</div>
53+
</nav>
54+
</div>
55+
56+
{/* Mobile Toolbar with Gear Icon */}
57+
<div className="block md:hidden fixed left-4 bottom-4">
58+
<button
59+
onClick={() => setIsMenuOpen(!isMenuOpen)}
60+
className="bg-[#1E3A4C] p-4 rounded-full shadow-lg text-white focus:outline-none"
61+
aria-label="Open menu"
62+
>
63+
<Settings className="w-6 h-6" />
64+
</button>
65+
66+
{isMenuOpen && (
67+
<div className="absolute left-0 bottom-16 bg-[#1E3A4C] rounded-xl shadow-lg backdrop-blur-md bg-opacity-80 p-2">
68+
<ul className="flex flex-col space-y-4">
69+
{menuItems.map(({ icon: Icon, label, href }) => (
70+
<li key={label}>
71+
<Link legacyBehavior href={href}>
72+
<a
73+
onClick={() => setIsMenuOpen(false)} // Close menu after selection
74+
className={`flex items-center space-x-2 px-4 py-3 rounded-full transition-all duration-300
75+
${pathname === href
76+
? "bg-white text-[#1E3A4C] shadow-md"
77+
: "text-white hover:bg-white/10"}`}
78+
aria-label={label}
79+
>
80+
<Icon className="w-6 h-6" />
81+
<span className="text-sm font-medium">{label}</span>
82+
</a>
83+
</Link>
84+
</li>
85+
))}
86+
</ul>
87+
</div>
88+
)}
89+
</div>
5690
</div>
5791
);
58-
}
92+
};

‎components/Missions/Pathway.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ export default function MissionPathway() {
277277
>
278278
Meteorologist
279279
</button>
280-
<CommunityMissions />
280+
{/* <CommunityMissions /> */}
281281
</div>
282282
) : (
283283
<div className="flex flex-col gap-8 max-w-screen-md mx-auto">

0 commit comments

Comments
 (0)