Skip to content

Commit

Permalink
made screen responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarunsoftprodigy
tarunsoftprodigy committed Oct 17, 2024
1 parent 97f11ad commit cfeb3a8
Show file tree
Hide file tree
Showing 9 changed files with 352 additions and 214 deletions.
76 changes: 39 additions & 37 deletions mirror-2/app/discover/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,50 +16,52 @@ const Discover = () => {
<div className="bg-background flex">
<Sidebar
playlists={playlists}
className="hidden lg:block w "
style={{
width: "25%",
}}
/>
<div className="py-6 px-6 w-full">
<div className="flex items-center justify-between">
<div className="space-y-1">
<h2 className="text-3xl font-semibold tracking-tight">Discover</h2>
</div>
<div className="space-y-1">
<h2 className="text-3xl font-semibold tracking-tight">Discover</h2>
</div>
<Separator className="my-4" />
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{listenNowAlbums?.map((album) => (
<Card
className="rounded-none"
style={{
borderBottomLeftRadius: "0.75rem",
borderBottomRightRadius: "0.75rem",
}}
>
<CardContent className="p-0">
<Image
src={album?.cover}
width={250}
height={250}
alt={album?.name}
style={{
height: "250px",
width: "100%",
}}
/>
</CardContent>
<CardFooter>
<div className="space-y-1 text-lg mt-4">
<h3 className="font-medium leading-none">{album.name}</h3>
<p className="text-xs text-muted-foreground">
{album.artist}
</p>
</div>
</CardFooter>
</Card>
))}
</div>
{listenNowAlbums.length ? (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{listenNowAlbums?.map((album) => (
<Card
key={album?.name}
className="rounded-none"
style={{
borderBottomLeftRadius: "0.75rem",
borderBottomRightRadius: "0.75rem",
}}
>
<CardContent className="p-0">
<Image
src={album?.cover}
width={250}
height={250}
alt={album?.name}
style={{
height: "250px",
width: "100%",
}}
/>
</CardContent>
<CardFooter>
<div className="space-y-1 text-lg mt-4">
<h3 className="font-medium leading-none">{album.name}</h3>
<p className="text-xs text-muted-foreground">
{album.artist}
</p>
</div>
</CardFooter>
</Card>
))}
</div>
) : (
<h3>No Item found</h3>
)}
</div>
</div>
);
Expand Down
12 changes: 12 additions & 0 deletions mirror-2/app/home/components/sidebar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.sidebar-overlay {
--tw-backdrop-blur: blur(16px) !important;
backdrop-filter: blur(16px) !important;
background-color: rgba(0, 0, 0, 0.8) !important;
opacity: 0.7;
}

.sidebar-content {
height: 100vh !important;
background-color: transparent !important;
max-width: 100%;
}
220 changes: 163 additions & 57 deletions mirror-2/app/home/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,187 @@ import { Playlist } from "../data/playlists";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Axis3D, Gamepad2, PlusCircleIcon } from "lucide-react";
import {
Dialog,
DialogClose,
DialogContent,
DialogOverlay,
DialogPortal,
DialogTrigger,
} from "@/components/ui/dialog";
import "./sidebar.css";

interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
playlists: Playlist[];
}

