Skip to content

Commit

Permalink
developed responsive header
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarunsoftprodigy
tarunsoftprodigy committed Oct 22, 2024
1 parent e559e2b commit d0b010c
Show file tree
Hide file tree
Showing 8 changed files with 434 additions and 402 deletions.
130 changes: 67 additions & 63 deletions mirror-2/app/discover/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,74 @@
import React from "react";
import { listenNowAlbums, madeForYouAlbums } from "../home/data/albums";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import Image from "next/image";
import { Sidebar } from "../home/components/sidebar";
import { playlists } from "../home/data/playlists";
import { Separator } from "@/components/ui/separator";
import { Metadata } from "next";
import React from 'react'
import { listenNowAlbums, madeForYouAlbums } from '../home/data/albums'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import Image from 'next/image'
import { Sidebar } from '../home/components/sidebar'
import { playlists } from '../home/data/playlists'
import { Separator } from '@/components/ui/separator'
import { Metadata } from 'next'
import Header from '@/components/ui/header'

export const metadata: Metadata = {
title: "Discover",
description: "",
};
title: 'Discover',
description: ''
}
const Discover = () => {
return (
<div className="bg-background flex">
<Sidebar
playlists={playlists}
style={{
width: "25%",
}}
/>
<div className="py-6 px-6 w-full">
<div className="space-y-1">
<h2 className="text-3xl font-semibold tracking-tight">Discover</h2>
</div>
<Separator className="my-4" />
{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>
))}
<>
<Header />
<div className="bg-background flex">
<Sidebar
playlists={playlists}
style={{
width: '25%'
}}
/>
<div className="py-6 px-6 w-full">
<div className="space-y-1">
<h2 className="text-3xl font-semibold tracking-tight">Discover</h2>
</div>
) : (
<h3>No Item found</h3>
)}
<Separator className="my-4" />
{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>
</div>
);
};
</>
)
}

export default Discover;
export default Discover
117 changes: 1 addition & 116 deletions mirror-2/app/home/components/sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,15 @@
'use client'
import { cn } from '@/lib/utils'
import { useEffect, useState } from 'react'

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,
DialogContent,
DialogOverlay,
DialogPortal,
DialogTrigger
} from '@/components/ui/dialog'
import './sidebar.css'
import { Axis3D, Gamepad2 } from 'lucide-react'

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

const SidebarMenuForSmallScreen = () => {
return (
<>
<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
</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"
>
{' '}
<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>
</>
)
}

export function Sidebar({ className, style }: SidebarProps) {
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
const [showSmallSideBar, setShowSmallSidebar] = useState(false)

const handleResize = () => setWindowWidth(window.innerWidth)

useEffect(() => {
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])

useEffect(() => {
if (windowWidth > 1024) {
setShowSmallSidebar(false)
}
}, [windowWidth])

return (
<>
<div
Expand Down Expand Up @@ -155,48 +78,10 @@ export function Sidebar({ className, style }: SidebarProps) {
</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>
{/* =========Sidebar button for smaller screens less than 1024px======= */}
<div className="space-y-4 py-4 mt-2 sm:block md:block lg:hidden sidebarMenuMobile">
<Dialog open={showSmallSideBar} onOpenChange={setShowSmallSidebar}>
<DialogTrigger
onClick={() => setShowSmallSidebar(true)}
className="p-2"
>
<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>{' '}
</DialogTrigger>
<DialogPortal>
<DialogOverlay className="sidebar-overlay">
<DialogContent className="sidebar-content pt-14">
<SidebarMenuForSmallScreen />
</DialogContent>
</DialogOverlay>
</DialogPortal>
</Dialog>
</div>
</>
)
}
19 changes: 2 additions & 17 deletions mirror-2/app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { appDescription, appName } from '@/lib/theme-service'
import AccountDropdownMenu from '@/components/ui/account-dropdown-menu'
import { Card, CardContent, CardFooter } from '@/components/ui/card'
import { useGetSpacesByUserIdQuery } from '@/state/api/spaces'
import Header from '@/components/ui/header'

const dummyImg =
'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80'
Expand All @@ -17,22 +18,7 @@ export default function Home() {

return (
<>
<div className="md:hidden hidden">
<Image
src="/examples/music-light.png"
width={1280}
height={1114}
alt="Music"
className="block dark:hidden"
/>
<Image
src="/examples/music-dark.png"
width={1280}
height={1114}
alt="Music"
className="hidden dark:block"
/>
</div>
<Header />
<div className="bg-background flex">
<Sidebar
playlists={playlists}
Expand All @@ -51,7 +37,6 @@ export default function Home() {
Published Spaces from other builders.
</p>
</div>
<AccountDropdownMenu />
</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">
Expand Down
Loading

0 comments on commit d0b010c

Please sign in to comment.