v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minor changes

Browse source
This commit is contained in:
Dex404 2024-04-16 09:41:19 +00:00
parent 692d73f97a
commit f856876713
2 changed files with 17 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/Navbar/Navbar.tsx
View file

@ -49,13 +49,13 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
showBackground ? "backdrop-blur" : "bg-transparent" showBackground ? "backdrop-blur" : "bg-transparent"
} fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`} } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
> >
<section className="MOBILE-MENU flex hidden" style={mobileNavStyle}> <section className="MOBILE-MENU flex hidden backdrop-blur-lg" style={mobileNavStyle}>
<div> <div>
{" "} {" "}
<div className="CROSS-ICON absolute right-0 top-0 px-8 py-8"> <div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
<button onClick={() => setIsNavOpen(!isNavOpen)}> <button onClick={() => setIsNavOpen(!isNavOpen)}>
<svg <svg
className="h-8 w-8 text-gray-600" className="h-8 w-8 text-white"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -68,24 +68,24 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
</svg> </svg>
</button> </button>
</div> </div>
<ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white backdrop-blur"> <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white">
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/about">Home</a> <a href="#">Home</a>
</li> </li>
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/portfolio">Services</a> <a href="#">Services</a>
</li> </li>
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Portfolio</a> <a href="#">Portfolio</a>
</li> </li>
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">About</a> <a href="#">About</a>
</li> </li>
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Sign In</a> <a href="#">Sign In</a>
</li> </li>
<li className="my-2 border-b border-gray-400 uppercase"> <li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Sign Up</a> <a href="#">Sign Up</a>
</li> </li>
</ul> </ul>
</div> </div>

21
tailwind.config.js
View file

@ -2,9 +2,7 @@
const { pick, omit } = require("lodash") const { pick, omit } = require("lodash")
const colors = require("tailwindcss/colors") const colors = require("tailwindcss/colors")
const defaultTheme = require("tailwindcss/defaultTheme") const defaultTheme = require("tailwindcss/defaultTheme")
const { const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette")
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: "class", darkMode: "class",
@ -19,7 +17,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
boxShadow: { boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 200, 0.3)', "3xl": "0 35px 60px -15px rgba(0, 0, 200, 0.3)",
}, },
colors: { colors: {
black: "#0f172a", black: "#0f172a",
@ -95,6 +93,8 @@ module.exports = {
}, },
animation: { animation: {
["infinite-slider"]: "infiniteSlider 20s linear infinite", ["infinite-slider"]: "infiniteSlider 20s linear infinite",
openmenu: "openmenu 1s ease-in",
closemenu: "closemenu 1s ease-in",
}, },
keyframes: { keyframes: {
infiniteSlider: { infiniteSlider: {
@ -106,22 +106,17 @@ module.exports = {
}, },
}, },
}, },
plugins: [ plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],
require('@codaworks/react-glow/tailwind'),
addVariablesForColors
],
future: { future: {
hoverOnlyWhenSupported: true, hoverOnlyWhenSupported: true,
}, },
} }
function addVariablesForColors({ addBase, theme }) { function addVariablesForColors({ addBase, theme }) {
let allColors = flattenColorPalette(theme("colors")); let allColors = flattenColorPalette(theme("colors"))
let newVars = Object.fromEntries( let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]))
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
addBase({ addBase({
":root": newVars, ":root": newVars,
}); })
} }