vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

tablet navigation: removed code redundancy & fixed alignment (#1241)

Browse Source 
* minor design changes to tablet navigation

* added white icon logo

* reduced code redundancy in tablet view & fixed alignment
This commit is contained in:
Peer Richelsen
2021-12-02 20:52:38 +00:00
committed by GitHub
parent de3c4aa75a
commit 2b51cd9c8d
3 changed files with 27 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Shell.tsx
+14 -46
View File
@@ -196,60 +196,22 @@ export default function Shell(props: {
</div>
<div className="flex h-screen overflow-hidden bg-gray-100">
<div className="hidden lg:flex lg:flex-shrink-0">
<div className="hidden md:flex lg:flex-shrink-0">
<div className="flex flex-col w-14 lg:w-56">
<div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
<div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
<div className="flex flex-col flex-1 pt-3 lg:pt-5 pb-4 overflow-y-auto">
<Link href="/event-types">
<a className="px-4">
<a className="px-4 md:hidden lg:inline">
<Logo small />
</a>
</Link>
<nav className="flex-1 px-2 mt-5 space-y-1 bg-white">
{navigation.map((item) => (
<Link key={item.name} href={item.href}>
<a
className={classNames(
item.current
? "bg-neutral-100 text-neutral-900"
: "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
"group flex items-center px-2 py-2 text-sm font-medium rounded-sm"
)}>
<item.icon
className={classNames(
item.current
? "text-neutral-500"
: "text-neutral-400 group-hover:text-neutral-500",
"mr-3 flex-shrink-0 h-5 w-5"
)}
aria-hidden="true"
/>
{item.name}
</a>
</Link>
))}
</nav>
</div>
<div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
<UserDropdown />
</div>
</div>
</div>
</div>
<div className="hidden md:flex md:flex-shrink-0 lg:hidden">
<div className="flex flex-col w-14 lg:w-56">
<div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
<div className="flex flex-col flex-1 pb-4 overflow-y-auto">
{/* logo icon for tablet */}
<Link href="/event-types">
<a className="px-2 my-3">
<h1 className="inline">
<strong>
<img className="w-auto h-9" alt="Cal" title="Cal" src="/cal-com-icon.svg" />
</strong>
</h1>
<a className="md:inline lg:hidden">
<Logo small icon />
</a>
</Link>
<nav className="flex-1 px-2 space-y-1 bg-white">
<nav className="flex-1 px-2 mt-2 lg:mt-5 space-y-1 bg-white">
{navigation.map((item) => (
<Link key={item.name} href={item.href}>
<a
@@ -268,13 +230,19 @@ export default function Shell(props: {
)}
aria-hidden="true"
/>
<span className="hidden lg:inline">{item.name}</span>
</a>
</Link>
))}
</nav>
</div>
<div className="p-2 pt-2 pr-2 m-2 rounded-sm hover:bg-gray-100">
<UserDropdown small />
<span className="hidden lg:inline">
<UserDropdown />
</span>
<span className="hidden md:inline lg:hidden">
<UserDropdown small />
</span>
</div>
</div>
</div>