Merge pull request #247 from 30-seconds/navbar-21

Introduce wider navbar

src/blocks/entities/snippetCollection/index.js

@@ -108,7 +108,7 @@ export class SnippetCollection {
 
   get meta() {
     return {
-      name: this.name,
+      name: this.shortName,
       tags: this.tags,
       url: this.url,
       slugPrefix: this.slugPrefix,
@@ -143,6 +143,33 @@ export class SnippetCollection {
     return this._name;
   }
 
+  get shortName() {
+    if (!this._shortName) {
+      switch (this.type) {
+        case 'main':
+          this._shortName = literals.listing.snippetList;
+          break;
+        case 'blog':
+          this._shortName = literals.listing.blog;
+          break;
+        case 'language':
+          this._shortName = literals.listing.shortCodelang(
+            this.config.language.long
+          );
+          break;
+        case 'tag':
+          this._shortName = literals.listing.shortCodelangTag(
+            this.config.language.long,
+            this.tag
+          );
+          break;
+        default:
+          break;
+      }
+    }
+    return this._shortName;
+  }
+
   get seoDescription() {
     if (!this._seoDescription) {
       this._seoDescription = literals.listing.pageDescription(this.type, {

src/components/molecules/search/_index.scss

@@ -41,8 +41,8 @@
 
 [type="search"].search-box {
   transition: 0.3s ease all;
-  margin-top: 6px;
-  width: calc(100% - 56px - 56px - 44px);
+  width: calc(100% - 76px - 64px - 44px);
+  margin: 0 0 0 8px;
   background: var(--search-back-color);
   vertical-align: top;
   border: 1px solid var(--search-bar-border-color);
@@ -69,8 +69,9 @@
     }
   }
 
-  @media screen and (min-width: $layout-large-breakpoint) {
-    width: calc(800px - 4rem - 52px);
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    width: 240px;
+    margin: 0;
   }
 }
 
@@ -83,7 +84,7 @@ a.search-btn {
   vertical-align: top;
   width: 44px;
   height: 44px;
-  margin: 6px 0 0;
+  margin: 0;
   border-radius: 0 0.25rem 0.25rem 0;
   box-sizing: border-box;
   box-shadow: none;

src/components/organisms/shell/_index.scss

@@ -2,6 +2,7 @@
 :root {
   --nav-bar-back-color: #FFFFFF;
   --nav-bar-border-color: #E4E6EC;
+  --nav-bar-title-color: #000000;
   --nav-button-fore-color: #53586A;
   --nav-button-active-fore-color: #2747C7;
 }
@@ -10,15 +11,16 @@
 .page-container.dark {
   --nav-bar-back-color: #060709;
   --nav-bar-border-color: #12151C;
+  --nav-bar-title-color: #ffffff;
   --nav-button-fore-color: #cfd1d8;
   --nav-button-active-fore-color: #fbfcfe;
 }
 
 // Body scrollbar
 body {
   &::-webkit-scrollbar-track {
-    margin-top: 56px;
-    background-color: var(--scrollbar-back-color);
+    margin-top: 0;
+    background: linear-gradient(180deg, var(--nav-bar-back-color) 0%, var(--nav-bar-back-color) 111.5px, var(--nav-bar-border-color) 111.5px, var(--nav-bar-border-color) 112.5px, var(--back-color) 112.5px, var(--back-color) 100%);
   }
 
   &::-webkit-scrollbar {
@@ -51,31 +53,81 @@ body {
 .nav-bar {
   position: sticky;
   top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   transition: 0.3s ease all;
   background: var(--nav-bar-back-color);
   line-height: 0;
   box-sizing: border-box;
   z-index: 1001;
   border-bottom: 1px solid var(--nav-bar-border-color);
-  height: 100%;
+  height: 112px;
   width: 100vw;
+  padding-right: 4px;  // Pad to the right for the scrollbar (4px)
 
-  @media screen and (min-width: $layout-large-breakpoint) {
-    padding-right: 0.75rem;
-    text-align: center;
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    padding-right: 8px;  // Pad to the right for the scrollbar (8px)
+  }
 
-    > :first-child {
-      margin-right: 0.75rem;
-    }
+  @media screen and (min-width: 882px) {
+    // Difference in padding is due to the scrollbar (8px)
+    padding-left: calc((100% - 882px) / 2);
+    padding-right: calc((100% - 866px) / 2);
+  }
+}
+
+.nav-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin: 0.75rem 0.5rem;
+
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    width: calc(100% - 240px - 44px - 76px - 64px);
+  }
+
+  &:hover, &:focus, &:active {
+    outline: 0;
+    text-decoration: none;
+  }
+}
+
+.nav-title {
+  display: none;
+  color: var(--nav-bar-title-color);
+  font-family: 'Raleway', Helvetica, sans-serif;
+  letter-spacing: 0.25px;
+  font-variant-numeric: lining-nums;
+  margin: 0;
+
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    display: block;
+    font-size: 1rem;
+  }
+
+  @media screen and (min-width: 680px) {
+    font-size: 1.5rem;
+  }
+}
+
+.nav-subtitle {
+  display: none;
+  color: var(--fore-color);
+  font-size: 1rem;
+  margin: 0;
+
+  @media screen and (min-width: $layout-large-breakpoint) {
+    display: block;
   }
 }
 
 // Navigation buttons
 .nav-btn {
   position: relative;
   display: inline-block;
-  height: 56px;
-  width: 56px;
+  min-width: 64px;
+  min-height: 56px;
   margin: 0;
   border: none;
   cursor: pointer;
@@ -104,8 +156,8 @@ body {
 img.nav-website-logo {
   transition: 0.3s ease all;
   padding: 6px;
-  width: 44px;
-  height: 44px;
+  width: 64px;
+  height: 64px;
 }
 
 // Content container

src/components/organisms/shell/index.jsx

@@ -57,6 +57,10 @@ const Shell = ({
             className='nav-website-logo'
           />
         </a>
+        <a className='nav-title-wrapper' href='/'>
+          <h1 className='nav-title'>{literals.siteName}</h1>
+          <p className='nav-subtitle'>{literals.siteDescription}</p>
+        </a>
         <Search isMainSearch={isSearch} />
         <a
           className='nav-btn icon icon-settings'

src/config/cypress.json

@@ -6,5 +6,9 @@
   "fixturesFolder": ".cypress/fixtures",
   "pluginsFile": ".cypress/plugins/index.js",
   "supportFile": false,
-  "video": false
+  "video": false,
+  "retries": {
+    "runMode": 5,
+    "openMode": 2
+  }
 }

src/lang/en/listing/index.js

@@ -11,8 +11,10 @@ const literals = {
   snippetList: 'Snippet List',
   blog: 'Blog',
   tag: t => `${capitalize(t)}`,
-  codelang: l => l,
-  codelangTag: (l, t) => `${l} ${capitalize(t)}`,
+  shortCodelang: l => `${l}`,
+  shortCodelangTag: (l, t) => `${l} ${capitalize(t)}`,
+  codelang: l => `${l} Snippets`,
+  codelangTag: (l, t) => `${l} ${capitalize(t)} Snippets`,
   snippetCount: c => `${c} snippets`,
   pageDescription: (t, p) => {
     switch (t) {

src/styles/_global_variables.scss

@@ -28,6 +28,9 @@ body.dark {
   --scrollbar-back-color: hsl(227, 19%, 3%);
   --scrollbar-fore-color: hsl(228, 19%, 33%);
   --scrollbar-fore-color-dark: hsl(228, 19%, 42%);
+  --nav-bar-back-color: #060709;
+  --nav-bar-border-color: #12151C;
+  --back-color: #0e0e11;
 }
 
 // Layout breakpoints