updated burger to automatically close when selceting a site

This commit is contained in:
IM23a-cernik
2025-03-27 11:36:45 +01:00
parent 598d149d20
commit f3f9cbc97a
3 changed files with 33 additions and 30 deletions
+14 -7
View File
@@ -4,11 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="addded fuctioning burger with accordion for projects and fixed the header">
<list default="true" id="15d653a3-00a9-440e-a365-0d5dba6a77a9" name="Changes" comment="made the title change based on page">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/layout.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/layout.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/app/me/page.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/app/me/page.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/mode-toggle.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/mode-toggle.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/burger.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/burger.jsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -116,7 +114,7 @@
<workItem from="1742463482019" duration="601000" />
<workItem from="1742464379879" duration="293000" />
<workItem from="1742464681826" duration="2750000" />
<workItem from="1743060154301" duration="10034000" />
<workItem from="1743060154301" duration="10850000" />
</task>
<task id="LOCAL-00001" summary="created a base layout">
<option name="closed" value="true" />
@@ -150,7 +148,15 @@
<option name="project" value="LOCAL" />
<updated>1743068701470</updated>
</task>
<option name="localTasksCounter" value="5" />
<task id="LOCAL-00005" summary="made the title change based on page">
<option name="closed" value="true" />
<created>1743071161882</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1743071161882</updated>
</task>
<option name="localTasksCounter" value="6" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -160,6 +166,7 @@
<MESSAGE value="created a base layout" />
<MESSAGE value="added dark/light mode toggle" />
<MESSAGE value="addded fuctioning burger with accordion for projects and fixed the header" />
<option name="LAST_COMMIT_MESSAGE" value="addded fuctioning burger with accordion for projects and fixed the header" />
<MESSAGE value="made the title change based on page" />
<option name="LAST_COMMIT_MESSAGE" value="made the title change based on page" />
</component>
</project>
-18
View File
@@ -1,18 +0,0 @@
import {Accordion} from "radix-ui";
import Link from "next/link";
export default function ProjectAccordion() {
return (
<Accordion.Root className="" type={"multiple"}>
<Accordion.Item value={"item-1"}>
<Accordion.Trigger>Projects</Accordion.Trigger>
<Accordion.Content className="flex justify-center flex-col p-2">
<Link className="text-lg p-2" href="/projects">All Projects</Link>
<Link className="text-lg p-2" href="/projects/porsche">Wirtschaftsgeschichte von Porsche</Link>
<Link className="text-lg p-2" href="/projects/nuclear-age">Nuclear Age Mod</Link>
<Link className="text-lg p-2" href="/projects/roboxers">Roboxers</Link>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
)
}
+19 -5
View File
@@ -1,6 +1,6 @@
import React, {useState} from 'react';
import Link from "next/link";
import ProjectAccordion from "@/components/accordion";
import {Accordion} from "radix-ui";
export default function Burger() {
const [isOpen, setIsOpen] = useState(false);
@@ -20,19 +20,33 @@ export default function Burger() {
}}>
<ul className={"text-2xl list-none"}>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/"}>Home</Link>
<Link href={"/"} onClick={() => setIsOpen(!isOpen)}>Home</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<ProjectAccordion/>
<Accordion.Root className="" type={"multiple"}>
<Accordion.Item value={"item-1"}>
<Accordion.Trigger>Projects</Accordion.Trigger>
<Accordion.Content className="flex justify-center flex-col p-2">
<Link className="text-lg p-2" href="/projects"
onClick={() => setIsOpen(!isOpen)}>All Projects</Link>
<Link className="text-lg p-2" href="/projects/porsche"
onClick={() => setIsOpen(!isOpen)}>Wirtschaftsgeschichte von Porsche</Link>
<Link className="text-lg p-2" href="/projects/nuclear-age"
onClick={() => setIsOpen(!isOpen)}>Nuclear Age Mod</Link>
<Link className="text-lg p-2" href="/projects/roboxers"
onClick={() => setIsOpen(!isOpen)}>Roboxers</Link>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/me"}>About-Me</Link>
<Link href={"/me"} onClick={() => setIsOpen(!isOpen)}>About-Me</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"https://github.com/KrisHD1337?tab=repositories"} target={"_blank"}>GitHub</Link>
</li>
<li className={"p-3 border-b-emerald-600 border-2 dark:border-b-emerald-400"}>
<Link href={"/contact"}>Contact</Link>
<Link href={"/contact"} onClick={() => setIsOpen(!isOpen)}>Contact</Link>
</li>
</ul>
</div>