forked from crowetic/commerce
navbar
This commit is contained in:
Belen Curcio
parent
381b19e820
commit
54cf948f56
@ -1,12 +1,7 @@
|
||||
.root {
|
||||
@apply border-black border-b;
|
||||
@apply;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
@apply absolute transform -translate-x-1/2;
|
||||
left: 50%;
|
||||
@apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b;
|
||||
}
|
||||
|
||||
@ -13,15 +13,15 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<Container className={s.container}>
|
||||
<div className="flex flex-row h-full content-center">
|
||||
<Logo />
|
||||
<div className="flex flex-row h-full content-center flex-1">
|
||||
<Searchbar />
|
||||
<nav className="flex flex-row items-center px-3">
|
||||
All Clothes Accesories
|
||||
<a className="pr-4">All</a>
|
||||
<a className="pr-4">Clothes</a>
|
||||
<a>Accesories</a>
|
||||
</nav>
|
||||
</div>
|
||||
<span className={s.logoContainer}>
|
||||
<Logo />
|
||||
</span>
|
||||
<nav>
|
||||
<Avatar />
|
||||
</nav>
|
||||
|
||||
@ -1,3 +1,25 @@
|
||||
.root {
|
||||
@apply px-4 border-black border-r h-full flex items-center;
|
||||
@apply px-4 flex items-center;
|
||||
}
|
||||
|
||||
.container {
|
||||
@apply relative rounded-lg flex flex-row text-sm items-center;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
@apply outline-none shadow-outline-gray;
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
@apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
@ -12,13 +12,18 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="flex-1 flex justify-between px-2">
|
||||
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
/>
|
||||
</svg>
|
||||
<div className={s.container}>
|
||||
<input className={s.input} placeholder="Search for products..." />
|
||||
<div className={s.iconContainer}>
|
||||
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/ui": "^0.6.2",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"classnames": "^2.2.6",
|
||||
"next": "^9.5.4-canary.20",
|
||||
|
||||
@ -9,7 +9,7 @@ export default function Home() {
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Navbar />
|
||||
<Container className="px-4 py-5 border-black border-l border-r h-screen">
|
||||
<Container className="px-4 py-5 h-screen">
|
||||
<Button>Click Me!</Button>
|
||||
</Container>
|
||||
<Footer></Footer>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import "./font.css";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
:root {
|
||||
/* Spacing variables */
|
||||
@ -190,6 +191,4 @@ a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind screens;
|
||||
|
||||
@ -15,5 +15,5 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
plugins: [require("@tailwindcss/ui")],
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.root {
|
||||
@apply max-w-6xl mx-auto px-2;
|
||||
@apply mx-auto px-2;
|
||||
display: inherit;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
36
yarn.lock
36
yarn.lock
@ -1060,6 +1060,30 @@
|
||||
dependencies:
|
||||
mkdirp "^1.0.4"
|
||||
|
||||
"@tailwindcss/custom-forms@^0.2.1":
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
|
||||
integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
|
||||
dependencies:
|
||||
lodash "^4.17.11"
|
||||
mini-svg-data-uri "^1.0.3"
|
||||
traverse "^0.6.6"
|
||||
|
||||
"@tailwindcss/typography@^0.2.0":
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
|
||||
integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
|
||||
|
||||
"@tailwindcss/ui@^0.6.2":
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.6.2.tgz#4144aba86543bf79fefe0ea14a78a12fb315810e"
|
||||
integrity sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ==
|
||||
dependencies:
|
||||
"@tailwindcss/custom-forms" "^0.2.1"
|
||||
"@tailwindcss/typography" "^0.2.0"
|
||||
hex-rgb "^4.1.0"
|
||||
postcss-selector-parser "^6.0.2"
|
||||
|
||||
"@types/classnames@^2.2.10":
|
||||
version "2.2.10"
|
||||
resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
|
||||
@ -2667,6 +2691,11 @@ he@1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
|
||||
integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
|
||||
|
||||
hex-rgb@^4.1.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.2.0.tgz#fb377f2e5658fc924f1efa189685922e56ecaf0f"
|
||||
integrity sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA==
|
||||
|
||||
hmac-drbg@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
@ -3170,6 +3199,11 @@ mime-types@^2.1.27:
|
||||
dependencies:
|
||||
mime-db "1.44.0"
|
||||
|
||||
mini-svg-data-uri@^1.0.3:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
|
||||
integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
|
||||
|
||||
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
||||
@ -4740,7 +4774,7 @@ tr46@^1.0.1:
|
||||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
traverse@0.6.6:
|
||||
traverse@0.6.6, traverse@^0.6.6:
|
||||
version "0.6.6"
|
||||
resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
|
||||
integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user