MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update navbar responsive

Browse Source
This commit is contained in:
Hafid Nur
2025-03-16 06:07:07 +07:00
parent c7b74bc9b6
commit a31166e3ff
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/organisms/navbar/navbar.tsx
+17 -11
View File
@@ -1,4 +1,5 @@
import { MenuOutlined } from '@ant-design/icons'; import { MenuOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, ReactElement, useState } from 'react'; import { FC, ReactElement, useState } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@@ -7,32 +8,37 @@ export const Navbar: FC = (): ReactElement => {
return ( return (
<header <header
className="bg-white shadow-sm rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky" className="bg-white shadow-lg rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky"
role="navigation" role="navigation"
> >
<div className="flex w-full items-center justify-between px-6 py-3"> <div className="flex w-full items-center justify-between p-4 md:px-[32px] md:py-[10px]">
<div className="flex items-center"> <div className="flex items-center">
<img <img
src="/logos/simple.svg" src="/logos/simple.svg"
alt="IMPHNEN Logo" alt="IMPHNEN Logo"
className="h-8 w-auto" className="h-8 md:h-[40px] lg:h-[52px] w-auto"
/> />
</div> </div>
<nav className="w-full flex justify-end"> <nav className="w-full flex justify-end">
<ul className="items-center gap-x-8 font-semibold hidden md:flex"> <ul className="items-center gap-x-8 font-semibold hidden md:flex">
<li> <li>
<Link <Button
to="#" size="md"
className="text-primary-500 hover:text-primary-600 transition-colors" variant="text"
className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
> >
Home <Link to="#">Home</Link>
</Link> </Button>
</li> </li>
<li> <li>
<Link to="#" className="text-gray-600 transition-colors"> <Button
Merch Gacha size="md"
</Link> variant="text"
className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
>
<Link to="#">Merch Gacha</Link>
</Button>
</li> </li>
</ul> </ul>
<button <button