Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#FEAT-017: Add explore more section to mobile sidebar #80

Merged
merged 4 commits into from
Nov 13, 2024
Merged

#FEAT-017: Add explore more section to mobile sidebar #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6eac481
Fixbug
Pet3r1512 Nov 13, 2024
0b39f4e
Feat: add explore more section and fix accordion open multiple items …
Pet3r1512 Nov 13, 2024
388df53
Chore: remove searchbar component
Pet3r1512 Nov 13, 2024
b0d3211
Test: update snapshot
Pet3r1512 Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 0 additions & 69 deletions src/components/Layouts/Header/SearchBar/_index.tsx
View file
Open in desktop

This file was deleted.

24 changes: 17 additions & 7 deletions src/components/Layouts/Header/Sidebar/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,16 @@ const navlinks = [
},
],
},
{
name: "Explore More",
index: "item-3",
sublinks: [
{
name: "Templates Features",
href: "/features",
},
],
},
];

export default function Sidebar() {
Expand All @@ -82,10 +92,10 @@ export default function Sidebar() {
<DrawerContent className="lg:hidden h-[100dvh] w-2/3 flex flex-col p-5 gap-y-10">
<Logo className="h-auto w-2/3 md:w-1/2" />
<aside className="flex flex-col gap-y-2.5 px-2 md:px-5 flex-1">
{navlinks.map((nav, index) => {
return (
<Accordion key={index} type="single" collapsible>
<AccordionItem value={nav.index}>
<Accordion type="single" collapsible className="w-full">
{navlinks.map((nav, index) => {
return (
<AccordionItem key={index} value={nav.index}>
<AccordionTrigger className="font-bold text-lg">
{nav.name}
</AccordionTrigger>
Expand All @@ -99,9 +109,9 @@ export default function Sidebar() {
);
})}
</AccordionItem>
</Accordion>
);
})}
);
})}
</Accordion>
<Link
className="py-4"
onClick={() => handleNavClick()}
Expand Down
88 changes: 0 additions & 88 deletions src/components/Layouts/Header/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,50 +175,6 @@ exports[`Render Header > Should match snapshot 1`] = `
/>
</nav>
</div>
<div
class="flex items-center gap-x-5 lg:hidden w-1/3 justify-end"
>
<button
aria-controls="radix-:r7:"
aria-expanded="false"
aria-haspopup="dialog"
class="hidden"
data-state="closed"
data-testid="search-trigger"
type="button"
>
<div
class="flex items-center py-2 px-4 rounded-2xl shadow-2xl lg:dark:bg-gray-dark lg:bg-gray-light lg:dark:text-gray-light text-gray lg:w-48"
>
<svg
class="lucide lucide-search lg:mr-2"
fill="none"
height="20"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<span
class="hidden lg:block"
>
Search
</span>
</div>
</button>
</div>
<div
class="lg:flex items-center gap-x-5 hidden"
>
Expand Down Expand Up @@ -494,50 +450,6 @@ exports[`Render Header > Should match snapshot 1`] = `
/>
</nav>
</div>
<div
class="flex items-center gap-x-5 lg:hidden w-1/3 justify-end"
>
<button
aria-controls="radix-:r7:"
aria-expanded="false"
aria-haspopup="dialog"
class="hidden"
data-state="closed"
data-testid="search-trigger"
type="button"
>
<div
class="flex items-center py-2 px-4 rounded-2xl shadow-2xl lg:dark:bg-gray-dark lg:bg-gray-light lg:dark:text-gray-light text-gray lg:w-48"
>
<svg
class="lucide lucide-search lg:mr-2"
fill="none"
height="20"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<span
class="hidden lg:block"
>
Search
</span>
</div>
</button>
</div>
<div
class="lg:flex items-center gap-x-5 hidden"
>
Expand Down
4 changes: 0 additions & 4 deletions src/components/Layouts/Header/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Github from "./Github";
import Logo from "./Logo";
import SearchBar from "./SearchBar/_index";
import ThemeToggle from "../ThemeToggle";
import Sidebar from "./Sidebar/_index";
import { Navbar } from "./Navbar";
Expand All @@ -16,9 +15,6 @@ export default function Header() {
<Logo />
<Navbar />
</div>
<div className="flex items-center gap-x-5 lg:hidden w-1/3 justify-end">
<SearchBar />
</div>
<div className="lg:flex items-center gap-x-5 hidden">
<Link
href="https://github.com/Pet3r1512/DevIniter/issues/new?labels=enhancement&template=feature-request---.md"
Expand Down
7 changes: 5 additions & 2 deletions src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
title: string | React.ReactNode;
}
>(({ className, children, title, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
Expand All @@ -40,6 +42,7 @@ const DialogContent = React.forwardRef<
)}
{...props}
>
<DialogTitle className="sr-only">{title}</DialogTitle>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400">
<Cross2Icon className="h-4 w-4" />
Expand Down