export function Sidebar({ className, playlists, style }: SidebarProps) {
const SidebarMenuForSmallScreen = () => {
return (
<div className={cn("pb-12", className)} style={{ ...style }}>
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-2xl font-semibold tracking-tight">
<>
<div className="space-y-3">
<Button variant="secondary" className="w-full justify-start" asChild>
<Link href="/home" className="w-full p-3">
<Axis3D className="mr-2" />
Home
</Link>
</Button>
<Button variant="secondary" className="w-full justify-start" asChild>
<Link href="/discover" className="w-full p-3">
<Axis3D className="mr-2" />
Discover
</h2>
<div className="space-y-1">
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/home" className="w-full p-3">
<Axis3D className="mr-2" />
Home
</Link>
</Button>
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/discover" className="w-full p-3">
<Axis3D className="mr-2" />
Discover
</Link>
</Button>
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/my/spaces" className="w-full p-3">
<Axis3D className="mr-2" />
My Spaces
</Link>
</Button>
<Button
variant="secondary"
className="w-full justify-start"
asChild
</Link>
</Button>
<Button variant="secondary" className="w-full justify-start" asChild>
<Link href="/my/spaces" className="w-full p-3">
<Axis3D className="mr-2" />
My Spaces
</Link>
</Button>
<Button variant="secondary" className="w-full justify-start" asChild>
<Link href="/my/assets" className="w-full p-3">
<Axis3D className="mr-2" />
My Assets
</Link>
</Button>
{process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && (
<Button variant="ghost" className="w-full justify-start" asChild>
<Link
href={process.env.NEXT_PUBLIC_DISCORD_INVITE_URL}
target="_blank"
>
<Link href="/my/assets" className="w-full p-3">
<Axis3D className="mr-2" />
My Assets
{" "}
<Gamepad2 className="mr-2" />
Chat on Discord
</Link>
</Button>
)}
{/* <Button className="w-full" asChild>
<Link href="/space/new" className="w-full p-3">
<PlusCircleIcon className="mr-2" />
Create a Space
</Link>
</Button>
{process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && (
<Button variant="ghost" className="w-full justify-start" asChild>
<Link
href={process.env.NEXT_PUBLIC_DISCORD_INVITE_URL}
target="_blank"
>
{" "}
<Gamepad2 className="mr-2" />
Chat on Discord
</Button> */}
</div>
</>
);
};

export function Sidebar({ className, playlists, style }: SidebarProps) {
return (
<>
<div
className={cn("pb-12 hidden sm:hidden md:hidden lg:block", className)}
style={{ ...style }}
>
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-2xl font-semibold tracking-tight">
Discover
</h2>
<div className="space-y-2">
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/home" className="w-full p-3">
<Axis3D className="mr-2" />
Home
</Link>
</Button>
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/discover" className="w-full p-3">
<Axis3D className="mr-2" />
Discover
</Link>
</Button>
)}
{/* <Button className="w-full" asChild>
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/my/spaces" className="w-full p-3">
<Axis3D className="mr-2" />
My Spaces
</Link>
</Button>
<Button
variant="secondary"
className="w-full justify-start"
asChild
>
<Link href="/my/assets" className="w-full p-3">
<Axis3D className="mr-2" />
My Assets
</Link>
</Button>
{process.env.NEXT_PUBLIC_DISCORD_INVITE_URL && (
<Button
variant="ghost"
className="w-full justify-start"
asChild
>
<Link
href={process.env.NEXT_PUBLIC_DISCORD_INVITE_URL}
target="_blank"
>
{" "}
<Gamepad2 className="mr-2" />
Chat on Discord
</Link>
</Button>
)}
{/* <Button className="w-full" asChild>
<Link href="/space/new" className="w-full p-3">
<PlusCircleIcon className="mr-2" />
Create a Space
</Link>
</Button> */}
</div>
</div>
</div>
</div>
</div>
{/* =========Sidebar button for smaller screens less than 1024px======= */}
<div className="space-y-4 py-4 mt-2 block sm:block md:block lg:hidden">
<Dialog>
<DialogTrigger>
<Button
type="button"
className="
flex justify-center max-h-[3.125rem] items-center whitespace-nowrap p-3 bg-blueMirror rounded-xl font-primary font-semibold border border-transparent text-white shadow-[0_2px_40px_0px_rgba(57,121,255,0.4)] min-w-fit mobile:text-xs bg-transparent hover:bg-transparent focus:ring-0 focus:ring-offset-0 focus:ring-transparent lg:hidden ml-1
hover:bg-blue-700 hover:ease-in duration-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
className="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 8h16M4 16h16"
></path>
</svg>{" "}
</Button>
</DialogTrigger>
<DialogPortal>
<DialogOverlay className="sidebar-overlay">
<DialogContent className="sidebar-content pt-14">
<SidebarMenuForSmallScreen />
</DialogContent>
</DialogOverlay>
</DialogPortal>
</Dialog>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion mirror-2/app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export default function Home() {
<div className="bg-background flex">
<Sidebar
playlists={playlists}
className="hidden lg:block w "
style={{
width: "25%",
}}
Expand All @@ -58,6 +57,7 @@ export default function Home() {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{madeForYouAlbums.slice(0, 4).map((album) => (
<Card
key={album?.name}
className="rounded-none"
style={{
borderBottomLeftRadius: "0.75rem",
Expand Down
11 changes: 11 additions & 0 deletions mirror-2/app/my/account/page.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@media screen and (max-width: 730px) {
.setting-container {
max-width: 95% !important;
}
}

@media screen and (max-width: 1024px) {
.setting-container {
max-width: 75% !important;
}
}
Loading

0 comments on commit cfeb3a8

Please sign in to comment.