add settings page (#1106)

* - add osx support in README.md

* - add settings.html page

* Make sure mobile view for settings works properly

Co-authored-by: nejcdev <nejc.cotic@kitio.com>
Co-authored-by: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>

README.md

@@ -73,6 +73,23 @@ To use our build system and run our documentation locally, you'll need a copy of
 3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
 4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
+**OSX users**:
+0. NPM ```npm install```
+1. install Ruby (2.5.* recommended)
+	```brew install ruby @2.5```
+2. install bundler
+	```gem install bundler```
+3. install
+	```bundle install```
+- if bundler get any errors try
+```
+sudo rm -rf /Library/Developer/CommandLineTools
+sudo xcode-select --install
+```
+4. Run NPM
+	```npm run start```
+
+
 **Windows users**:
 
 1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.

src/pages/_data/menu.yml

@@ -185,6 +185,10 @@ extra:
     wizard:
       title: Wizard
       url: wizard.html
+    settings:
+      title: Settings
+      url: settings.html
+      badge: New
 
 layout:
   icon: layout-2

src/pages/_includes/layout/headers/page-header-settings.html

@@ -0,0 +1,17 @@
+<div class="page-header mb-3">
+	<div class="row align-items-center mw-100">
+		<div class="col">
+			<div class="mb-1">
+				{% include ui/breadcrumb.html pages="Administration,Settings" %}
+			</div>
+			<h2 class="page-title">
+				<span class="text-truncate">Settings</span>
+			</h2>
+		</div>
+		<div class="col-auto">
+			<div class="btn-list">
+				{% include ui/button.html color="primary" text="Save Settings" %}
+			</div>
+		</div>
+	</div>
+</div>

src/pages/settings.html

@@ -0,0 +1,27 @@
+---
+layout: default
+title: Settings
+---
+{% include layout/headers/page-header-settings.html %}
+<div class="row">
+	 <div class="col-12 col-md-4 px-4">
+		  {% assign items = "Account,Preferences,Privacy Settings, Theme,Audience and visibility,App Development" | split: "," %}
+		  <div class="list-group list-group-transparent mb-3 ml-3">
+				{% for item in items %}
+				<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}"
+					href="#">
+					 {{ item }}
+					 <small class="text-muted ms-auto">{{ forloop.index | random_number: 11, 200 }}</small>
+				</a>
+				{% endfor %}
+		  </div>
+	 </div>
+	 <div class="col-12 col-md-8">
+		  <div class="row">
+				<div class="col-12">
+					 {% include cards/form/layout.html horizontal=true title="Account" %}
+				</div>
+		  </div>
+	 </div>
+</div>
+