added navbar

[sarmadhamdani02]

[shakeelmohamed]

Hi @sarmadhamdani02, thanks for the PR.

I don’t think the hierarchy of this nav bar is appropriate given that the text size of menu items is noticeably larger than the rest of the UI elements (which should be prioritized). Screenshot below. Additionally, the horizontal rule is too prominent. How else might we add that division, do we need it at all?

Also, please run npm test locally and address the linting issues. Due to #379 we don’t have proper CI running on the repo.

I ran the command locally and this was the output:

$ npm test

> zen-audio-player@1.1.0 pretest
> npm run stylelint:css && npm run lint

> zen-audio-player@1.1.0 stylelint:css
> stylelint css/*.css

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

css/styles.css
   4:3   ✖  Expected indentation of 0 spaces       indentation                              
  21:8   ✖  Expected single space before "{"       block-opening-brace-space-before         
  28:32  ✖  Expected "#777" to be "#777777"        color-hex-length                         
  32:3   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
  35:24  ✖  Expected single space before "{"       block-opening-brace-space-before         
  43:1   ✖  Expected no more than 2 empty lines    max-empty-lines                          
  52:28  ✖  Expected single space before "{"       block-opening-brace-space-before         
  61:18  ✖  Expected double quotes                 string-quotes                            
  64:21  ✖  Unexpected unit                        length-zero-no-unit                      
  70:34  ✖  Expected single space before "{"       block-opening-brace-space-before         
  71:12  ✖  Unexpected named color "white"         color-named                              
  72:23  ✖  Unexpected named color "black"         color-named                              
  74:4   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
  77:35  ✖  Expected single space before "{"       block-opening-brace-space-before         
  78:12  ✖  Unexpected named color "black"         color-named                              
  79:23  ✖  Unexpected named color "white"         color-named                              
  83:26  ✖  Expected single space before "{"       block-opening-brace-space-before         
  93:18  ✖  Expected double quotes                 string-quotes                            
  96:21  ✖  Unexpected unit                        length-zero-no-unit                      
  98:4   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 101:28  ✖  Expected single space before "{"       block-opening-brace-space-before         
 102:12  ✖  Expected "#222" to be "#222222"        color-hex-length                         
 107:32  ✖  Expected single space before "{"       block-opening-brace-space-before         
 108:23  ✖  Unexpected named color "black"         color-named                              
 112:34  ✖  Expected single space before "{"       block-opening-brace-space-before         
 113:12  ✖  Unexpected named color "white"         color-named                              
 116:33  ✖  Expected single space before "{"       block-opening-brace-space-before         
 117:12  ✖  Unexpected named color "black"         color-named                              
 118:23  ✖  Unexpected named color "white"         color-named                              
 123:1   ✖  Expected empty line before rule        rule-empty-line-before                   
 123:13  ✖  Expected single space before "{"       block-opening-brace-space-before         
 140:13  ✖  Unexpected empty block                 block-no-empty                           
 141:8   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 143:4   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 144:25  ✖  Expected single space before "{"       block-opening-brace-space-before         
 146:6   ✖  Expected indentation of 4 spaces       indentation                              
 148:6   ✖  Expected indentation of 4 spaces       indentation                              
 148:19  ✖  Expected single space before "{"       block-opening-brace-space-before         
 150:6   ✖  Expected indentation of 4 spaces       indentation                              
 152:6   ✖  Expected indentation of 4 spaces       indentation                              
 152:42  ✖  Expected single space before "{"       block-opening-brace-space-before         
 154:6   ✖  Expected indentation of 4 spaces       indentation                              
 155:6   ✖  Expected empty line before rule        rule-empty-line-before                   
 155:6   ✖  Expected indentation of 4 spaces       indentation                              
 155:40  ✖  Expected single space before "{"       block-opening-brace-space-before         
 157:6   ✖  Expected indentation of 4 spaces       indentation                              
 159:5   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 160:1   ✖  Expected indentation of 4 spaces       indentation                              
 160:22  ✖  Expected single space before "{"       block-opening-brace-space-before         
 161:5   ✖  Expected indentation of 8 spaces       indentation                              
 161:12  ✖  Expected "#777" to be "#777777"        color-hex-length                         
 162:5   ✖  Expected indentation of 8 spaces       indentation                              
 164:1   ✖  Expected indentation of 4 spaces       indentation                              
 258:24  ✖  Expected newline after ";"             declaration-block-semicolon-newline-after
 258:24  ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 378:3   ✖  Unexpected whitespace at end of line   no-eol-whitespace                        
 393:8   ✖  Unexpected whitespace at end of line   no-eol-whitespace

[sarmadhamdani02]

Thanks for reviewing @shakeelmohamed Ok, let me decrease the font size of navBar items and I think I should remove the horizontal line 👍

[sarmadhamdani02]

Hey @shakeelmohamed 👋

• I removed NPM errors
• reduced navbar items font size
• removed the bottom border of navBar

[sarmadhamdani02]

Hey @shakeelmohamed 👋!

In the last few commits, I have added the following changes to the UI,

• added new fonts
• changed border-radius to 30px for input and buttons
• added some GSAP animations i.e. when you load to the main screen you will get nav bar animation and when you will scroll down to the footer you will get footer animations.
• I have changed the background color of the main page #f9f9f9 to fffcf5 and changed the background color of the footer to a grey-black gradient

Kindly review it as soon as possible 🙂🙂

[sarmadhamdani02]

In the latest commit, I have added a dark mode and added some icons for the dark mode in the top right corner and some animation for the dark mode.

The only problem I am facing is an npm error saying "'gsap' is not defined" (I have used the GSAP library for animation and that is why I used gsap keyword in many places in the code). Not sure how should I remove this error. Apart from this everything is pretty much fine.