change css
This commit is contained in:
Karol Wypchlo
parent
da116de911
commit
dde2233d16
|
|
@ -1,4 +1,5 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import config from "../../src/config";
|
import config from "../../src/config";
|
||||||
|
|
@ -8,6 +9,7 @@ const signOutUrl = `${config.kratos.browser}/self-service/browser/flows/logout`;
|
||||||
export default function Layout({ title, children }) {
|
export default function Layout({ title, children }) {
|
||||||
const [menuOpen, openMenu] = useState(false);
|
const [menuOpen, openMenu] = useState(false);
|
||||||
const [avatarDropdownOpen, openAvatarDropdown] = useState(false);
|
const [avatarDropdownOpen, openAvatarDropdown] = useState(false);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -29,17 +31,14 @@ export default function Layout({ title, children }) {
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
className="cls-1"
|
|
||||||
d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z"
|
d="M 116.388 139.371 C 92.969 148.816 66.759 134.5 62.048 109.691 L 46.308 98.821 C 43.843 141.32 88.308 170.55 126.346 151.435 C 130.805 149.195 134.94 146.361 138.638 143.011 L 138.698 143.011 C 141.248 140.637 140.685 136.456 137.598 134.841 L 19.888 72.671 Z"
|
||||||
style={{ fill: "rgb(88, 181, 96)" }}
|
style={{ fill: "rgb(88, 181, 96)" }}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
className="cls-1"
|
|
||||||
d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z"
|
d="M 149.398 127.121 L 149.398 127.021 C 150.067 124.651 148.83 122.161 146.538 121.261 L 67.478 90.011 L 142.478 130.011 C 145.178 131.489 148.552 130.08 149.398 127.121 Z"
|
||||||
style={{ fill: "rgb(88, 181, 96)" }}
|
style={{ fill: "rgb(88, 181, 96)" }}
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
className="cls-1"
|
|
||||||
d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z"
|
d="M 151.848 109.801 C 152.508 94.561 150.578 79.801 141.228 67.721 C 130.128 53.411 111.498 47.801 96.588 49.081 C 95.428 49.181 94.268 49.351 93.108 49.451 C 77.448 50.901 62.598 59.941 53.728 75.301 C 52.968 76.621 52.278 77.971 51.638 79.301 C 51.238 79.841 50.838 80.371 50.458 80.931 L 63.838 88.061 C 64.463 86.395 65.194 84.772 66.028 83.201 C 80.584 55.935 119.197 54.651 135.532 80.889 C 140.199 88.386 142.264 97.212 141.408 106.001 L 91.518 92.621 L 145.258 113.861 C 148.274 115.053 151.585 112.994 151.848 109.761 Z"
|
||||||
style={{ fill: "rgb(88, 181, 96)" }}
|
style={{ fill: "rgb(88, 181, 96)" }}
|
||||||
/>
|
/>
|
||||||
|
|
@ -49,17 +48,35 @@ export default function Layout({ title, children }) {
|
||||||
<div className="ml-10 flex items-baseline space-x-4">
|
<div className="ml-10 flex items-baseline space-x-4">
|
||||||
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
<a
|
||||||
|
className={`${
|
||||||
|
router.pathname === "/"
|
||||||
|
? "bg-gray-900 text-white"
|
||||||
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
|
} px-3 py-2 rounded-md text-sm font-medium`}
|
||||||
|
>
|
||||||
Dashboard
|
Dashboard
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/uploads">
|
<Link href="/uploads">
|
||||||
<a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
<a
|
||||||
|
className={`${
|
||||||
|
router.pathname === "/uploads"
|
||||||
|
? "bg-gray-900 text-white"
|
||||||
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
|
} px-3 py-2 rounded-md text-sm font-medium`}
|
||||||
|
>
|
||||||
Your uploads
|
Your uploads
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/downloads">
|
<Link href="/downloads">
|
||||||
<a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
<a
|
||||||
|
className={`${
|
||||||
|
router.pathname === "/downloads"
|
||||||
|
? "bg-gray-900 text-white"
|
||||||
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
|
} px-3 py-2 rounded-md text-sm font-medium`}
|
||||||
|
>
|
||||||
Your downloads
|
Your downloads
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -161,21 +178,39 @@ export default function Layout({ title, children }) {
|
||||||
<div className={`${menuOpen ? "block" : "hidden"} border-b border-gray-700 md:hidden`}>
|
<div className={`${menuOpen ? "block" : "hidden"} border-b border-gray-700 md:hidden`}>
|
||||||
<div className="px-2 py-3 space-y-1 sm:px-3">
|
<div className="px-2 py-3 space-y-1 sm:px-3">
|
||||||
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
||||||
<a href="#" className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
|
<Link href="/">
|
||||||
Dashboard
|
<a
|
||||||
</a>
|
className={`${
|
||||||
<a
|
router.pathname === "/"
|
||||||
href="#"
|
? "bg-gray-900 text-white"
|
||||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
>
|
} block px-3 py-2 rounded-md text-base font-medium`}
|
||||||
Your uploads (coming soon)
|
>
|
||||||
</a>
|
Dashboard
|
||||||
<a
|
</a>
|
||||||
href="#"
|
</Link>
|
||||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
<Link href="/uploads">
|
||||||
>
|
<a
|
||||||
Your downloads (coming soon)
|
className={`${
|
||||||
</a>
|
router.pathname === "/uploads"
|
||||||
|
? "bg-gray-900 text-white"
|
||||||
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
|
} block px-3 py-2 rounded-md text-base font-medium`}
|
||||||
|
>
|
||||||
|
Your uploads
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="/downloads">
|
||||||
|
<a
|
||||||
|
className={`${
|
||||||
|
router.pathname === "/downloads"
|
||||||
|
? "bg-gray-900 text-white"
|
||||||
|
: "text-gray-300 hover:bg-gray-700 hover:text-white"
|
||||||
|
} block px-3 py-2 rounded-md text-base font-medium`}
|
||||||
|
>
|
||||||
|
Your downloads
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-4 pb-3 border-t border-gray-700">
|
<div className="pt-4 pb-3 border-t border-gray-700">
|
||||||
<div className="flex items-center px-5">
|
<div className="flex items-center px-5">
|
||||||
|
|
|
||||||
Reference in New Issue